Ztree树状的处理

1.用一个div进行包裹ztree结构，引用相关的js代码和css样式，这里用的样式是awesome.css

所引用的js文件，css文件可以在网上下载（这里所用到的jquery-ztree文件放在网盘了）

<ul id="tree" class="ztree"></ul>
<link type="text/css" rel="stylesheet" href="~/Scripts/jquery-ztree/css/awesomeStyle/awesome.css">
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
//编写相关的树状结构构件的代码
</script>

2.对ztree进行结构处理

2.1 在对页面进行初始化操作的时候会进行获取数据，对获取数据后进行处理初始化树状

<script type="text/javascript">
//这里一般会引用jquery文件，我这边省略了，记得要引用，不然相关jquery的写法可能会报错的
$(function(){//通过ajax获取树状所需要用的数据，或者其他获取数据方式也行$.ajax({url: "",//接口地址，调用后端接口的type: "get",//get或者postdataType: "json",success: function (msg) {var data= msg.Data;//接口调用之后返回的数据，这个具体情况具体获取，有的返回数据结构会不太一样localStorage.setItem("dataTree", JSON.stringify(data));//将数据存储起来，便于后面可以获取使用，dataTree是自定义的名称，获取的时候会根据这个名称进行获取//初始化树(是否显示复选框)，此处可以自定义参数，可以随意确定参数作用//此处的是定义两个参数，第一个是表示是否显示复选框，//第二个是自定义的内容（会用在定义树状节点后的操作图标）initTree(false, addDiyDom);},error: function(msg) {alert(msg.Message);}});});</script>

2.2 初始化内容内部的处理initTree(false,addDiyDom)

//获取数据后会调用的方法
function initTree(enableCheck, addDiyDom) {var zNodes = initNodes();//初始化节点//设置树状基本的配置var setting = {check: {enable: enableCheck,chkStyle: "checkbox"},data: {key: {checked: "IsChecked",name: "Name",children: "Children",isParent: "IsParent",type: "Type",level: "Level"},simpleData: {enable: true,idKey: "Id"}},callback: {beforeClick: zTreeBeforeClick,//点击判断是否操作点击事件onClick: zTreeOnClick  //如果beforeClick里的方法事件返回为true，//则会回调此方法},view: {addDiyDom: addDiyDom,//视图展示的自定义内容fontCss: setFontCss  //节点字体颜色的设置},edit: {//此处可以设置操作增删改节点，//但是如果在自己自定义addDiyDom就可以不需要在此处的设置了}};//初始化treeObj = $.fn.zTree.init($("#tree_mat"), setting, zNodes);treeObj.expandAll(true);//节点全部展开}

2.3 在初始化树状方法initTree内需要进行处理的方法

2.3.1 addDiyDom视图展示的自定义内容（在获取数据的后调用的初始化的时候会作为参数，上面有出现）

initTree(false, addDiyDom);

内容可以根据具体情况具体添加

//这个方法的两个参数是固定的function addDiyDom(treeId, treeNode) {var aObj = $("#" + treeNode.tId + "_a");
//节点名称后面对应的相关操作（一般会设置成图标，进行点击到对应的事件进行对应处理）     var editStr = "<a href='javascript: void(0)' onclick=operationAdd('" + treeNode.Id + "','" + treeNode.Type + "')  id='a_" + treeNode.Id+ "_add_" + treeNode.Type + "' title='新增' ><i class='fa fa-plus-square orange'></i></a>";editStr = editStr + "<a href='javascript: void(0)' onclick=operationEdit('" + treeNode.Id + "','" + treeNode.Type + "')  id='a_" + treeNode.Id+ "_update_" + treeNode.Type + "' title='修改'><i class='fa fa-edit blue'></i></a>"+ "<a href='javascript: void(0)' onclick=operationDelete('" + treeNode.Id + "','" + treeNode.Type + "')  id='a_" + treeNode.Id+ "_delete_" + treeNode.Type + "' title='删除'><i class='fa fa-trash red'></i></a>";aObj.append(editStr);};

图标的效果大致如此，鼠标放上去会显示对应的标题

2.3.2 initNodes初始化节点

function initNodes() {//根节点，这组数据是最上的根节点，数据的字段根据具体情况具体添加，//跟获取数据localStorage.getItem("dataTree")的结构字段保持一致var rootNode = new Object();rootNode.Id = 0;//idrootNode.Name = "根节点";//名称rootNode.Level = 0;//层级rootNode.Type = "";//类型MatGroup站点群组,Mat站点,Site安装位置rootNode.IsParent = true;//是否为父级rootNode.IsChecked = false;rootNode.ParentId = 0;rootNode.ParentName = "";rootNode.ParentType = "";rootNode.Status = "";rootNode.SuperiorStatus = "";rootNode.Children = [];//获取在初始化ajax处得到的数据（2.1处有说明）var dataInfoTree = JSON.parse(localStorage.getItem("dataTree"));if (dataInfoTree == null) {return rootNode;}rootNode.Children = dataInfoTree;//将数据放在根节点的子节点中return rootNode}

2.3.3 setFontCss节点字体颜色设置

//设置字体颜色 具体情况具体判断设置function setFontCss(treeId, treeNode) {return treeNode.Status == "12" || treeNode.Status == "32" ? { color: "red" } : {};};

2.3.4 zTreeBeforeClick（beforeClick）点击判断是否操作点击事件，返回为true则触发点击事件
zTreeOnClick（onClick）这两个方法是连贯性的，所以一起说明

//点击判断是否操作点击事件，具体情况具体分析function zTreeBeforeClick(treeId, treeNode, clickFlag) {return (treeNode.id !== 0 && isClickIcon == false);};//zTreeBeforeClick为true，回调此方法function zTreeOnClick(event, treeId, treeNode) {//显示右边区域var url = "";//页面地址$("#frame").attr("src", url);//因为这块做的例子是将树状点击后的触发的是展示对应页面，//页面对应的地址放在frame框架内，所以在此处会给frame提供路径};

ztree还有很多的其他的功能处理，我这边有的还没用上，后续若用上了会进行补充

参考地址：https://treejs.cn/v3/api.php

Ztree树状的处理相关推荐

html6+树状下拉列表,layui+ztree 树状下拉框
一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· 部门 @* *@ [js] ① 以下为固定方法 function initSelectTr ...
ztree树状实现全选反选
ztree实现全选反选操作:<form id="form" method="post"><div class="D608_compa ...
zTree（二）树状图下拉框
需求添加.修改终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input 模拟下拉框 2.树状图采用zTree插件开工 ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
ztree插件树状图
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年6月27日树状图不知道大家有没有做过,要不是做项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵 ...
表格树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
Tree树状图的动态增删查改（上）生成树状图
一.刚学习项目里就有使用到树状图这个功能,树状图这个功能是要用到插件才能做的,我目前发现有两个插件的样式是比较好看的,一个是Layui里面自带的树组件,不过它的文档写的挺少的,而且看不懂:另一个是jq ...
Java - 树状结构数据解析
由于工作中好多地方需要树状结构数据,在参考了网上递归实现和数据库存储过程实现,都不太满意.突然想到zTree也有解析该类数据的要求,所以在阅读了zTree源码的前提了,按照他的实现原理,写了一个jav ...
洛谷 P5057 [CQOI2006]简单题（树状数组）
嗯... 题目链接:https://www.luogu.org/problem/P5057 首先发现这道题中只有0和1,所以肯定与二进制有关.然后发现这道题需要支持区间更改和单点查询操作,所以首先想到 ...

Ztree树状的处理

Ztree树状的处理相关推荐

最新文章

热门文章