Convert common list data into a tree structure.

Convert common list data into a tree structure.

Recently, the JQuery easyUI control was used in the project. Although it is very powerful, the advanced control has strict requirements on the data format and encounters the following problems:

1. Use the comboTree control to bind the tree structure, but the data format found by the database is in the form of a list, which does not conform to the combotree data structure. Below is a comparison between my data and combotree data.

General Data Structure name

"[{" UnitID ":" 7cf57594a7074c46b94dcd6c985b0ced "," UnitName ":" headquarters "," ParentUnitID ":"-99 "," TreeLevel ": null," id ": "comment", "text": "headquarters" },{ "UnitID": "comment", "UnitName": "third-level store", "ParentUnitID": "0a2254a35212de01da1894801_cdf13 ", "TreeLevel": null, "id": "fc29d1af54c728ccaf78ee15812c3eaa", "text": "Level 3 stores" },{ "UnitID": "Unicom", "UnitName ": "bridge store", "ParentUnitID": "7cf57594a7074c46b94dcd6c985b0ced", "TreeLevel": null, "id": "yellow", "text": "bridge store "}, {"UnitID": "0a2254a35212de01da189480425cdf13", "UnitName": "tangxia store, guoxi town, Ouhai District", "ParentUnitID": "regular", "TreeLevel": null, "id ": "0a2254a35212de01da189480425cdf13", "text": "tangxia store, guoxi town, Ouhai District" },{ "UnitID": "Unicom", "UnitName": "Ouhai Qu Xi store", "ParentUnitID ": "classification", "TreeLevel": null, "id": "dcd82e26bd432300431b0a4c42eb00005", "text": "Ouhai Qu Xi Dian" },{ "UnitID": "classification ", "UnitName": "flower shop before Xinqiao", "ParentUnitID": "yellow", "TreeLevel": null, "id": "eb1_32da7ba345ba43f45d56e598c56", "text ": "Flower shop before Xinqiao" },{ "UnitID": "180f37cb15ec30583715c4f5aefdee3a", "UnitName": "ruantang store", "ParentUnitID": "regular", "TreeLevel": null, "id": "Unicom", "text": "Ruian pond store" },{ "UnitID": "18222e0078bb880ffd969529ad04b7b2", "UnitName": "Ruian Hongqiao ", "ParentUnitID": "primary", "TreeLevel": null, "id": "18222e0078bb880ffd969529ad04b7b2", "text": "Ruian Hongqiao" },{ "UnitID ": "Province", "UnitName": "fudingzhonghui branch", "ParentUnitID": "Province", "TreeLevel": null, "id": "a3f7e62639abcbc3291289d17fed34a1", "text ": "fording zhonghui Plaza store" },{ "UnitID": "Unicom", "UnitName": "Lucheng Wuma Street store", "ParentUnitID": "Unicom", "TreeLevel": null, "id": "Hangzhou", "text": "Lucheng Wuma Street store" },{ "UnitID": "f2ce84effa9967e5d8612092bc7fa7a5", "UnitName": "fuqian street store ", "ParentUnitID": "bytes", "TreeLevel": null, "id": "f2ce84effa9967e5d8612092bc7fa7a5", "text": "fuqian street store" },{ "UnitID ": "region", "UnitName": "liushi 1 store in Yueqing", "ParentUnitID": "region", "TreeLevel": null, "id": "9e4724093526ec481088adfa6ba59b8e ", "text": "liushi 1 store in Yueqing" },{ "UnitID": "d87301409ee36db2d3adaeb68d99ae90", "UnitName": "Xicheng road", "ParentUnitID": "Hangzhou ", "TreeLevel": null, "id": "d87301409ee36db2d3adaeb68d99ae90", "text": "Westland road store" },{ "UnitID": "Unicom", "UnitName ": "longwan yongzhong store", "ParentUnitID": "yellow", "TreeLevel": null, "id": "515adc67314381b4a3ba5415a602daa9", "text": "longwan yongzhong store "}, {"UnitID": "53fe0d947eca5a5ea4e2ff4a42593a9b", "UnitName": "longwan District No. 1 store", "ParentUnitID": "yellow", "TreeLevel": null, "id ": "Hangzhou", "text": "longwan District No. 1 store" },{ "UnitID": "c7afabeba4cb9e6755caa1c8fe261bb1", "UnitName": "Yongjia shangtang store", "ParentUnitID ": "identifier", "TreeLevel": null, "id": "c7afabeba4cb9e6755caa1c8fe261bb1", "text": "Yongjia shangtang store" },{ "UnitID": "identifier ", "UnitName": "Yongjia oubei njiang middle road store", "ParentUnitID": "7cf57594a7074c46b94dcd6c985b0ced", "TreeLevel": null, "id": "comment", "text ": "Yongjia oubei njiang middle road store" },{ "UnitID": "Bei", "UnitName": "Yongjia oubei Puxi street store", "ParentUnitID": "Bei ", "TreeLevel": null, "id": "Shanghai", "text": "Yongjia oubei Puxi street store" },{ "UnitID": "b3c3f0db2314f750139a7b8a0a19c28e", "UnitName ": "Xinqiao store", "ParentUnitID": "Hangzhou", "TreeLevel": null, "id": "b3c3f0db2314f750139a7b8a0a19c28e", "text": "Xinqiao store "}, {"UnitID": "e0d887bd105bf179f185f54a76783e97", "UnitName": "Ankang store", "ParentUnitID": "healthy", "Tree Level": null, "id ": "Hangzhou", "text": "Ankang store" },{ "UnitID": "70df15625b031506dc5282b5ae49e614", "UnitName": "Yueqing liushi 2", "ParentUnitID ": "identifier", "TreeLevel": null, "id": "identifier", "text": "Yueqing liushi 2 Store" },{ "UnitID": "46545a11490cafda35403819ae5a08ea ", "UnitName": "Binhai Lima store", "ParentUnitID": "yellow", "TreeLevel": null, "id": "46545a11490cafda35403819ae5a08ea", "text ": "Binhai Lima store" },{ "UnitID": "Unicom", "UnitName": "South white elephant store", "ParentUnitID": "Beijing", "TreeLevel": null, "id": "yellow", "text": "South white elephant store" },{ "UnitID": "d476d99dad3f8a8d34154cb17898d1ef", "UnitName": "Chushan store", "ParentUnitID ": "Category", "TreeLevel": null, "id": "d476d99dad3f8a8d34154cb17898d1ef", "text": "Chushan store" },{ "UnitID": "category ", "UnitName": "Mei tou Dian", "ParentUnitID": "7cf57594a7074c46b94dcd6c985b0ced", "TreeLevel": null, "id": "Qu", "text ": "Mei tou Dian" },{ "UnitID": "d3cbb3c117814052fde5dc100ea44849", "UnitName": "Taizhou Jiaojiang Dian", "ParentUnitID": "Bei", "TreeLevel": null, "id": "Hangzhou", "text": "Taizhou Jiaojiang store" },{ "UnitID": "000c9b02717fb41a328056e562ad50ab", "UnitName": "Taizhou Luqiao ginza Street store ", "ParentUnitID": "inherit", "TreeLevel": null, "id": "000c9b02717fb41a328056e562ad50ab", "text": "Taizhou Luqiao ginza Street store" },{ "UnitID ": "region", "UnitName": "Taizhou Luqiao Fushi road store", "ParentUnitID": "7cf57594a7074c46b94dcd6c985b0ced", "TreeLevel": null, "id": "region ", "text": "Taizhou Luqiao Fu Shi road store" },{ "UnitID": "6012bfb1900e3618439c6171c163cfaf", "UnitName": "Lucheng shuangyu store", "ParentUnitID": "yellow ", "TreeLevel": null, "id": "6012bfb1900e3618439c6171c163cfaf", "text": "Lucheng shuangyu store"}]"

