怎样创建一个树形

 

1. 树形的应用范围很广阔。这几天在做项目的时候，做到权限的应用，就是需要用到树形来完成，当时觉得很难，认真的研究了一番后，发现树形也没有很难。在创建一个树形的时候，首先先研究它们的基础参数，研究完他们的参数后，你就会发现你对树形就有了一个基本的了解。（要了解详细的信息的话可以网上搜素Ztree的API文档）,下面是一些常用到的基本参数：

parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可

index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略

newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可

isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开勾选或取消勾选全部节点

checkAllNodes(checked);

checked参数为true时全部勾选，为false时全部取消勾选。勾选或取消勾选单个节点

checkNode(node, checked, checkedTypeFlag，callbackFlag);

node：要进行操作的节点

checked：为true勾选，为false取消勾选

checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动，为fals不联动

callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数，为false执行

编辑节点

edit(node);  使节点处于编辑状态，必须引用jquery.ztree.exedit 扩展。展开或折叠全部节点

expandAll(expand);

expand为true是展开所有节点，为false是折叠所有节点。

根据节点属性查找结点

getNodesByParam(key,value, parentNode);

key:属性名

value:属性值

parentNode:是否在指定节点下查找，为null表示整个树查找。获取被勾选或未被勾选的节点集合

getCheckedNodes(checked);

checked为true表示获取所有被勾选的节点集合，为false表示所有未被勾选的节点集合获取输入框勾选状态被改变的节点集合

getChangeCheckedNodes()

一，得先引用Ztree的CSS和JS的插件：

<link href="~/Plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

<script src="~/Plugins/ztree/js/jquery.ztree.core.js"></script>

<script src="~/Plugins/ztree/js/jquery.ztree.excheck.js"></script>

<script src="~/Plugins/ztree/js/jquery.ztree.exedit.js"></script>

    二，给树形写一个标签：

<div style="vertical-align: middle; text-align: center;">

     <div>

           <ul id="treeSelect" class="ztree"></ul>

     </div>

</div>

       三，初始化树形：

$(document).ready(function(){

     zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);

});

       四，设置他们的参数：

       五，设置他们的数据，在设置这个的时候，最主要的就是他们的ID和PId，代码如下：var datas = [

            { id: 1, pId: 0, name: "颜色", open: true },

            { id: 11, pId: 1, name: "蓝色", open: true },

            { id: 12, pId: 1, name: "绿色", open: true },

            { id: 2, pId: 0, name: "衣服", open: false },

            { id: 27, pId: 2, name: "裙子" },

            { id: 28, pId: 2, name: "裤子", open: true },

            { id: 3, pId: 0, name: "地区", open: false },

            { id: 27, pId: 3, name: "广东" },

            { id: 28, pId: 3, name: "四川", open: true },

        ];

实现的效果：