EasyUI Tree_box 配合后台

$(function () {
            var first = true;
            $("#tree_box").tree({
                cache: false,
                url: "/xx/em/product_tree.action",
                animate: true,
                dnd: true,
                lines: true,
                loadFilter: function (data) {//loading root
                    if (first) {
                        var root = [];
                        var node = {text: '菜单', state: 'open', id: "0"};
                        node.children = data;
                        root.push(node);
                        first = false;
                        return root;
                    } else {
                        return data;
                    }
                },
                onClick: function (node) {
                    if (node.id != "0")
                        frames["dataFrame"].location.href = "/xx/xx/xx.action?id="+node.id;
                    else
                        frames["dataFrame"].location.href = "/xx/xx/blank.html";
                }
            });
        });

以上是Js代码，loadFilter 加载过滤实现的是在，在生成的树上加一个根节点。

 下面插入局部Html代码，主要是前端的一个基本的布局，和树的显示条件。

<div class="easyui-layout" style="1330px;height:610px;">
    <div region="center">
        <div class="easyui-tabs" fit="true" border="false" id="tabs">
            <div title="数据维护">
                <iframe frameborder='0' scrolling='auto' style='100%;height:100%' name="dataFrame"
                        src="/xx/xx/blank.html"></iframe>
            </div>
        </div>
    </div>
    <div region="west" style=" 230px;padding:15px;background-color: #D4E3F6;" title="菜单" split="true">
        <ul id="tree_box"></ul>
    </div>
</div>

后台是用Spring Mvc实现的，下面插入局部后台代码，返回数据类型是Json 类型。

 public Object productTree(String id) {
        try {
            id = StringUtil.nullToAnother(id, "0");
            //sql
            StringBuilder sqlStr = new StringBuilder();
            sqlStr.append(" select e.n_id id, e.vc_name   text, " +
                    "   decode(e.n_parid,'0','closed','open') state " +
                    "   from table e " +
                    "  where "+
                    "    and e.n_parid = '" + id + "'");
            //jsonArray
            JSONArray jsonArray = new JSONArray();
            List<Map<String, Object>> trees = jdbcTemplate.queryForList(sqlStr.toString());
            for (Map map : trees) {
                JSONObject json = new JSONObject();
                json.element("id", map.get("ID"));
                json.element("text", map.get("TEXT"));
                json.element("pid", map.get("PID"));
                json.element("state", map.get("STATE"));
                jsonArray.add(json);
            }
            
            return jsonArray.toString();
        } catch (Exception ex) {
            logger.error("");
            ex.printStackTrace();
            return null;
        }

    }

实现原理，初始化的时候，显示在根节点的数据是在id在一个特定值的时候，比如是空值，或者给它一个特定的值，后面相应的子选项，通过点击等相应事件来传递id来获取其全部子项。