@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ZTreeTest</title>
<link href="~/Content/zTreeStyle.css" rel="stylesheet" />
<script src="~/js/jquery-1.11.3.min.js"></script>
<script src="~/js/jquery.ztree.all-3.5.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
check: {
enable: true, //设置是否显示checkbox复选框
chkDisabledInherit: true
},
view: {
selectedMulti: true, //设置是否能够同时选中多个节点
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
showTitle: true, //设置是否显示节点的title提示信息
expandSpeed: "slow", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义:"slow", "normal", "fast")或 表示动画时长的毫秒数值(如:1000)
selectedMulti: false, //设置是否允许同时选中多个节点。默认值: true
},
data: {
key: {
title: "t",
name: "name"
},
keep: {
parent: true,
leaf: true
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
},
callback: {
//onCollapse: collapseNode,
//onExpand: expandNode,
},
},
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{
id: 1, pId: 0, name: "一级", t: "我很普通,随便 展开/折叠 我吧", //节点是否展开
icon: "", //节点的图标
iconOpen: "/Content/img/1_open.png", //节点展开式的图标
iconClose: "/Content/img/1_close.png", //节点折叠时的图标
children: [
{
id: 3, pId: 1, name: "二级1",
children: [
{
name: "三级1", children: [
{ name: "四级1", icon: "/Content/img/2.png", /*节点的图标*/ },
{ name: "四级2", icon: "/Content/img/3.png", /*节点的图标*/ }
]
},
{ name: "三级2" }
]
},
{ id: 4, pId: 1, name: "二级2", icon: "/Content/img/4.png", /*节点的图标*/ }
]
},
{
id: 2, pId: 0, name: "一级",
iconOpen: "/Content/img/1_open.png", //节点展开式的图标
iconClose: "/Content/img/1_close.png", //节点折叠时的图标
children: [
{ id: 5, pId: 2, name: "二级1", icon: "/Content/img/5.png", /*节点的图标*/ },
{ id: 6, pId: 2, name: "二级2", icon: "/Content/img/6.png", /*节点的图标*/ }
]
}
];
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
var nodes = zTreeObj.getNodes();
for (var i = 0; i < nodes.length; i++) { //设置节点展开(默认展开2级)
zTreeObj.expandNode(nodes[i], true, false, true);
}
});
</SCRIPT>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>