最近做項目用的是JQuery easyUI 控件， 雖然很強大，但是進階控件對于資料的格式要求比較嚴格遇到 如下問題
1.使用comboTree 控件 綁定樹形的組織結構 但是 資料庫查到的資料格式是 清單形式，并不符合 combotree的資料結構 下面是我的資料和 combotree 資料個對比
通用的資料結構 命名A json 資料格式
"[{"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 綁定資料中文容易産生undefined 解決方案就是将 我們查詢出來的id字段名稱 用id 代替，顯示的文字用text 我的代碼就是 id代替了UnitID text代替了UnitName 具體原因限制未知， 英文無此類問題。
![jquery easyui 中combogrid , datagrid 自定義分頁[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)