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 实现的多功能 “树插 ...
随机推荐
- 一个简易的PHP读取CSV文件的方法
1. 思路:先打开文件,读取出文件有多少行,然后逐行读取数据放入一个数组中 public function read_csv_lines($csv_file = '', $lines = 0, $of ...
- Android中图片优化
1.对图片进行压缩:建议使用TinyPNG工具压缩 2.WebP格式(支持4.0以上)可减少文件大小 3.尽量使用NinePatch的PNG 4.图片缓存
- Android数据存储的方式
1. 内部存储 * 路径: /data/data/包名/ * cache用于存储临时文件,系统内存不足时,清除缓存数据 * files用于存储重要的文件,要用户手动在应用程序列表清 ...
- CentOS7安装后无法使用鼠标选中
运行命令:yum install gpm* 安装gpm 启动gpm服务:service gpm start 运行systemctl enable gpm.servicere 添加到后台服务. 备注: ...
- kafka入门学习---1 启动kakfa
1.查看kafka生产者产生的数据 kafka-console-consumer.sh --zookeeper hadoop-:,hadoop-:,hadoop-: -topic kafkademo ...
- lumen添加中间件实现cookie自动加密解密
在项目根路径下执行命令:安装illuminate/cookie包 1.composer require illuminate/cookie 2.找到同版本的laravel下的\vendor\larav ...
- maria 忘记密码
1.找到mariadb配置文件命令:find / -name my.cnf 备注:一般是在 /etc/my.cnf 2.修改配置文件 在MariaDB配置文件/etc/my.cnf的[mysqld]配 ...
- LeetCode.1160-找到可以由给定字符组成的字符串(Find Words That Can Be Formed by Characters)
这是小川的第411次更新,第443篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第262题(顺位题号是1160).你会得到一个字符串单词数组和一个字符串chars.如果字符串可 ...
- 齐治堡垒机ShtermClient-2.1.1命令执行漏洞（CNVD-2019-09593）分析
一.基本信息 参考:https://www.cnvd.org.cn/flaw/show/1559039 补丁信息:该漏洞的修复补丁已于2019年4月1日发布.如果客户尚未修复该补丁,可联系齐治科技的技 ...
- table中td内容过长自动换行
table { table-layout:fixed; WORD-BREAK:break-all;}