ztree树id、pid转成children格式的(待整理完整)
山铝菜单
因为菜单选用了bootstrap treeview
，而格式需要是children类似的格式
var nodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]}
];
而后台的数据是id、pid格式的
var nodes = [
{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];
所以这个时候就要进行格式转换了
函数：
/*
*data为ztree的结构数据 treecode treePcode code为父级节点的code
*/
function initData(data,code){
//第一步：构建两个对象 子对象，与父子关系的对象
var treeData;
for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
var _rowData=data[i];
if(_rowData.treePCode=='0'){
var _pnode=_rowData.treeCode;
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={nodes:[]};
}
nodes.nodes=nodes[_rowData.treeCode].nodes;
}else{
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
}else{
nodes[_rowData.treeCode].text=_rowData.name;
nodes[_rowData.treeCode].obj=_rowData;
nodes[_rowData.treeCode].href=_rowData.link;
}
if(nodes[_rowData.treePCode]===undefined){
nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
}
nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
}
}
//去除nodes为空的键
for(var k in nodes){
if(k=='nodes'){
continue;
}
if(nodes[k].nodes.length==0){
delete nodes[k].nodes;
}
}
console.log(nodes.nodes);
}
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var nodes = [
{id:73, pId:0,treeCode:73, treePCode:0, name: "父节点1"},
{id:7301, pId:73,treeCode:7301, treePCode:73, name: "子节点1"},
{id:73011, pId:7301,treeCode:73011, treePCode:7301, name: "子节点1"},
{id:73012, pId:7301, treeCode:73012, treePCode:7301,name: "子节点1"},
{id:7302, pId:73, treeCode:7302, treePCode:73,name: "子节点1"},
{id:73021, pId:7302,treeCode:73021, treePCode:7302, name: "子节点1"},
{id:73022, pId:7302,treeCode:73022, treePCode:7302, name: "子节点1"}
];
window.onload=function(){
console.log(initData(nodes,0))
}
/*
*data为ztree的结构数据 treecode treePcode code为父级节点的code
*/
function initData(data,code){
//第一步：构建两个对象 子对象，与父子关系的对象
var treeData;
for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
var _rowData=data[i];
if(_rowData.treePCode=='0'){
var _pnode=_rowData.treeCode;
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={nodes:[]};
}
nodes.nodes=nodes[_rowData.treeCode].nodes;
}else{
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
}else{
nodes[_rowData.treeCode].text=_rowData.name;
nodes[_rowData.treeCode].obj=_rowData;
nodes[_rowData.treeCode].href=_rowData.link;
}
if(nodes[_rowData.treePCode]===undefined){
nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
}
nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
}
}
//去除nodes为空的键
for(var k in nodes){
if(k=='nodes'){
continue;
}
if(nodes[k].nodes.length==0){
delete nodes[k].nodes;
}
}
return (nodes.nodes);
}
</script>
</body>
</html>
项目延生
js
<script type="text/javascript">
//1、字符串排序的方法（最简单）
var c=$.findCompanyList().paramList.sort(function(a,b){
return (a.id).localeCompare(b.id)
})
$(c).each(function(i,d){//生成公司下拉列表
d.value=d.areaCode;
var nbsp=new Array(Math.ceil(d.areaCode.length/2)).join(' ');
var li=$('<li></li>').appendTo("#rtuList");
li.attr(d).html('<a href="#">'+nbsp+d.name+'</a>');
})
//2、下拉树处理的方法
/*步骤：
1、先将ztree树的数据格式转换成 有父子关系的数组
2、递归遍历数据构建li*/ //处理数据：
var treeRenderData=initTreeData($.findCompanyList().paramList,null);
console.log(treeRenderData);
var listr="";
for(var i=0;i<treeRenderData.length;i++){
var n=treeRenderData[i];
//如果有子集
if(n.nodes instanceof Array){
getbutnodes(n);
}
}
$("#rtuList").html(listr);
//生成公司下拉列表
function getbutnodes(_el){
var el=_el.nodes;
var d=_el.obj;
var nbsp=new Array(Math.ceil(d.areaCode.length/2)).join(' ');
var _d=JSON.stringify(d);
d.value=d.id;
listr+='<li '+_d+'>'+
'<a href="#">'+nbsp+d.name+'</a>'+
'</li>';
if(el==undefined){return ;}
for(var k=0;k<el.length;k++){
getbutnodes(el[k])
}
} function initTreeData(data,code){
var arr=[];
for(var m=0;m<data.length;m++){
data[m].treeCode=data[m].id;
data[m].treePCode=data[m].pId;
if(data[m].pId===null){
arr.push({
href:undefined,
obj:data[m],
text:data[m].name
});
}
}
//第一步：构建两个对象 子对象，与父子关系的对象
var treeData;
for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
var _rowData=data[i];
if(_rowData.treePCode===null){
var _pnode=_rowData.treeCode;
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={nodes:[]};
}
nodes.nodes=nodes[_rowData.treeCode].nodes;
}else{
if(nodes[_rowData.treeCode]===undefined){
nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
}else{
nodes[_rowData.treeCode].text=_rowData.name;
nodes[_rowData.treeCode].obj=_rowData;
nodes[_rowData.treeCode].href=_rowData.link;
}
if(nodes[_rowData.treePCode]===undefined){
nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
}
nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
}
}
//去除nodes为空的键
for(var k in nodes){
if(k=='nodes'){
continue;
}
if(nodes[k].nodes.length==0){
delete nodes[k].nodes;
}
}
if(arr.length>0){
arr[0].nodes=nodes.nodes;
}
return arr;
} </script>
哥版本
<html>
<head>
<title></title>
<script type="text/javascript"> function test(){ var ary = [
{id:1,name:'a',pid:0},
{id:2,name:'a_1',pid:1},
{id:3,name:'a_2',pid:1},
{id:4,name:'b',pid:0},
{id:5,name:'b_1',pid:4},
{id:6,name:'b_1_1',pid:5},
{id:7,name:'a_1_1',pid:2},
]; /*var ary = [
{id:1,name:'a',pid=0,children:[
{id:2,name:'a_1',pid=1,children:[
{id:7,name:'a_1_1',pid=2}
]},
{id:3,name:'a_2',pid=1}
]},
{id:4,name:'b',pid=0,children:[
{id:5,name:'b_1',pid=4,children:[
{id:6,name:'b_1_1',pid=5}
]},
]}
];*/ var newary = [];
var temp1={};
var temp2={};
//1.寻找根节点
for(var i=0;i<ary.length;i++){
if(!temp1[ary[i].id]){
temp1[ary[i].id]='a';
} if(!temp2[ary[i].pid]){
temp2[ary[i].pid]='b';
}
} var temp3={};//存放根结点
for(var p in temp2){
if(!temp1[p]){
//找到一个根结点
temp3[p]='c';
}
} //2.根据根节点的id找到具体元素，并存放到新的数组中
for(var p in temp3){
for(var i = 0;i<ary.length;i++){
if(ary[i].pid == p){
newary.push(ary[i]);
}
}
}
//3.循环查询每个元素的子节点
for(var i=0;i<newary.length;i++){
findChildren(ary, newary[i]);
} console.log(newary);
} function findChildren(ary, item){
var children = [];
for(var i=0;i<ary.length;i++){
if(ary[i].pid == item.id){
findChildren(ary, ary[i]);
children.push(ary[i]);
}
}
if(children.length > 0){
item["children"] = children;
}
} test();
</script>
</head>
<body>
aaaa </body>
</html>
勇的版本（推荐）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>将id pid的转成children格式的</title>
</head>
<body>
<script type="text/javascript">
var nodes = [
{id:73, pId:0,treeCode:73, treePCode:0, name: "父节点1"},
{id:7301, pId:73,treeCode:7301, treePCode:73, name: "子节点1"},
{id:73011, pId:7301,treeCode:73011, treePCode:7301, name: "子节点1"},
{id:73012, pId:7301, treeCode:73012, treePCode:7301,name: "子节点1"},
{id:7302, pId:73, treeCode:7302, treePCode:73,name: "子节点1"},
{id:73021, pId:7302,treeCode:73021, treePCode:7302, name: "子节点1"},
{id:73022, pId:7302,treeCode:73022, treePCode:7302, name: "子节点1"}
];
window.onload=function(){
var mm=listToTree(nodes);
console.log(mm)
} function listToTree(data, options) {
if (data && data.length) {
options = options || {}
let ID_KEY = options.idKey || 'id'
let PARENT_KEY = options.parentKey || 'pId'
let CHILDREN_KEY = options.childrenKey || 'children'
let tree = []
let childrenOf = {}
var item, id, parentId for (var i = 0, length = data.length; i < length; i++) {
item = data[i]
id = item[ID_KEY]
parentId = item[PARENT_KEY] || 0
// 每行数据都可能存在子类
childrenOf[id] = childrenOf[id] || []
// 初始化子类
item[CHILDREN_KEY] = childrenOf[id]
if (parentId != 0) {
// 初始化其父的子节点
childrenOf[parentId] = childrenOf[parentId] || []
// 把它推到父类下的children
childrenOf[parentId].push(item)
} else {
tree.push(item)
}
}
return tree
} else {
return []
}
}
</script>
</body>
</html>
ztree树id、pid转成children格式的(待整理完整)的更多相关文章
- JavaScript将具有父子关系的原始数据格式化成树形结构数据(id,pid)
前几天遇到一个树型组件(类似树形菜单)数据格式化的问题,由于后台把原始查询的数据直接返回给前端,父子关系并未构建,因此需要前端JS来完成,后台返回的数据和下面的测试数据相似. var data=[ { ...
- ztree树默认根据ID默认选中该条数据
functiongetZtree() { varsetting = { view: { expandSpeed: 100, selectedMulti: true, showLine: true, / ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- easyui&8Jquery ztree树插件
7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...
- layui+ztree 树状下拉框
一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> ...
- 通用权限管理系统之权限菜单zTree树的展示及移动的处理方法
在通用权限管理系统中,有很多数据结构是有父子关系的,如组织机构,部门,权限菜单等,在展示的时候,大多数是通过zTree树的形式展现的,如下: 权限菜单展示 这种数据后台输出比较容易处理,参考如下获取某 ...
- JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭
好像没找到现成的,就自己写了一个demo. 效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv= ...
- ZTree id值太大，ZTree没有生成树，ZTree的id值过大
ZTree id值太大,ZTree没有生成树,ZTree的id值过大 >>>>>>>>>>>>>>>> ...
- Jquery插件 之 zTree树加载
原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...
随机推荐
- react 闲谈 之 JSX
jsx元素-> React.createElement -> 虚拟dom对象 -> render方法 1.在react中想将js当作变了引入到jsx中需要使用{} 2.在jsx中,相 ...
- 前端知识点回顾——Javascript篇(一)
DOM特殊元素获取 document.documentElement //HTML标签 document.head //head标签 document.title //title标签 document ...
- centos7 安装 ftp 服务及创建 repo源
安装 ftp 服务 安装和启动服务:# yum install vsftpd# systemctl enable vsftpd# systemctl start vsftpd 配置文件: vi /et ...
- 使用git send-email发送邮件时报错: Unable to initialize SMTP properly怎么处理?
答: 配置~/.gitconfig中的smtpserver 需往~/.gitconfig中添加如下内容: [sendemail] smtpserver = <stmp_server_name ...
- python之NLP词性标注
1.知识点 包括中文和英文的词性标注主要使用的库是nltk和jiaba 2.代码 # coding = utf-8 import nltk from nltk.corpus import stopwo ...
- Jedis的Publish/Subscribe功能的使用
redis内置了发布/订阅功能,可以作为消息机制使用.所以这里主要使用Jedis的Publish/Subscribe功能. 1.使用Spring来配置Jedis连接池 <!-- pool配置 - ...
- OpenCV画图(画OpenCV的标志)
import numpy as np import cv2 img = np.ones((512, 512, 3), np.uint8)*255 # 画椭圆 # 图片 (圆心) (短轴长,长轴长),旋 ...
- React Native细节知识点总结<二>
1.关于React Native导出组件的export default和export的问题: 一个文件只能有一个export default,可以有多个export export class Temp ...
- Linux 操作系统常用命令
常用命令详解 ls 常用选项: -a:列出所有文件,包括以.为开头的隐藏文件. -d ; 列出目录本身,并不包含目录里的内容. -h:和-l一起使用,文件大小容易阅读.文件的实际大小 ls -d/ro ...
- Tool.js（javascript帮助类）
//string.format $.format = function (source, params) { ) return function () { var args = $.makeArray ...