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 实现的多功能 “树插 ...
随机推荐
- 数据库 | Oracle数据库查表空间使用情况
平时在使用Oracle的时候,如果业务中的数据量激增.数据量变大,很有可能就会有表空间不足的情况,需要重点关注.今天我们分享下如何查看表空间的使用情况. 一.如何查看使用状况 我们废话不说,先直接贴上 ...
- 使用git send-email发送邮件时报错: Unable to initialize SMTP properly怎么处理?
答: 配置~/.gitconfig中的smtpserver 需往~/.gitconfig中添加如下内容: [sendemail] smtpserver = <stmp_server_name ...
- redis多实例与主从同步及高级特性(数据过期机制,持久化存储)
redis多实例 创建redis的存储目录 vim /usr/local/redis/conf/redis.conf #修改redis的配置文件 dir /data/redis/ #将存储路径配置修改 ...
- Java端使用Batik将SVG转为PNG
在上篇中,我们需要将Highcharts生成的图通过后台保存到pdf文件中,就需要对SVG进行转换. 这里就介绍一下使用Batik处理SVG代码的方法. 首先是jar包的获取地址,https://xm ...
- 数据包从物理网卡流经 Open vSwitch 进入 OpenStack 云主机的流程
目录 文章目录 目录 前言 数据包从物理网卡进入虚拟机的流程 物理网卡处理 如何将网卡收到的数据写入到内核内存? 中断下半部分软中断处理 数据包在内核态 OvS Bridge(Datapath)中的处 ...
- Ubuntu 安装 docker，并上传到dockerhub
一.安装Docker apt-get -y install docker.io 链接: ln -sf /usr/bin/docker.io /usr/local/bin/docker 检查docker ...
- Hadoop、Hbase —— 服务启动、验证、停止
一.Hadoop 1.启动Hadoop cd /usr/local/hadoop-2.7.3/sbin ./start-dfs.sh 启动过程如下: 2.验证Hadoop是否启动成功 2.1.在主节 ...
- httpd配置Rewrite 301 302
在系统做一些大的.比较耗时的发布的时候,往往需要停服很长时间,这期间有用户访问的话,就需要展示一个升级说明的页面,这个页面放在反向代理服务器中:反向代理服务器如httpd有请求URL重写模块,通过它可 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- Google 搜索语法
1. 逻辑与/或:AND/OR注意 AND.OR 必须大写OR 指令优先于 AND 指令AND 指令一般以space或+代替OR 指令可用 | 代替2. 逻辑非:-3. 完整匹配:" &qu ...