tree树展示：

<!DOCTYPE html>
<HTML><HEAD><TITLE> ZTREE DEMO </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="demoStyle/demo.css" type="text/css"><link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery.ztree.core-3.x.js"></script><SCRIPT LANGUAGE="JavaScript">var zTreeObj;// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting = {};// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）var zNodes = [{name:"test1", open:true, children:[{name:"test1_1"}, {name:"test1_2"}]},{name:"test2", open:true, children:[{name:"test2_1"}, {name:"test2_2"}]}];$(document).ready(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});</SCRIPT></HEAD>
<BODY>
<div><ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

check树的展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tree excheck</title><link rel="stylesheet" href="zTreeStyle/zTreeStyle.css"> <script src="publick/jquery-3.3.1.js"></script><script src="publick/jquery.ztree.core.min.js"></script><script src="publick/jquery.ztree.excheck.min.js"></script><!--必须要引的否则勾选框不展示-->
</head>
<body>
<ul id="leftTree" class="ztree"></ul>
<a id="checkAllTrue" href="#" >勾选</a>
<a id="checkAllFalse" href="#">取消勾选</a>
<script>var setting = {check:{enable:true},view: {showLine: true,//显示节点之间的连线。selectedMulti: false  //允许同时选中多个节点。
        },data: {simpleData: {enable:true, //使用简单数据模式idKey: "id",//节点数据中保存唯一标识的属性名称pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称rootPId: "" //用于修正根节点父节点数据 默认值：null
            }} };var nodes = [{id :"1",pId:"0",name :"山西省"},{id :"2",pId:"0",name : "河北省"},{id :"3",pId:"0",name : "内蒙省"},{id :"4",pId:"0",name : "吉林省"},{id :"11",pId:"1",name: "大同市"},{id :"12",pId:"1",name: "朔州市"},{id :"21",pId:"2",name: "石家庄"},{id :"22",pId:"2",name: "唐山市"},{id :"31",pId:"3",name: "赤峰市"},{id :"32",pId:"3",name: "呼市"},{id :"41",pId:"4",name: "长春市"},{id :"42",pId:"4",name: "四平市"},{id :"43",pId:"4",name: "辽源市"},{id :"111",pId:"11",name:"浑源县"},{id :"112",pId:"11",name: "阳高县"},{id :"121",pId:"12",name: "山阴县"},{id :"122",pId:"12",name: "应县"}];var tree  = $.fn.zTree.init($('#leftTree'), setting, nodes);tree.expandAll(tree);function checkNode(e) {var zTree = $.fn.zTree.getZTreeObj("leftTree"),type = e.data.type,nodes = zTree.getSelectedNodes();console.log(type.indexOf("All"));if (type.indexOf("All") < 0 && nodes.length == 0) {alert("请先选择一个节点");}if (type == "checkAllTrue") {zTree.checkAllNodes(true);} else if (type == "checkAllFalse") {zTree.checkAllNodes(false);}}$("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);$("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);var zTreeObj = $.fn.zTree.getZTreeObj("leftTree"); //那个树对象
            console.log(zTreeObj);var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());console.log(nodes);</script>
</body>
</html>

如下图从后端得到的json数据格式，转ztree树的格式：

