开发工具与关键技术:VS/MVC
作者:何桂朋
撰写时间:2019年6月26日
ztree–树形图是jQuery插件库的一个插件,可以用来做权限树形图、菜单树形图。把每个部分分析清晰。给使用者更方便。
jQuery插件库:http://www.jq22.com
如图:权限树形图
第一步:先加载依赖js和css文件:
<script src="~/Plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script src="~/Plugins/ztree/js/jquery.ztree.core.js"></script><!--zTree核心包-->
<script src="~/Plugins/ztree/js/jquery.ztree.excheck.js"></script><!--复选框功能包-->
<script src="~/Plugins/ztree/js/jquery.ztree.exedit.js"></script><!--编辑功能包-->
第二步、页面上加入树标签:
var SetTing = {
view: {
addHoverDom: false,
removeHoverDom: false,
selectedMulti: false
},
//开启多选框
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
//开启修改功能
edit: {
enable: true
}
};
上面的是设置树形图的基本属性。比如“check”是开启多选框,“edit”是开启修改功能。
然后输入一些基本数据:
var zNodes = [
{ id: 1, pId: 0, name: "第一个节点", open: true },
{ id: 101, pId: 1, name: "一次性加载大数据量" },
{ id: 102, pId: 1, name: "分批异步加载大数据量" },
{ id: 103, pId: 1, name: "分批异步加载大数据量" },
{ id: 104, pId: 1, name: "最简单的树" },
{ id: 2, pId: 0, name: "第二个节点", open: false },
{ id: 201, pId: 2, name: "拖拽 节点 基本控制" },
{ id: 202, pId: 2, name: "拖拽 节点 高级控制" },
{ id: 204, pId: 2, name: "基本 增 / 删 / 改 节点" },
{ id: 205, pId: 2, name: "高级 增 / 删 / 改 节点" },
{ id: 207, pId: 2, name: "异步加载 & 编辑功能 共存" },
{ id: 208, pId: 2, name: "多棵树之间 的 数据交互" },
];
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), SetTing, zNodes);
});
注意:用节点上的“id”,绑定分支“pId”。
动态数据:
function myfunction() {
var zNodes = [];
var zNodesbtn = "";
$.get("SelectModularAndDetail", function (data) {
for (var j = 0; j < data.length; j++) {
zNodesbtn ={ id: data[j].ModularID , pId: 0, name:
data[j].ModularName , open: true };
zNodes.push(zNodesbtn);
var ModularDetailVos = data[j].ModularDetailVos;
if (ModularDetailVos != null && ModularDetailVos != "") {
for (var i = 0; i < ModularDetailVos.length; i++) {
zNodesbtn = { id: ModularDetailVos[i].ModularDetailID ,
pId: data[j].ModularID , name: ModularDetailVos[i].Special };
zNodes.push(zNodesbtn);
}
}
}
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
}