jquery Z-Tree的简单使用
2019-01-23 本文已影响0人
一Y一
DEMO
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ztree的简单实用</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
<script type="text/javascript">
var setting = {
view: {
showIcon: false
}
};
var zNodes = [
{
name: "父节点1 - 展开", open: true,
children: [
{
name: "父节点11 - 折叠",
children: [
{name: "叶子节点111"},
{name: "叶子节点112"},
{name: "叶子节点113"},
{name: "叶子节点114"}
]
},
{
name: "父节点12 - 折叠",
children: [
{name: "叶子节点121"},
{name: "叶子节点122"},
{name: "叶子节点123"},
{name: "叶子节点124"}
]
},
{name: "父节点13 - 没有子节点", isParent: true}
]
},
{
name: "父节点2 - 折叠",
children: [
{
name: "父节点21 - 展开展开展开展开", open: true, checked: true,
children: [
{name: "叶子节点211"},
{name: "叶子节点212"},
{name: "叶子节点213"},
{name: "叶子节点214"}
]
},
{
name: "父节点22 - 折叠",
children: [
{name: "叶子节点221"},
{name: "叶子节点222"},
{name: "叶子节点223"},
{name: "叶子节点224"}
]
},
{
name: "父节点23 - 折叠",
children: [
{
name: "叶子节点231",
click: "test()"
},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]
}
]
},
{name: "父节点3 - 没有子节点", isParent: true}
];
$(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function test() {
alert(2222)
}
</script>
</html>
官方文档
再来一个例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jQuery, javascript, Tree, plugIn, 树, 插件, 树插件, Web, Web前端"/>
<title>ztree的简单实用</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
<script>
var test_data = {
"responseState": {
"code": 0,
"description": ""
},
"data": [
{
"menuList": [
{
"id": 71,
"rightName": "菜单1",
"rightMark": "1",
"rightURL": null,
"available": 1,
"upRightId": 61,
"recordOrder": 71,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:36:28",
"creator": 1,
"lastModifyTime": "2018-03-19 13:38:39",
"lastModifier": 1,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": [
{
"id": 76,
"rightName": "菜单12",
"rightMark": "12",
"rightURL": "12",
"available": 1,
"upRightId": 71,
"recordOrder": 76,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-20 16:18:46",
"creator": 1,
"lastModifyTime": "2018-03-20 16:18:46",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
},
{
"id": 77,
"rightName": "菜单13",
"rightMark": "13",
"rightURL": "13",
"available": 1,
"upRightId": 71,
"recordOrder": 77,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-20 16:18:57",
"creator": 1,
"lastModifyTime": "2018-03-20 16:18:57",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
},
{
"id": 73,
"rightName": "菜单11",
"rightMark": "11",
"rightURL": "11",
"available": 1,
"upRightId": 71,
"recordOrder": 73,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:37:24",
"creator": 1,
"lastModifyTime": "2018-03-19 13:37:24",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
}
]
},
{
"id": 72,
"rightName": "菜单2",
"rightMark": "2",
"rightURL": "2",
"available": 1,
"upRightId": 61,
"recordOrder": 72,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:36:42",
"creator": 1,
"lastModifyTime": "2018-03-19 13:37:15",
"lastModifier": 1,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": []
},
{
"id": 74,
"rightName": "菜单3",
"rightMark": "3",
"rightURL": "3",
"available": 1,
"upRightId": 61,
"recordOrder": 74,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:41:51",
"creator": 1,
"lastModifyTime": "2018-03-19 13:41:51",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": [
{
"id": 75,
"rightName": "菜单31",
"rightMark": "31",
"rightURL": "31",
"available": 1,
"upRightId": 74,
"recordOrder": 75,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:42:45",
"creator": 1,
"lastModifyTime": "2018-03-19 13:42:45",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": [
{
"id": 99,
"rightName": "菜单311",
"rightMark": "311",
"rightURL": "31",
"available": 1,
"upRightId": 74,
"recordOrder": 75,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:42:45",
"creator": 1,
"lastModifyTime": "2018-03-19 13:42:45",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": [
{
"id": 991,
"rightName": "菜单3111",
"rightMark": "3111",
"rightURL": "31",
"available": 1,
"upRightId": 74,
"recordOrder": 75,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:42:45",
"creator": 1,
"lastModifyTime": "2018-03-19 13:42:45",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
}]
},
{
"id": 98,
"rightName": "菜单312",
"rightMark": "311",
"rightURL": "31",
"available": 1,
"upRightId": 74,
"recordOrder": 75,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:42:45",
"creator": 1,
"lastModifyTime": "2018-03-19 13:42:45",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
}
]
},
{
"id": 88,
"rightName": "菜单32",
"rightMark": "332",
"rightURL": "32",
"available": 1,
"upRightId": 74,
"recordOrder": 75,
"isInherit": 2,
"isMenu": 1,
"createTime": "2018-03-19 13:42:45",
"creator": 1,
"lastModifyTime": "2018-03-19 13:42:45",
"lastModifier": 0,
"belongAreaId": 0,
"rightIcon": null,
"rightType": 3,
"target": null,
"logable": 1,
"isFilter": 1,
"subRights": null
}
]
}
]
}
],
"pagingInfo": null
};
</script>
<script type="text/javascript">
var zNodes = [];
//抖个机灵要啥递归？
// function formatNodes() {
// var json = JSON.stringify(test_data);
// json = json.replace(/\"rightName\"/g, "\"name\"");
// json = json.replace(/subRights/g, "children")
// console.log(json);
// var jsonObj = JSON.parse(json);
// jsonObj = jsonObj.data;
// jsonObj = jsonObj[0].menuList;
// console.log(jsonObj);
// zNodes = jsonObj;
// }
var json = JSON.stringify(test_data);
var jsonArray = JSON.parse(json);
jsonArray = jsonArray.data;
jsonArray = jsonArray[0].menuList;
console.log(jsonArray);
var node = {}
function formatNodes(jsonArray) {
if (jsonArray != undefined && jsonArray != null) {
for (var i = 0; i < jsonArray.length; i++) {
node = jsonArray[i];
var name = node.rightName;
var id = node.id;
console.log(id)
var children = node.subRights;
// getChildren(children, id, jsonObj);
node.children = children;
node.name = name;
node.click="alert("+id+")"
if (children != undefined && children != null) {
formatNodes(children)
}
}
}
}
formatNodes(jsonArray);
zNodes = jsonArray;
var setting = {
view: {
showIcon: false
}
};
$(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var sNodes = treeObj.getNodes();
if (sNodes.length > 0) {
var tId = sNodes[0].tId;
console.log(tId)
}
});
</script>
</html>
