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 实现的多功能 “树插 ...
随机推荐
- pytorch-LeNet网络
LeNet网络的结构 输入的32x32x1的单通道图片, 第一层网络: 3x3x1x6的卷积层,步长为1, padding = 1, 经过2x2的池化操作 第二层网络: 5x5x6x16的卷积层, 步 ...
- 性能测试 | Linux系统top命令中的io使用率，很多人都误解了它的具体含义
body{ text-align:left; width:80%; margin:10px 100px; } 最近在做连续数据流的缓冲系统,C语言代码实现后,粗略测试了下,功能上应该没有问题.那么,接 ...
- 生成 XML 文档时出错。
找来找去,在CSDN 里看到高手解答了. 原来 WebService 传递参数时,不能使用 DataTable 如果需要使用DataTable 那就要用 DataSet 包装起来. 如果担心数据太 ...
- 一百二十五：CMS系统之首页轮播实现
把base模板分为左右两块版心 .main-container{ /*整体版心*/ width: 990px; margin: 0 auto; overflow: hidden;}.lg-contai ...
- openstack核心组件--horizon web管理界面（5）
一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 ...
- Delphi ActionList详解
一个友好的用户界面,必须具有下拉菜单,弹出菜单,工具条和快捷键.同样一个功能,程序员可能要提供几种操作方式,如文本拷贝,菜单命令&Copy,快捷键Ctrl+C,工具条上的拷贝按钮,都是程序员提 ...
- window server2012R2激活
slmgr /ipk D2N9P-3P6X9-2R39C-7RTCD-MDVJXslmgr /skms kms.03k.orgslmgr /ato
- spring-boot结合maven配置不同环境的profile
1.在spring-boot中新建配置文件 spring-boot不同环境配置文件格式为application-{profile}.yml 说明: 如果application.yml中的配置和appl ...
- loadrunner脚本因为没有token报错
目录 场景 解决过程 解决方案 总结 场景 用loadrunner11录制脚本,处理后回放,加上检查点,报错找不到检查点对应的内容,去掉检查点,没有报错,但是打开页面没有该操作的痕迹.手动在页面上操作 ...
- IO模型，非阻塞IO模型，select实现多路复用
1. IO阻塞模型 IO问题: 输入输出 我要一个用户名用来执行登陆操作,问题用户名需要用户输入,输入需要耗时, 如果输入没有完成,后续逻辑无法继续,所以默认的处理方式就是 等 将当前进程阻塞住,切换 ...