//***********************加载树形菜单***************/
function zteeLoad(){var zTreeObj;// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting = {async:{enable:true,autoParam:["id"],dataType:"json",},view: {selectedMulti: false },callback: {onClick: zTreeOnClick   //ztree的点击事件
            }     };$.ajax({url:path+"/sysAclModule/selectByPisoTree.do",type:"post",data:{},dataType:"json",success: function(result) {var jsonData=result.data;for(var i = 0; i < jsonData.length; i++) {jsonData[i]["id"] = jsonData[i]["treeid"];   //'treeid'换成tree的固定数据名id  还有pid 注这里只有id数据名于tree不一致
            };var jsonDataTree =transDate(jsonData,'id','pid');////json数据转换tree数据zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, jsonDataTree);}});
}
//json数据转换tree数据
function transDate(list,idstr,pidstr){  var result = [],temp = {};  for(i = 0; i < list.length; i++){  temp[list[i][idstr]]=list[i];//将nodes数组转成对象类型
    }  for(j=0; j<list.length; j++){  tempVp = temp[list[j][pidstr]]; //获取每一个子对象的父对象  if(tempVp){//判断父对象是否存在，如果不存在直接将对象放到第一层  if(!tempVp["children"]) tempVp["children"] = [];//如果父元素的nodes对象不存在，则创建数组  tempVp["children"].push(list[j]);//将本对象压入父对象的nodes数组  }else{  result.push(list[j]);//将不存在父对象的对象直接放入一级目录
        }  }  return result;
}
///tree点击事件
function zTreeOnClick(event, treeId, treeNode) {alert(treeNode.tId + ", " + treeNode.id);
};

默认展示全部项

zTreeObj.expandAll(true);//默认展开全部

展示第一项下的子级

var node = zTreeObj.getNodeByTId("areaTree2_1");  //选中第一个节点
zTreeObj.expandNode(node, true, false, true);

转载于:https://www.cnblogs.com/fanting/p/10153732.html

tree树的展示，check树的展示，json数据转zree树格式数据相关推荐

2022年3月24日蜻蜓q旗舰版v1.2.2更新-详细的用户，内容，整体圆饼+树状+横条状统计展示功能
2022年3月24日蜻蜓q旗舰版v1.2.2更新-详细的用户,内容,整体圆饼+树状+横条状统计展示功能更新日志 ·增加用户统计,用户画像,区分男性女性,月度统计,年度统计,注册用户数统计. ·增加评 ...
【用学校抄作业带你走进可持久化线段树(主席树)】可持久化线段树概念+全套模板+例题入门：[福利]可持久化线段树)
我似乎很少写这种算法博客可持久化线段树概念概念介绍(类比帮助理解) 简单分析一下时间和空间复杂度(内容池) 模板结构体变量建树模板单点修改模板单点查询模板区间修改模板(pushup) 区 ...
【译】数据结构中关于树的一切（java版）
你每天都那么努力,忍受了那么多的寂寞和痛苦.可我也没见你有多优秀. https://user-gold-cdn.xitu.io/2018/4/17/162d1b4c1dd95fa3?w=1080&am ...
java家谱树_青锋家谱系统-基于springboot+orgtree的青锋家谱树管理系统
gen 青锋家谱系统:基于springboot架构的家谱项目系统项目介绍基于springboot.orgtree的家谱树管理系统,将纸质版的家谱进行电子化.信息化,建立家族的家谱血脉联系. [青锋 ...
b+树时间复杂度_图解：计算机数据结构中的 6 种「树」，你心中有数了吗？
数据结构这门课程是计算机相关专业的基础课,数据结构指的是数据在计算机中的存储.组织方式. 我们在学习数据结构时候,会遇到各种各样的基础数据结构,比如堆栈.队列.数组.链表.树...这些基本的数据结构类 ...
b树与b+树的区别_一文详解 B-树，B+树，B*树
B-树 B-树是一种多路搜索树(并不一定是二叉的) 1970年,R.Bayer和E.mccreight提出了一种适用于外查找的树,它是一种平衡的多叉树,称为B树(或B-树.B_树). 一棵m阶B树(b ...
Mysql索引数据结构有多个选择，为什么一定要是B+树呢？_面试 (MySQL 索引为啥要选择 B+ 树)
Mysql索引数据结构下面列举了常见的数据结构二叉树红黑树 Hash表 B-Tree(B树) Select * from t where t.col=5 我们在执行一条查询的Sql语句时候,在数 ...
二叉搜索树的删除操作可以交换吗_一文看懂数据结构中的树
通常在开始学编程的时候,你会接触一些常用数据结构.到最后一般会学到哈希表.对于修读计算机科学学位的朋友,你通常要上专门的数据结构课,从了解有关链表.队列和栈的各种知识.这些统称为线性数据结构,因为依逻 ...
树形json扁平化，一维数组树状化，对象深拷贝，元素后插入新元素，格式或动态路由等常用js合集
索引一.在元素后面插入一个新的元素. 二.对象或者数组的深拷贝. 三.从服务器端获取到动态路由表的格式化. 四.json树形数据扁平化处理(变成一维数组) 五.一维数组转化为树状结构对象. 六.防抖 ...

tree树的展示，check树的展示，json数据转zree树格式数据

如下图从后端得到的json数据格式，转ztree树的格式：

tree树的展示，check树的展示，json数据转zree树格式数据相关推荐

最新文章

热门文章