你的位置:首页 > Java教程

[Java教程]EasyUI创建异步树形菜单和动态添加标签页tab


创建异步树形菜单

  1. 创建树形菜单的ul标签
    <ul class="easyui-tree" id="treeMenu"></ul>

    View Code
  2. 写js代码,对菜单的ul标签元素使用tree函数
    $(function(){  $('#treeMenu').tree({    url:'tree_data.json' //url的值是异步获取数据的页面地址   });});

    View Code
  3. 写用来异步获取数据的php页面(tree_data.json页面)。
    返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数据库过程)
    $result = [];//节点一$prodArr = [  "id" => 1,  "text" => "商品管理",  "state" => "open",  "children" => [    [      "id" => 2,      "text" => "添加商品",      "state" => "open",      "attributes" => [        "url" => "http://abc.com/test.php"      ]    ],    [      "id" => 3,      "text" => "修改商品",      "state" => "open",      "attributes" => [        "url" => "http://abc.com/test2.php"      ]    ]  ]];//节点二$newsArr = [  "id" => 10,  "text" => "新闻管理",  "state" => "open",  "children" => [    [      "id" => 12,      "text" => "添加新闻",      "state" => "open"    ],    [      "id" => 13,      "text" => "修改新闻",      "state" => "open"    ]  ]];//节点三$userArr = [  "id" => 20,  "text" => "用户管理",  "state" => "open",  "children" => [    [      "id" => 22,      "text" => "添加用户",      "state" => "open"    ],    [      "id" => 23,      "text" => "修改用户",      "state" => "open"    ]  ]];Array_push($result, $prodArr, $newsArr, $userArr);echo json_encode($result);

    View Code

    说明:
    节点的属性:
    id:节点ID,可以作为参数来异步向页面地址获取子节点数据
    text:节点文本
    state:节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
    checked:指明节点是否被选中。
    attributes:自定义属性
    children:以数组的形式包含子节点       (更多细节知识可查看easyui官网中tree知识点)

 到这,异步树形菜单就完成了。

 

动态添加标签页tab

  1.  创建用来包裹标签页tab的外层标签
    <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;"></div> 

    View Code
  2. 在js中定义addTab函数
    function addTab(title, url){  if ($('#contentTabs').tabs('exists', title)){    $('#contentTabs').tabs('select', title);  } else {    var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" ></iframe>';    $('#contentTabs').tabs('add',{      title:title,      content:content,      closable:true    });  }}

    View Code
  3. 在树形菜单的点击事件函数中调用addTab函数
    $(function(){  $("#treeMenu").tree({    onClick:function(node){      if (node.attributes !== undefined && node.attributes.url !== undefined) {        addTab(node.text,node.attributes.url);        }                                    }  });});

    View Code

 

最后,如图显示