通用列表数据转化为树形结构

近期做项目用的是JQuery  easyUI 控件, 尽管非常强大,可是高级控件对于数据的格式要求比較严格遇到 例如以下问题

1.使用comboTree 控件   绑定树形的组织结构   可是 数据库查到的数据格式是 列表形式,并不符合  combotree的数据结构 以下是我的数据和  combotree 数据个对照

通用的数据结构   命名A

"[{"UnitID":"7cf57594a7074c46b94dcd6c985b0ced","UnitName":"总部","ParentUnitID":"-99","TreeLevel":null,"id":"7cf57594a7074c46b94dcd6c985b0ced","text":"总部"},{"UnitID":"fc29d1af54c728ccaf78ee15812c3eaa","UnitName":"三级门店","ParentUnitID":"0a2254a35212de01da189480569cdf13","TreeLevel":null,"id":"fc29d1af54c728ccaf78ee15812c3eaa","text":"三级门店"},{"UnitID":"0da0d3a6a0d899e6d639bfbf25005300","UnitName":"桥下店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"0da0d3a6a0d899e6d639bfbf25005300","text":"桥下店"},{"UnitID":"0a2254a35212de01da189480569cdf13","UnitName":"瓯海区郭溪镇塘下店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"0a2254a35212de01da189480569cdf13","text":"瓯海区郭溪镇塘下店"},{"UnitID":"dcd82e26bd432300431b0a4c42eb4265","UnitName":"瓯海区瞿溪店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"dcd82e26bd432300431b0a4c42eb4265","text":"瓯海区瞿溪店"},{"UnitID":"eb48732da7ba345ba43f45d56e598c56","UnitName":"新桥前花店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"eb48732da7ba345ba43f45d56e598c56","text":"新桥前花店"},{"UnitID":"180f37cb15ec30583715c4f5aefdee3a","UnitName":"瑞安塘下店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"180f37cb15ec30583715c4f5aefdee3a","text":"瑞安塘下店"},{"UnitID":"18222e0078bb880ffd969529ad04b7b2","UnitName":"瑞安虹桥","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"18222e0078bb880ffd969529ad04b7b2","text":"瑞安虹桥"},{"UnitID":"a3f7e62639abcbc3291289d17fed34a1","UnitName":"福鼎中汇广场店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"a3f7e62639abcbc3291289d17fed34a1","text":"福鼎中汇广场店"},{"UnitID":"7cfff1d71a4dc31fcfc9b9727248eb7e","UnitName":"鹿城区五马街店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"7cfff1d71a4dc31fcfc9b9727248eb7e","text":"鹿城区五马街店"},{"UnitID":"f2ce84effa9967e5d8612092bc7fa7a5","UnitName":"府前街店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"f2ce84effa9967e5d8612092bc7fa7a5","text":"府前街店"},{"UnitID":"9e4724093526ec481088adfa6ba59b8e","UnitName":"乐清市柳市1店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"9e4724093526ec481088adfa6ba59b8e","text":"乐清市柳市1店"},{"UnitID":"d87301409ee36db2d3adaeb68d99ae90","UnitName":"西城路店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"d87301409ee36db2d3adaeb68d99ae90","text":"西城路店"},{"UnitID":"515adc67314381b4a3ba5415a602daa9","UnitName":"龙湾区永中店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"515adc67314381b4a3ba5415a602daa9","text":"龙湾区永中店"},{"UnitID":"53fe0d947eca5a5ea4e2ff4a43093a9b","UnitName":"龙湾区状元店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"53fe0d947eca5a5ea4e2ff4a43093a9b","text":"龙湾区状元店"},{"UnitID":"c7afabeba4cb9e6755caa1c8fe261bb1","UnitName":"永嘉县上塘店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"c7afabeba4cb9e6755caa1c8fe261bb1","text":"永嘉县上塘店"},{"UnitID":"9b9c9d030a8853c3c5598c562d0ccc88","UnitName":"永嘉县瓯北楠江中路店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"9b9c9d030a8853c3c5598c562d0ccc88","text":"永嘉县瓯北楠江中路店"},{"UnitID":"195a6664931ecaa6ceb12ca42550f92d","UnitName":"永嘉县瓯北浦西街店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"195a6664931ecaa6ceb12ca42550f92d","text":"永嘉县瓯北浦西街店"},{"UnitID":"b3c3f0db2314f750139a7b8a0a19c28e","UnitName":"新桥店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"b3c3f0db2314f750139a7b8a0a19c28e","text":"新桥店"},{"UnitID":"e0d887bd105bf179f185f54a76783e97","UnitName":"安康店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"e0d887bd105bf179f185f54a76783e97","text":"安康店"},{"UnitID":"70df15625b031506dc5282b5ae49e614","UnitName":"乐清市柳市2店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"70df15625b031506dc5282b5ae49e614","text":"乐清市柳市2店"},{"UnitID":"46545a11490cafda35403819ae5a08ea","UnitName":"滨海利玛店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"46545a11490cafda35403819ae5a08ea","text":"滨海利玛店"},{"UnitID":"cdaef299c8dca8f56359d36ea5d2869a","UnitName":"南白象店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"cdaef299c8dca8f56359d36ea5d2869a","text":"南白象店"},{"UnitID":"d476d99dad3f8a8d34154cb17898d1ef","UnitName":"茶山店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"d476d99dad3f8a8d34154cb17898d1ef","text":"茶山店"},{"UnitID":"79598a8a8d86c32df23c21e4bc50692b","UnitName":"梅头店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"79598a8a8d86c32df23c21e4bc50692b","text":"梅头店"},{"UnitID":"d3cbb3c117814052fde5dc100ea44849","UnitName":"台州市椒江店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"d3cbb3c117814052fde5dc100ea44849","text":"台州市椒江店"},{"UnitID":"000c9b02717fb41a328056e562ad50ab","UnitName":"台州市路桥银座街店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"000c9b02717fb41a328056e562ad50ab","text":"台州市路桥银座街店"},{"UnitID":"7b0f03f7a6c139a2b50da0eadccb4df2","UnitName":"台州市路桥富仕路店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"7b0f03f7a6c139a2b50da0eadccb4df2","text":"台州市路桥富仕路店"},{"UnitID":"6012bfb1900e3618439c6171c163cfaf","UnitName":"鹿城区双屿店","ParentUnitID":"7cf57594a7074c46b94dcd6c985b0ced","TreeLevel":null,"id":"6012bfb1900e3618439c6171c163cfaf","text":"鹿城区双屿店"}]"

comboTree 要求符合的数据结构(这个数据结构是dome中的) 命名B

[{

"tid":1,

"text":"My Documents",

"children":[{

"tid":11,

"text":"Photos",

"state":"closed",

"children":[{

"tid":111,

"text":"Friend"

},{

"tid":112,

"text":"Wife"

},{

"tid":113,

"text":"Company"

}]

},{

"tid":12,

"text":"Program Files",

"children":[{

"tid":121,

"text":"Intel"

},{

"tid":122,

"text":"Java",

"attributes":{

"p1":"Custom Attribute1",

"p2":"Custom Attribute2"

}

},{

"tid":123,

"text":"Microsoft Office"

},{

"tid":124,

"text":"Games",

"checked":true

}]

},{

"tid":13,

"text":"index.html"

},{

"tid":14,

"text":"about.html"

},{

"tid":15,

"text":"welcome.html"

}]

}]

以下是将A转化为B的javascript 代码

//rootParentIdValue      表示根节点的父类id 值是多少 如门店组织结构为-99

//parentIdName    表示父类id的节点名称是什么    如门店组织结构的名称  ParentUnitID

//nodeIdName    表示列表对象主键的名称  如门店是UnitID

// listData 为二维的树形结构列表

function listToTree(rootParentIdValue,parentIdName,nodeIdName,ListData){

if(ListData instanceof Array&&ListData.length>0&&ListData[i][parentIdName]){

//rootList 根节点集合  nodeList 子节点集合

var rootList=[], nodeList=[],allChildren=[];

// 分离出 根节点和子节点集合

$.each(ListData,function(index,node){

node.id=node[nodeIdName];node.text=node.UnitName;//id  和text为 必须设置由于我遇到的问题是combotree绑定数据显示乱码

if(node[parentIdName]==rootParentIdValue){

rootList.push(node);

}else{

nodeList.push(node);

}

});

//递归添加子节点 rootNodeList根节点集合。 //子节点集合  闭包结构

function childrenNodeAdd(rootNodeList,childrenList){

//debugger;

if(childrenList.length>0){  //  假设没有子节点了结束递归

//遍历根节点集合在 子节点中查找其自身的子节点并加入根节点相应的子节点

$.each(rootNodeList,function(index,rootNode){ //遍历全部子节点

rootNodeList[index]["children"]=[];

$.each(childrenList,function(childrenIndex,childrenNode){

if(parentIdName in childrenNode&&rootNode[nodeIdName]==childrenNode[parentIdName]){     //跟节点的id 等于子节点的父类id

rootNodeList[index]["children"].push(childrenNode); //加入相应节点归为子节点

allChildren.push(node);// 缓存全部已经加入过的对象

}

});

var childrenNodeList=[] //一级节点加入完以后看是否还有剩余的子节点

//筛选器剩余的子节点

$.each(childrenList,function(childrenIndex,childrenNode) {

var  isAdd=true

$.each(allChildren,function(index,node) {

if(node==childrenNode){

isAdd=false

}

});

if(isAdd){

childrenNodeList.push(childrenNode);

}

});

childrenNodeAdd(rootNodeList[index]["children"],childrenNodeList);//剩余子节点继续递归运行 每次递归一次就表示节点添加一级。

})

}

}

debugger;

if(nodeList.length>0&&rootList.length>0){

childrenNodeAdd(rootList,nodeList);

return {isTree:false,Data:rootList,message:"转化完毕"}

}else if(rootList.length>0){

return {isTree:false,Data:ListData,message:"没有相应的子节点集合"}

}else{

return {isTree:false,Data:ListData,message:"没有相应的父类节点集合"}

}

}else{

return {isTree:false,Data:ListData,message:"格式不对,无法转换"}

}

},

树形转化为列表的代码有兴趣的人能够开发一下。

假设有问题请联系1015003209

注意combotree  绑定数据中文easy产生undefined  解决方式就是将   我们查询出来的id字段名称    用id 取代。显示的文字用text  我的代码就是  id取代了UnitID text取代了UnitName  详细原因限制未知。 英文无此类问题。

时间: 2024-08-09 19:52:26

通用列表数据转化为树形结构的相关文章

将xml的数据写入swing树形结构

先简单的粘贴下代码,正在学习java的东西,正好用到swing,算是做个练习.API太多,还没有梳理太清楚,慢慢回顾. public class TreeFrame extends JFrame { public static final int WIDTH = 1100; public static final int HEIGHT = 615; private static int xlocation ,ylocation; private boolean xmlFlag = false;

Delphi中根据分类数据生成树形结构的最优方法

一. 引言:    TreeView控件适合于表示具有多层次关系的数据.它以简洁的界面,表现形式清晰.形象,操作简单而深受用户喜爱.而且用它可以实现ListView.ListBox所无法实现的很多功能,因而受到广大程序员的青睐.    树形结构在Windows环境中被普遍应用,但在数据库开发中面对层次多.结构复杂的数据,如何快速构造树形目录并实现导航呢?    二. 实现关键技术:    在Delphi提供的控件中包含了TreeView控件,但树的具体形成还需要用户编写代码.即它的列表项要在程序

递归、嵌套for循环、map集合方式实现树形结构菜单列表查询

有时候, 我们需要用到菜单列表,但是怎么样去实现一个菜单列表的编写呢,这是一重要的问题. 比如我们需要编写一个树形结构的菜单,那么我们可以使用JQuery的zTree插件:http://www.treejs.cn/v3/main.php#_zTreeInfo 例如现在需要编写一个这样的菜单列表.那么就可以使用JQuery的zTree插件. 先看一下数据库表结构. CREATE TABLE `permission` ( `id` int(11) NOT NULL AUTO_INCREMENT, `

android多层树形结构列表学习笔记

android中既有组件只有 expandlistview来实现二级的分级目录,但是如果是任意级的分级目录呢?今天看到了一个DEMO,学习一下~ 一.filebean类 simpleadapter的数据源的数据单元(需转化为nodes),包含以下三个属性和构造函数 private int _id; private int parentId; private String name; private long length; public FileBean(int _id, int parentI

关于html嵌入xml数据岛如何穿过树形结构关系的问题

作者: 字体:[增加 减小] 类型:转载 html里面引用xml的数据岛,如何穿过树形结构的关系,我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素 如下面的代码细节,html里面引用xml的数据岛,如何穿过树形结构的关系? 我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素?同时我的html文件应该如何修改呢? read.qidian.com/BookReader/144

SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据(树形导航)的webpart开发及问题

SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据(树形导航)的webpart开发及问题 分类: SharePoint2012-01-16 14:24 1295人阅读 评论(1) 收藏 举报 sharepoint2010queryurllistborder SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据(树形导航)的webpart开发及问题 1.实现效果如下: 点击各个节点进入相应的链接 2.测试列表: 3.

Silverlight项目笔记7:xml/json数据解析、MVVM下实现多级树形结构TreeView、忽视引用类型导致数据绑定错误、通过流或动态空间加载图片、虚拟目录设置、silverlight安全机制引发的问题、WebClient缓存问题

涉及的内容主要有: 1.xml/json数据解析 2.多级树形结构TreeView 3.忽视引用类型导致数据绑定错误 4.通过流或动态空间加载图片 5.虚拟目录设置 6.silverlight安全机制引发的问题 7.webclient缓存问题 1.xml/json数据解析 (1)xml数据解析 使用WebClient获取数据,获取到的数据实例化为一个XDocument,使用XDocument的Descendants(XName)方法获得对应节点的数据集合,再通过Element这个方法对数据集合进

Atitit.各种 数据类型 ( 树形结构,表形数据 ) 的结构与存储数据库 attilax 总结

Atitit.各种  数据类型 ( 树形结构,表形数据  ) 的结构与存储数据库 attilax  总结 1. 数据结构( 树形结构,表形数据,对象结构 ) 1 2. 编程语言中对应的数据结构 java c# php ( Dic/Map      List    datatable ) 1 3. 数据库存储数据  1 4. 数据的表形显示( 多条记录 与单条记录 ) 2 5. ASP.NET 数据控件:GridView,DataList,Repeater ,DetailsView,FormVie

CSS实现树形结构 + js加载数据

看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: ul,li { list-style-type: none } .tree { display: block; position: relative; padding: 5px 15px } .tree span { display: inline-block; height: 30px; line-height: 28px; min-width: 60px; text-align: cente