easy_ui之创建异步树（三）

在（一）中的框架基础上，在west的部分添加异步树：

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

然后配置其节点的数据加载：

< script >

   $( function () {

       //创建tab标签页

       function addTab(title, url, id) {

           if ($( '#tt' ).tabs( 'exists' , title)) {

             $( '#tt' ).tabs( 'select' , title);

          } else {

              var content = '<iframe scrolling="auto" frameborder="0"  src="'

                   + url + '" style="width:100%;height:100%;"></iframe>' ;

             $( '#tt' ).tabs( 'add' , {

                title : title,

                content : content,

                closable : true

             });

          }

      };

      $( '#menuTree' )

             .tree(

                   {

                      url : "${ctp}/treeInit" , //向后台传送id,获取根节点   

                      lines : true ,

                       /* iconCls : "${ctp}/common/pictures/database.gif", */

                       //节点点开前触发 

                      onBeforeExpand : function (node) {

                         $( '#menuTree' ).tree( 'options' ).url = "${ctp}/treeControl?pid="

                                + node.pid+ "&flag=" +node.flag+ "&url=" +node.url+ "&text=" +node.text;

                      },

                       //返回过滤过的数据进行展示，这里返回的数据作为点开节点的子节点 

                      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);

                          }

                      }

                   });

   });

</ script >

其中loadFilter方法是用来加载树的节点，而addTab方法是用来添加tab标签页的。

其中url配置的是树节点的查询语句，可自行设计，？后面的是传递的参数，也可根据需求进行删减。

下面是我的controller里的对应方法：

package com.kunlun.control;


@Controller

public class TreeControl {

    @Autowired
    private TreeService treeService;

    @RequestMapping(value = "/treeInit", produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public String findRoot(HttpServletRequest req, HttpServletResponse resp) {
        return treeService.findRoot();
    }


    @RequestMapping(value = "/treeControl", produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public String findAllNodes(HttpServletRequest req, HttpServletResponse resp) {
        String id = req.getParameter("id");
        int flag = Integer.valueOf(req.getParameter("flag")).intValue();
        String url = req.getParameter("url");
        String text=req.getParameter("text");
        return treeService.findAllNodes(flag,url,id,text);
    }
}

service层的sql省略