怎样创建一个树形

本文介绍了如何创建和操作Ztree树形结构,包括添加、编辑节点,以及展开、折叠、查找节点的方法。通过详细讲解参数用法,帮助读者掌握Ztree的基础使用。同时提供了引用Ztree CSS和JS插件、初始化树形结构以及设置数据的步骤,展示了一个简单的实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

  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 },

        ];

实现的效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值