利用Easy UI生成异步树以及动态添加标签页

生成异步树

1.生成一个空树，一般放在使用easyui布局的west模块中

<ul id="menuTree" class="easyui-tree">

2.从服务器获取节点信息，后端返回的json数据需包含以下属性：pid（父节点id）、id、text、state、url。

注意！！！：千万不要在url后面加再加请求字符串id=node.id，easy ui本身会自动以表单的形式添加一个id（id是节点的属性值node.id）请求参数。如果加了请求字符串如下形式，后台接收id的请求参数值会出现    id值,id值   这种情况。

$('#kunlunMenuTree').tree('options').url = "${ctp}/menu/menuInfo?id="+node.id;

下面的写法是正确的：

$('#menuTree').tree({url: '${ctp}/menu/menuInfo',  //向后台传送id,获取根节点              lines:true,                          //节点点开前触发            onBeforeExpand:function(node){                  $('#menuTree').tree('options').url = "${ctp}/menu/menuInfo?pid="+node.pid+"&flag="+node.flag;              },                        //返回过滤过的数据进行展示，这里返回的数据作为点开节点的子节点            loadFilter: function(data){      if (data.msg){           return data.msg;      } else {          return data;      }      },  onClick: function(node){//如果节点有url属性，则打开一个标签页if(node.url!=null){addTab(node.text, node.url,node.id);}}});

3.节点类的设计，可按自己需求去设计，这里贴上我自己的（有点乱）

/** * 封装菜单当前节点的相关信息 *  * @author kun-24-1 * */public class KunMenuNode {// 当前节点的父节点idprivate Integer pid;// 当前节点的idprivate Integer id;// 节点显示的名字private String text;// 节点的状态 open或者closedprivate String state;// 节点的urlprivate String url;// 标志private int flag;// 图标private String iconCls;public KunMenuNode() {super();}public KunMenuNode(Integer pid, Integer id, String text, String state, String url, int flag, String iconCls) {super();this.pid = pid;this.id = id;this.text = text;this.state = state;this.url = url;this.iconCls = iconCls;this.flag = flag;}public Integer getPid() {return pid;}public void setPid(Integer pid) {this.pid = pid;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getState() {return state;}public void setState(String state) {this.state = state;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public int getFlag() {return flag;}public void setFlag(int flag) {this.flag = flag;}public String getIconCls() {return iconCls;}public void setIconCls(String iconCls) {this.iconCls = iconCls;}}

4.Controller返回的是父节点数据，或者是根据父节点查出来的子节点的数据，放到List中，转换为json数据返回给客户端即可

动态添加标签页tabs

1. 创建一个放置标签页的div标签，一般放在Easy ui布局的center区域

<div id="mainTabs" class="easyui-tabs" data-options="fit:true"></div>

2. 创建动态添加tab的函数

function addTab(title, url,id) {    if ($('#mainTabs').tabs('exists', title)) {        $('#mainTabs').tabs('select', title);    } else {        var content = '<iframe scrolling="auto" frameborder="0"  src="${ctp}/menu/' + url + '?id='+id+'" style="width:100%;height:100%;"></iframe>';        $('#mainTabs').tabs('add', {            title: title,            content: content,            closable: true,        });    }}

3. 在需要添加标签页的地方调用此函数即可，比如上述添加树菜单项被点击的时候，会根据当前节点是否有url属性来动态添加一个标签页