jstree使用示例代码
Posted 那一缕阳光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jstree使用示例代码相关的知识，希望对你有一定的参考价值。
首先定义一个展示树的div
<div id="twDept" class="tree-demo"></div>
//初始化树
function initTree() {
$(‘#twDept‘).jstree({
"core": {
"themes": {
"responsive": false
},
‘check_callback‘: true,
‘data‘: function (obj, callback) {
report.DataGet(‘查询1级部门的接口路径‘, null, function (data) {
if (data) {
callback.call(this, data);
}
}, null, ‘json‘);
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"plugins": ["types", "checkbox"],
"checkbox": {
"keep_selected_style": false,//是否默认选中
"three_state": false//父子级别级联选择
}
});
$(‘#twDept‘).on("loaded.jstree", function (e, data) {
var root = e.target.firstChild.firstChild;
data.instance.open_node(root);
_inst = data.instance;
});
$(‘#twDept‘).on("open_node.jstree", function (e, data) {
var inst = data.instance;
var selectedNode = inst.get_node(data.node);
var firChild = $(‘#twDept‘).jstree("get_node", inst.get_children_dom(selectedNode)[0].id);
if (firChild.text == "" && selectedNode.id != e.target.firstChild.firstChild.id) {
selectedNode.children = [];
report.DataGet(‘查询子节点的接口路径‘?code=‘ + selectedNode.li_attr.treeDeptCode, null, function (data) {
if (data) {
$.each(data, function (i, item) {
inst.create_node(selectedNode, item, "last");
})
}
}, null, ‘json‘);
}
});
//end new
}
以上是关于jstree使用示例代码的主要内容，如果未能解决你的问题，请参考以下文章