JsTree3 基本用法 – checkbox和动态加载
jsTree是jQuery的插件，具有交互性的树。
它是免费的、开源的、容易扩展、主题化和可配置的，它支持HTML、JSON数据源和数据加载。
HTML:
<div class="row">
<div class="col-xs-3">
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-gears"></i><h3 class="box-title">权限选择实验</h3>
</div>
<div class="box-body table-responsive">
<div id="mytree">
</div>
<button class="btn btn-primary" type="button" onclick="submitForm()">提交</button>
</div>
<div class="box-header with-border">
<i class="fa fa-gears"></i><h3 class="box-title">动态加载实验</h3>
</div>
<div class="box-body table-responsive">
<div id="mytree2">
</div>
<button type="button" class="btn btn-success btn-sm" onclick="demo_create();">添加子节点</button>
</div>
</div>
</div>
</div>
使用场景一：checkbox （如：权限设置）
需求1：加载所有权限树形清单
需求2：加载完后动态勾选已有权限
需求3：提交勾选的权限列表
// 选择实验
$('#mytree').jstree({
"plugins": ["sort", "checkbox", "state"], //"wholerow",
"check_callback" : true,
"checkbox": {
//"keep_selected_style": false//是否默认选中
//"three_state": false//父子级别级联选择
},
"core" : {
"themes" : {
"responsive": false,
"stripes" : true
// "icons" : true,
// "dots" : false
},
'check_callback': true,
'data': [
{ "id" : "1", "parent" : "#", "text" : "test1 1"},
{ "id" : "2", "parent" : "#", "text" : "test2 1" },
{ "id" : "3", "parent" : "#", "text" : "test3 1" },
{ "id" : "21", "parent" : "2", "text" : "test21 21" },
{ "id" : "22", "parent" : "2", "text" : "test22 22" },
{ "id" : "11", "parent" : "1", "text" : "test11 11" },
{ "id" : "12", "parent" : "1", "text" : "test12 11" },
{ "id" : "31", "parent" : "3", "text" : "test31 11" },
{ "id" : "311", "parent" : "31", "text" : "test311 11" },
{ "id" : "312", "parent" : "31", "text" : "test312 11" }
]
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
'state': "closed"
});
$('#mytree').on("loaded.jstree", function (event, jstree) {
let _inst = jstree.instance;
let $jstree = $('#mytree').jstree(true);
let data = _inst._model.data;
let ids = ["1", "3", "31", "312"];
// 根据json参数勾选默认
for(let key in data) {
if('#' === key) {
continue;
}
if ($.inArray(key, ids) != -1) {
$jstree.check_node(key);
}
}
$jstree.jstree('close_all');
});
/**
* 获取所有选择的数据
* @param treeId
*/
function getCheckTreeIds(treeId) {
// 方法一
// 打开所有的节点，不然获取不到子节点数据
var that = $("#" + treeId);
that.jstree('open_all');
var ids = [];
var treeNode = that.jstree(true).get_selected(true);
for (var i = 0; i < treeNode.length; i++) {
var node = treeNode[i];
var nodeId = node.original.id;
// 判断是否重复
if ($.inArray(nodeId, ids) == -1) {
ids.push(nodeId);
}
for (var j = 0; j < node.parents.length; j++) {
// 判断是否重复
var parentId = node.parents[j];
if (parentId != "#" && $.inArray(parentId, ids) == -1) {
ids.push(parentId);
}
}
}
that.jstree('close_all');
return ids;
// 方法二
// var ids = [];
// var $jstree = $('#mytree').jstree(true);
// var data = $jstree._model.data;
// for(key in data) {
// if($jstree.is_checked(key)) {
// //alert(data[key].li_attr._id);
// ids.push(data[key].id);
// }
// }
}
// 提交表单
function submitForm(){
var userTreeIds = getCheckTreeIds("mytree");
bootbox.alert(userTreeIds);
$.ajax({
type :"post",
url : "<?= Url::to(['edit', 'id' => $model->id])?>",
dataType : "json",
data : {
id : '<?= $model['id']?>',
pid : $("#authrole-pid").val(),
sort : $("#authrole-sort").val(),
title : $("#authrole-title").val(),
userTreeIds : userTreeIds
},
success : function(data){
if (parseInt(data.code) === 200) {
window.location = "<?= Url::to(['index'])?>";
} else {
error(data.message);
}
}
});
}
使用场景二：动态加载（如：文件展示、部门展示等）
需求1：展开时动态加载节点
需求2：有子节点的节点上显示 + 号
需求3：异步加载
需求4：节点支持超链接
//动态加载实验
$('#mytree2').jstree({
"plugins" : ["sort", "state"],
"core" : {
//"animation" : 0,
"check_callback" : true,
"themes" : {
"responsive": false,
"stripes" : true
},
//"force_text" : true,
"data": {
"url" : "<?=Url::toRoute('/article-cat/tree00');?>",
// 'data' : function (node) {
// return { 'id' : node.id };
// },
// 'success': function(data) {
// //console.info(data);
// if(data) {
// callback.call(this, data);
// }else{
// $("#jstree").html("暂无数据！");
// }
// }
'dataType' : 'json'
},
"state": "closed"
},
});
$('#mytree2').on("open_node.jstree", function (e, data) {
//$('#mytree2').on("select_node.jstree", function (e, data) {
/*//添加节点
var node = [{id:"111",parent:"2",text:"1111"},{id:"222",parent:"2",text:"2222"}];
var selNodeId = data.node.id;
var parentId = data.node.parent;
for(var i=0;i<node.length;i++){
$("#mytree2").jstree("create_node", selNodeId, node[i], "last", false, true);
}*/
//适配 open_node.jstree 和 select_node.jstree
var selNode = (typeof(data.selected) == "undefined") ? data.node : data.selected;
var inst = data.instance;
var selectedNode = inst.get_node(selNode);
var level = $("#"+selectedNode.id).attr("aria-level");
if(parseInt(level) <= 4){
loadNodes(inst, selectedNode);
}
});
//添加节点
function demo_create() {
var ref = $('#mytree2').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
};
//动态异步加载节点
function loadNodes(inst, selectedNode) {
//inst.open_node(selectedNode);
//alert(selectedNode.text);
$.ajax({
url: "<?=Url::toRoute('/article-cat/tree01');?>",
data : {'pid': selectedNode.id},
dataType: "json",
type: "POST",
success: function (data) {
if (data) {
//json 中添加此语句可以支持超链接: "a_attr":{"href":"xxxx"}
//data = [{"id":"6","text":"aaaaa","icon":"fa fa-file", "a_attr":{"href":""}},
// {"id":"5","text":"bbbbb","icon":"fa fa-file", "children":[{"text":"-","icon":"fa fa-folder"}]}];
selectedNode.children = [];
$.each(data, function (i, item) {
var obj = {text: item};
//$('#mytree2').jstree('create_node', selectedNode, obj, 'last');
inst.create_node(selectedNode, item, "last");
});
inst.open_node(selectedNode);
} else {
$("#mytree2").html("暂无数据！");
}
},
error : function(){
alert("操作失败");
}
});
}
//点击跳转
$("#mytree2").on('activate_node.jstree', function(e, data){
alert(data.node.a_attr.href);
document.location.href = data.node.a_attr.href;
});
//查询所有 id 的 child 数量
//遍历此数据，如果 child > 0则添加空节点以显示加号，展开时再添加全部数据: "children":[{"text":"","icon":false}]
$sql = "SELECT f2.id, COUNT(b.id) amount FROM
(
SELECT id,pid FROM ".static::tableName()."
) b
right join
(
SELECT id,pid FROM ".static::tableName()."
) f2
on f2.id=b.pid GROUP BY f2.id";