前言
因为项目的机会,使用到了Bootstrap Treeview的JavaScript组件.但是他要求的数据格式并不是简单的key/value形式.所以存在数据组织的问题,要么通过后端根据数据库查询出的数据进行重组,要么在前端对数据库返回数据进行重组.。
组织方式
对现在有效简单的数据组织方式做一次分享:
- 后端重组 (随后回贴出Java代码示例);
- SQL查询父子结构 博客里有文章写到了
- 前端重组 :
function getTreeData(list) {
var item,result = [];
//遍历根节点,递归处理其所有子节点的数据
//每处理完一个根节点,就将其及其所有子节点从list中删除,加快递归速度
while (list.length) {
item = list[0];
list.splice(0, 1);
delete item.yhlxpid;
getAllNodes(list, item);
item.text = item.yhlxtitle;
result.push(item);
}
return result;
}
function getAllNodes(list, item) {
var nodes = getNextLevelNodes(list, item);
for (var i = 0, ii = nodes.length; i < ii; i++) {
getAllNodes(list, nodes[i]);
}
}
function getNextLevelNodes(list, item) {
var nodes = [];
for (var i = 0; i < list.length; i++) {
var mid = list[i];
if (mid.yhlxpid === item.yhlxid) {
delete mid.yhlxpid;
mid.text = mid.yhlxtitle;
nodes.push(mid);
list.splice(i, 1);
i--;
}
}
if (nodes.length > 0) {
item.nodes = nodes;
}
return nodes;
}