Jquery树插件zTree实现菜单树
程序员文章站
2022-06-07 17:04:16
本文实例为大家分享了ztree插件实现菜单树的具体代码，供大家参考，具体内容如下
&...
本文实例为大家分享了ztree插件实现菜单树的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>title</title>
<link href="js/tool/ztree/css/ztreestyle/ztreestyle.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/tool/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="js/tool/ztree/js/jquery.ztree.excheck-3.5.js"></script>
</head>
<body style="background: #ddd;">
<div class="mainbody-left">
<div class="vvtree dept-tree left">
<ul id="menu_tree_left" class="ztree"></ul>
</div>
</div>
<script>
var settingleft = {
view: {
dblclickexpand: false,//双击节点时，是否自动展开父节点的标识
showline: false,//是否显示节点之间的连线
showicon: true,
fontcss: { 'color': 'white', 'font-weight': 'normal' },//字体样式函数
selectedmulti: false //设置是否允许同时选中多个节点
},
check: {
//chkboxtype: { "y": "ps", "n": "ps" },
chkstyle: "checkbox",//复选框类型
enable: false //每个节点上是否显示 checkbox
},
data: {
simpledata: {//简单数据模式
enable: true,
idkey: "id",
pidkey: "pid",
rootpid: ""
}
},
callback: {
beforeclick: function (treeid, treenode) {
ztree = $.fn.ztree.getztreeobj("menu_tree_vehicle");
if (treenode.isparent) {
ztree.expandnode(treenode);//如果是父节点，则展开该节点
} else {
ztree.checknode(treenode, !treenode.checked, true, true);//单击勾选，再次单击取消勾选
}
}//,
// oncheck: oncheck
}
};
$(function () {
//初始化菜单树
var znodes = [
{ id: 0, pid: -1, name: "一级部门", open: true },
{ id: 1, pid: 0, name: "二级部门1", open: false },
{ id: 2, pid: 1, name: "三级部门1" },
{ id: 3, pid: 1, name: "三级部门2" },
{ id: 4, pid: 0, name: "二级部门2", open: false },
{ id: 5, pid: 4, name: "三级部门3" },
{ id: 6, pid: 4, name: "三级部门4", open: false },
{ id: 7, pid: 6, name: "四级部门1" },
{ id: 8, pid: 6, name: "四级部门2" },
{ id: 9, pid: 0, name: "二级部门3" },
{ id: 10, pid: 0, name: "二级部门4" }
];
$.fn.ztree.init($("#menu_tree_left"), settingleft, znodes);
});
</script>
</body>
</html>
更多关于ztree控件的内容，请参考专题《jquery插件ztree使用汇总》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 乐昌公主跟徐德言是什么关系？他们之间发生了什么事情
下一篇： 红枣晚上吃会胖吗