jsTree中的技术要点

jsTree树中的数据加载有两种模式一种是通过ajax动态加载另外一种是通过json进行“树”的填充，下面对比两种加载方式的差异
1.ajax“树”的填充：

$("#using_json_2").jstree({
            "core": {
                "data": {
                    'url': function (node) {  //动态加载数据
                        return rootPath + "/api/org/jstree?id=" + node.id;
                    }
                }
            },
            "checkbox": {
                "keep_selected_style": true
                // "three_state": false //父子级别级联选择 状态为false时候只能为单选
            },
            "plugins": ["checkbox"]
        });

jsTree中的技术要点
通过这种方式加载有一个弊端就是父级节点不能展开，需要点击父节点后才能加载子节点，这样对于用户查看时候的界面不是很友好。

2.JSON“树”的填充：

$('#using_json_2').jstree({ 
'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

jsTree中的技术要点
既然jsTree可以使用JSON进行“树”的填充那么根据这一特性可以在后台进行子节点的设置，下满是代码

后台：

String sql ="SELECT z.id AS "id",'【' || z.code || '】' || z.name AS "text",nvl( z.parent_id, '0' ) AS "parent",nvl((select  s.USE_ORG_ID from ITEMS_STORE s where z.id = s.USE_ORG_ID and s.ITEMS_ID=24),'0')  AS "selectedOrg" FROM zyorg z WHERE z.id IN (2,3,5,6) ORDER BY z.id"
        SQLQuery query = session.createSQLQuery(sql).setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
        List list = query.list();
        JSONArray data
        if (list != null && list.size() > 0) {
            def json2 = new JSON(list);
            data = new JSONArray(json2.toString());
            data.optJSONObject(0).parent = "#";
        }

        for (JSONObject item : data) {
            JSONObject state = new JSONObject()
            state.opened = true; //设置子节点中checkBox是否勾选
            state.selected=false;//设置子节点中checkBox是否勾选
            if(item.selectedOrg!=0){
                state.selected=true;
            }
            item.state = state
        }
        json.put("storeOrg", data)
    }

通过子查询和聚合函数将特定的数据标记出来，然后通过JSON传给前台。

前台代码：

			 $("#using_json_2").jstree({
                    "core" : {
                        "data":data.storeOrg
                    },

                    "plugins":["checkbox"]
                });

jsTree中的技术要点

一点拓展：https://www.jstree.com/docs/json/ 关于jsTree属性的详细介绍