The data structure that comboTree requires to comply with (this data structure is in dome) is named 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"
}]
}]

The following is the javascript code that converts A to B.

// RootParentIdValue indicates the value of the parent class id of the root node. For example, the organizational structure of a store is-99.
// ParentIdName indicates the node name of the parent class id. For example, ParentUnitID
// NodeIdName indicates the name of the primary key of the list object. For example, the store name is UnitID.
// List of two-dimensional tree structures with listData
Function listToTree (rootParentIdValue, parentIdName, nodeIdName, ListData ){
If (ListData instanceof Array & ListData. length> 0 & ListData [I] [parentIdName]) {
// RootList root node set nodeList subnode set
Var rootList = [], nodeList = [], allChildren = [];
// Separates the root node from the child node set.
$. Each (ListData, function (index, node ){
Node. id = node [nodeIdName]; node. text = node. UnitName; // The id and text must be set because the combotree Binding data is garbled.
If (node [parentIdName] = rootParentIdValue ){
RootList. push (node );
} Else {
NodeList. push (node );
}
});
// Recursively Add the root node set of the child node rootNodeList, // The closure structure of the child node set
Function childrenNodeAdd (rootNodeList, childrenList ){
// Debugger;


If (childrenList. length> 0) {// end recursion if no subnode exists

// Traverse the root node set to find its own child nodes in the child node and add the child nodes corresponding to the root node
$. Each (rootNodeList, function (index, rootNode) {// traverse all subnodes
RootNodeList [index] ["children"] = [];
$. Each (childrenList, function (childrenIndex, childrenNode ){

If (parentIdName in childrenNode & rootNode [nodeIdName] = childrenNode [parentIdName]) {// The parent class id of the child node equals to the node id
RootNodeList [index] ["children"]. push (childrenNode); // Add the corresponding node as a subnode
AllChildren. push (node); // cache all added objects


}
});
Var childrenNodeList = [] // check whether there are any remaining subnodes after the first-level node is added.

// Remaining child nodes of the filter
$. 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); // The remaining sub-nodes continue to recursively execute each recursion once, indicating that the node is increased to a level.
})
}
}
Debugger;
If (nodeList. length> 0 & rootList. length> 0 ){
ChildrenNodeAdd (rootList, nodeList );
Return {isTree: false, Data: rootList, message: "converted "}
} Else if (rootList. length> 0 ){
Return {isTree: false, Data: ListData, message: "No corresponding subnode set "}
} Else {
Return {isTree: false, Data: ListData, message: "No parent class Node Set "}
}


} Else {
Return {isTree: false, Data: ListData, message: "The format is incorrect and cannot be converted "}
}
},

If you are interested in code converted from a tree to a list, you can develop it.

If you have any questions, contact 1015003209

Note that the "undefined" solution is easy to generate when combotree is bound to data in Chinese. The id field name we query is replaced by id, the displayed text uses text. My code is that id replaces UnitID text instead of UnitName. The specific cause and restriction are unknown.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.