ztree树id、pid转成children格式的(待整理完整)

最新推荐文章于 2022-09-27 11:01:26 发布
最新推荐文章于 2022-09-27 11:01:26 发布
阅读量1.2k 收藏 4
点赞数
文章标签： javascript java c# ViewUI
原文链接：http://www.cnblogs.com/pengfei25/p/11095417.html
版权

 

山铝菜单

因为菜单选用了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('&emsp;');
    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('&emsp;');
    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>
View Code

勇的版本（推荐）

<!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>
View Code

 

转载于:https://www.cnblogs.com/pengfei25/p/11095417.html

dilei8887
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ztree设置权限管理时显示树形菜单
雄安少爷的博客
03-29 8085
在做分配权限模块的时候，遇到了要动态显示树形菜单的情况。查了下都是用Ztree插件做的，但网上好多demo都不能用，今天特意写一篇亲测能用的博客介绍。 建议使用Ztree插件前简单阅读下API文档，链接地址 要显示树形菜单的位置如下图 Ztree的配置参数如下 var setting = { check:{ enable:true
ztree树中的id,pid
yuhoukongshan的博客
08-08 9031
一开始不知道ztree树中的id，Pid是怎么前后台交互的，现在终于知道了 http://www.treejs.cn/v3/api.php
zTree中设置idKey跟pId对象关联
haoqiang12345的博客
09-15 1494
在使用zTree过程中，突然发现他的idkey跟pid必须指定一个单纯的主外键，而不能使用对象解析来绘制树（如：parentModule.id），于是查看了源码,经过改装之后支持了对象关联的遍历，特此做下记录，希望对遇到同样问题的朋友有所帮助。 注意：此种做法针对于ztree3.5版本的。 首先打开ztree的核心源码。jquery.ztree.core-3.5.js找到594行起，修改成如下...
easyui 扩展tree 为 ztree(id, pid)的扁平数据结构集
萧若寒
03-31 6286
实例化。这里增加了三个属性，可以指定idFiled，textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。 $(function(){ $('#tt3').tree({ checkbox: true, url: 'tree_data_simp.php', parentField:"pid", textFiled:"name
ztree树id、pid转成children格式的数据
m0_46693606的博客
09-27 350
【代码】ztree树id、pid转成children格式的数据。
java将xml文件内容与ztree树形结构互转.zip
12-29
用java实现的读取xml文件内容，并转换成ZTree树形结构，也可以将ztree树形结构转换为xml格式保存到文件中，自己创作不易，感谢大家支持，有不对的地方欢迎指出
基于zTree树形菜单的使用实例
08-28
在使用 zTree 之前，需要开启简单数据格式支持，以便 zTree 插件可以正确地解析树形菜单数据。在 JavaScript 中，添加以下代码： ```javascript var setting = { data: { simpleData: { enable: true // 开启简单...
ztree 树 dome
11-05
完整的 jsp ztree 树 dome ，也许对你有帮助，可以看看怎么样。
zTree树插件
11-28
zTree树 树结构 插件 含demo zTree树 树结构 插件 zTree树 树结构 插件
基于Layui和ZTree的树形下拉选择器设计源码
最新发布
04-09
本项目是基于Layui和ZTree的树形下拉选择器设计源码，包含118个文件，其中75个GIF文件，24个JavaScript文件，6个CSS文件。该系统是一个基于layui和ztree的树形下拉选择器，提供了丰富的功能，包括异步加载、点击回调...
zTree树形带JSON
02-09
JSON形式的树形结构 。
json转树状结构（js）
dujunzhi的专栏
05-25 346
/** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父id的字符串 * @param {String} children的字符串 * @return {Array} 数组 */ function transData(a, idStr, pidStr,...
zTree pId Id 'substring'报错 问题
aka_zaozhao的博客
11-26 504
zTree pId Id 'substring’报错 问题 list直接转json后pId/Id 默认为int 需要源码 jq.core.xxxxx.js getNodeCacheId: function (tId) { tId+=&amp;amp;quot;&amp;amp;quot;; return tId.substring(tId.lastIndexOf(&amp;amp;quot;_&amp;amp;quot
java学习-ztree设置某个字段为父id字段
阿泷的学习日志
06-29 2171
var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } } };   设置此处的pIdKey。 或 设置下面的pIdKey。 data : { simpleData : { enable : true, ...
id、pid转树结构children格式处理，支持二级、三级
weixin_47683025的博客
06-24 1003
现在大多数的id、pid数据中，id都是唯一值，都比较好处理。本文介绍的是可兼容id非唯一值的处理方式，同时子级的pid是父级的id。数据示例：目录描述文章目录前言一、支持树结构二级转换（低配版）二、支持树结构二级、三级转换（高配版）总结 二、支持树结构二级、三级转换（高配版） 总结 以上就是今天要讲的内容，现只增加了这一种数据类型的处理方式，后续会补上其他情况的树结构转换。有需求的可留言~...
jquery ztree插件使用 (使用ztree构造节点树)
A_jungle的博客
08-07 446
在页面中引入ztree相关的文件：          &lt;link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"&gt;          &lt;script type="text/javascript" src="../../../js/jquery-1.4.4.m
zTree（一）简单使用
天空影
04-24 1188
沿着上一个需求的工作，因为项目涉及多级组织，并且组织下面有一系列的关联管理，比如终端，而如果要查询终端就得根据组织来查询，这样在展示终端的时候就涉及到了组织的展示。类似这种： 也就是根据左侧组织来展示终端，因为是多级（不限级）组织，所有采用树状图展示，这里就简单的介绍一下基本用法。扩展的话可以看文档：z-tree API文档 定义节点 &amp;lt;ul id=&quot;treeDemo&quot; clas...
zTree树形菜单使用实例
qq_29069777的博客
10-27 251
在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号 第一步：在页面显示菜单位置，添加 ul设置 class=”ztree” 第二步：开启简单数据格式支持 第三步：编写树...
Ztree 的用法
zhibu_8048的博客
01-26 357
js代码 var setting = { view: { showLine: false,//是否显示节点之间的连线 showIcon: true,//是否显示节点的图标 selectedMulti: false,//设置允许选中多个节点 dblClickExpand: false,//双击展开 addDiyDom: addDiyDom//加载addDi
zTree展开树节点
07-28
要展开 zTree 树节点，你可以使用 zTree 提供的方法 `expandNode`。首先，你需要获取到你想展开的树节点的 `zTree` 对象，然后调用 `expandNode` 方法来展开节点。下面是一个示例代码： ```javascript // 获取 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值