jstree 刷新

原创于 2020-05-07 17:18:00 发布 · 733 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用Ajax从服务器获取JSON数据，并利用jstree插件在网页上动态构建和展示树状菜单的方法。通过具体代码示例，详细解释了如何配置jstree插件参数，实现菜单的展开与折叠效果。

html

                    <div id="jstree1">
                        加载中...
                    </div>

ajax 获取json的js

var lefttree = null;
function getLeftTree() {
    lefttree = $('#jstree1');
    lefttree.data("jstree", false).empty();

    lefttree.jstree({
        core: {
            check_callback: true,
            data: function (obj, callback) {
                var jsonarray;
                var paramter = {};
                paramter.op = "cms";
                paramter.om = "dict";
                paramter.action = "dictjson2";
                paramter.parentId = parentId;
                //Loading();
                var json = getJson(paramter, false);
                if (json.result) {
                    jsonarray = json.data;
                }
                callback.call(this, jsonarray);
                //return jsonarray;
            },
            strings: {
                'Loading ...': '正在加载...'
            }
        },
        plugins: ['types', 'dnd'],
    });

    lefttree.jstree().hide_icons();

    lefttree.bind("activate_node.jstree", function (e, data) {
        console.log(JSON.stringify(data.node));
    });
}

getJson

function getJson(paramter, async) {
    var result = "";
    try {
        paramter.timeUnix = new Date().getTime();
        $.ajax({
            type: "post",
            url: "/Ajax",
            data: paramter,
            dataType: "json",
            async: async,
            beforeSend: function (XMLHttpRequest) {
            },
            success: function (json) {
                result = json;
            },
            complete: function (XMLHttpRequest, textStatus) {
            },
            error: function () {
                alert("服务器没有返回数据，可能服务器忙，请重试");
            }
        });
    }
    catch (ex) {
        alert("出错了，可能服务器忙，请重试");
        bwjsLoadingClose();
    }
    return result;
}

json

[{
    "id": 0,
    "text": "根目录",
    "state": {
        "opened": true
    },
    "children": [{
        "id": 10000,
        "text": "系统管理",
        "parentId": 0,
        "state": {
            "opened": false
        },
        "children": [{
            "id": 10002,
            "text": "机构管理",
            "parentId": 10000,
            "state": {
                "opened": false
            }
        }, {
            "id": 10003,
            "text": "用户管理",
            "parentId": 10000,
            "state": {
                "opened": false
            }
        }, {
            "id": 10031,
            "text": "密码管理",
            "parentId": 10000,
            "state": {
                "opened": false
            }
        }]
    }, {
        "id": 10004,
        "text": "年度检查",
        "parentId": 0,
        "state": {
            "opened": false
        },
        "children": [{
            "id": 10032,
            "text": "油站信息查询",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10033,
            "text": "地区/县、市年检信息审批",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10034,
            "text": "年检审批进度查询",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10035,
            "text": "成品油零售企业基本情况",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10036,
            "text": "成品油批发企业基本情况",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10037,
            "text": "成品油仓储企业基本情况",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10038,
            "text": "加油站基本情况",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10039,
            "text": "成品油销售比例图",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10040,
            "text": "成品油销售趋势图",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10041,
            "text": "未提交年检信息查询",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10050,
            "text": "油站信息录入",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }, {
            "id": 10051,
            "text": "年检信息录入",
            "parentId": 10004,
            "state": {
                "opened": false
            }
        }]
    }, {
        "id": 10005,
        "text": "销售统计",
        "parentId": 0,
        "state": {
            "opened": false
        },
        "children": [{
            "id": 10042,
            "text": "油站销售录入",
            "parentId": 10005,
            "state": {
                "opened": false
            }
        }, {
            "id": 10043,
            "text": "销售量查询",
            "parentId": 10005,
            "state": {
                "opened": false
            }
        }, {
            "id": 10044,
            "text": "月销售量统计",
            "parentId": 10005,
            "state": {
                "opened": false
            }
        }, {
            "id": 10045,
            "text": "年销售量统计",
            "parentId": 10005,
            "state": {
                "opened": false
            }
        }, {
            "id": 10046,
            "text": "未提交销量信息查询",
            "parentId": 10005,
            "state": {
                "opened": false
            }
        }]
    }, {
        "id": 10048,
        "text": "消息管理",
        "parentId": 0,
        "state": {
            "opened": false
        },
        "children": [{
            "id": 10049,
            "text": "事件提醒",
            "parentId": 10048,
            "state": {
                "opened": false
            }
        }]
    }, {
        "id": 10030,
        "text": "系统设置",
        "parentId": 0,
        "state": {
            "opened": false
        },
        "children": [{
            "id": 10001,
            "text": "菜单管理",
            "parentId": 10030,
            "state": {
                "opened": false
            }
        }, {
            "id": 10008,
            "text": "数据字典",
            "parentId": 10030,
            "state": {
                "opened": false
            }
        }, {
            "id": 10006,
            "text": "角色管理",
            "parentId": 10030,
            "state": {
                "opened": false
            }
        }]
    }]
}]

View Code

js刷新