easyui-tree

最新推荐文章于 2025-08-21 23:22:44 发布

weixin_30432007

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/muwanqing/p/4831575.html

本文探讨了使用EasyUI插件加载树形结构时遇到的问题及解决方案，包括直接使用data属性与通过Ajax加载数据的不同方式，并解释了使用eval方法的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在用easyui 写一棵树，根据用户的所属部门来获取用户信息，结果出现了下面的问题：

根据如图所示api提供的方法：

我的代码是这样的

$('#userTree').tree({
            checkbox: true,
            url: 'roleAction/getUserTreeByRole.do',
            onClick:function(node){
            alert('you click '+node.text);
            }
        });

<font color="red">*</font><font size="2px">关联用户： </font>
<ul id="userTree" ></ul>

结果在任何一个浏览器中都无法得到想要的树，无奈下，尝试使用静态的方法来加载树，如下：

$('#userTree').tree({
            data:[{text: 'Item1',state: 'closed',children: [{text: 'Item11'},{text: 'Item12'}]},{text: 'Item2'}]
        });

结果得到了想要的树结构：

既然传data的方式可以显示出树结构，于是我决定采用ajax的方式来向后台请求数据，再将json数据作为data传输给tree,代码如下：

function initTree(){
   $.ajax({
             type : "post",
            //dataType: "json", 
            url: "roleAction/getUserTreeByRole.do",
            contentType : "application/x-www-form-urlencoded",
            success: function(data){
            //为什么一定要加eval呢？
            treedata = eval("(" + data + ")");
               $('#userTree').tree({
                    data: treedata
                });
                        
                     }
         });

}

后台给另一个假的数据来模拟，代码如下：

/**
     * 获取用户树
     * 
     * @return
     * @throws Exception 
     */
    @ResponseBody
    @RequestMapping("/getUserTreeByRole")
    public String getUserTreeByRole(HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String  result= "[{text: 'Item1',state: 'closed',children: [{text: 'Item11'},{text: 'Item12'}]},{text: 'Item2'}]";
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(result);
        return null;
    }