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";