首页 > 代码库 > 通用列表数据转化为树形结构
通用列表数据转化为树形结构
近期做项目用的是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 详细原因限制未知。 英文无此类问题。
通用列表数据转化为树形结构