jstree.js使用笔记(1)

jstree.js使用笔记(1)：异步加载子节点（点击父节点时加载子节点）

 var jstreeOptions = {
        core: {
            /**
             * 用于数据抓取
             * @param node   当前（父）节点数据
             * @param callback 回调函数
             */
            data: function (node, callback) {
                  var params=null;

                //动态构建参数
                if (node.id !== "#") {//默认第一次加载时node.id的值为：'#'
                    params = {parentId: node.id};  //递归加载是的参数
                } else {
                    params = {parentId: xxx};  //首次加载参数
                }
                /*实现子节点动态加载的关键所在 */
                $.ajax({
                    url: "",
                    data: params,
                    type: "post",
                    success: function (data) {
                        if (data.total <= 0) {
                            callback.call(this, []);
                            return;
                        }
                        var nameList = [];
                        $(data.records).each(function () {
                            var item = {
                                text: this.name,
                                id: this.id,
                                state: {
                                    'opened': false,  //表示是否立即打开
                                    'selected': true, //是否选中，这边可以支持表达式，函数等
                                    "disabled": false //是否禁用，这边可以支持表达式，函数等
                                },
                                children: true   //表示是否还有子节点
                            };
                            nameList[nameList.length] = item;
                        });
                        callback.call(this, nameList);
                    }

                    ,
                    error: function (xhr, text, status) {

                    }
                });
            }
        },
        plugins: ["search"]
    }

    //core：整个jstree显示的核心，里面包括多种项配置：
    //data： 这里是使用json格式的数据；还可以使用html或者ajax请求等
    //plugins： 这个jstree引用了哪些插件
    //multiple : false  不可多选
    var $intorgTree = $("div[data-list='intorg']").jstree(jstreeOptions)
        .bind("select_node.jstree", function (event, data) {

        }).bind("create.jstree", function (e, data) {
        }).bind("remove.jstree", function (e, data) {
        }).bind("rename.jstree", function (e, data) {
        }).bind("move_node.jstree", function (e, data) {
        });

其中关键的是 state中的open要设置为false，如果设置为true的话表示立即打开，这个时候插件回去再次加载子节点数据，这样的话会导致整张表的数据都会被递归的加载出来。
children: true //表示是否还有子节点，这个值可以从服务端返回，这边默认写true，表示第一次点击某个父节点的时候会去服务端加载一次数据。

jstree.js官网