树形节点ZTree

这种树形节点是自定义的，还有一种树形节点是绑定数据库的，在我的另外一篇文章里有写到。


@{Layout = null;
}<!DOCTYPE html><html>
<head><meta charset="utf-8"><title>树形节点</title><link href="~/Content/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /><script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>@*放在所有的js插件之前*@<script src="~/Content/zTree_v3/js/jquery.ztree.core.js"></script><script src="~/Content/zTree_v3-master/js/jquery.ztree.excheck.min.js"></script>
</head>
<body class="no-skin"><div id="fenlei-box"><div id="border"><div id="shuju"><div class="zTreeDemoBackground" left><ul id="checkboxTree" class="ztree"></ul></div></div></div></div><script>//编写生成zTree复选框树js，并初始化zTree树，根据静态数据生成一个树//页面生成一个树，分为两级树，但是这两级没有一个同根节点var setting = {view: { selectedMulti: true, showIcon: false },check: { enable: true, chkboxType: { "Y": "ps", "N": "s" } },data: {simpleData: { enable: true, },keep: {parent: false,leaf: false}},async: { enable: true },callback: {onClick: function (e, treeId, treeNode, clicklog) {zTree.checkNode(treeNode, treeNode.checked, true);}}}, zTree;var zNodes = [//id  父id  是否打开{ id: 1, pId: 0, name: "文胸", open: true },{ id: 11, pId: 1, name: "无痕文胸" },{ id: 2, pId: 0, name: "内裤", open: true },{ id: 21, pId: 2, name: "四角内裤" },{ id: 21, pId: 2, name: "三角内裤", open: true },{ id: 211, pId: 21, name: "蕾丝内裤" },{ id: 212, pId: 21, name: "纯棉内裤" },{ id: 3, pId: 0, name: "打底裤", open: true },{ id: 33, pId: 3, name: "小脚裤" },{ id: 4, pId: 0, name: "吊带类", open: true },{ id: 5, pId: 0, name: "家居服", open: true },{ id: 6, pId: 0, name: "服装", open: true },{ id: 7, pId: 0, name: "秋衣", open: true },{ id: 8, pId: 0, name: "杂类", open: true },{ id: 81, pId: 8, name: "鸭舌帽" },{ id: 82, pId: 8, name: "女士围巾" },{ id: 83, pId: 8, name: "男士围巾" },{ id: 84, pId: 8, name: "情侣围巾" },]$(document).ready(function () {zTree = $.fn.zTree.init($("#checkboxTree"), setting, zNodes);})//在初始化函数内，添加zTree根节点，利用addNodes方法，再添加一个节点$(document).ready(function () {zTree = $.fn.zTree.init($("#checkboxTree"), setting, zNodes);var newNode = { id: 0, name: "博超软件", pId: null, open: false };newNode = zTree.addNodes(null, 0, newNode);});//发现根节点加到结尾或者开头，但是不是树的总根节点，这样不满足条件$(document).ready(function () {var newNode = { id: 0, name: "博超软件", pId: null, open: true };zNodes.push(newNode);zTree = $.fn.zTree.init($("#checkboxTree"), setting, zNodes);});</script>
</body>
</html>

这是得到的效果：