1.先上效果图  (借鉴博客

  

2.这边不做样式的只做结构

function toTreeData(data) {
var pos = {};
var tree = [];
var i = 0;
while (data.length != 0) {
if (data[i].pid == 0) {
tree.push({
id: data[i].id,
text: data[i].text,
children: []
});
pos[data[i].id] = [tree.length - 1];
data.splice(i, 1);
i--;
} else {
var posArr = pos[data[i].pid];
if (posArr != undefined) { var obj = tree[posArr[0]];
for (var j = 1; j < posArr.length; j++) {
obj = obj.children[posArr[j]];
} obj.children.push({
id: data[i].id,
text: data[i].text,
children: []
});
pos[data[i].id] = posArr.concat([obj.children.length - 1]);
data.splice(i, 1);
i--;
}
}
i++;
if (i > data.length - 1) {
i = 0;
}
}
return tree;
}
 var data = [
{
"id": "CU201407140001",
"pid": "0",
"text": "壳牌中国"
},
{
"id": "CU201407140002",
"pid": "CU201407140001",
"text": "壳牌北京分公司"
},
{
"id": "CU201407140003",
"pid": "CU201407140001",
"text": "壳牌上海分公司"
},
{
"id": "CU201407140004",
"pid": "CU201407140001",
"text": "壳牌广州分公司"
},
{
"id": "CU201407140005",
"pid": "CU201407140001",
"text": "壳牌深圳分公司"
},
{
"id": "CU201407140006",
"pid": "CU201407140001",
"text": "壳牌武汉分公司"
},
{
"id": "CU201407140007",
"pid": "CU201407140001",
"text": "壳牌成都分公司"
},
{
"id": "CU201407140008",
"pid": "CU201407140001",
"text": "壳牌海南分公司"
}
];

 

    $(function () {

        $.ajax({
url:hostAddress+'/api/Customer/GetCustomerName?customerid=CU201407140001',
type:'GET',
contentType:'application/json',
beforeSend: function (request) {
request.setRequestHeader('Authorization',token_type+access_token);
},
success:function(data){
var tree = toTreeData(data);
var orag="";
$.each(tree, function (key, value) {
$('#list').empty();
orag += " <li><span>" + value.text + "</span>";
if (value.children!=null)
{
$.each(value.children, function (k, v) {
orag += "<ul> <li><span>" + v.text + "</span></li>";
if (v.children!=null)
{
$.each(v.children, function (kk, vv) {
orag += "<ul> <li><span>" + vv.text + "</span></li>";
});
orag += "</ul>";
}
});
orag += "</ul>";
}
orag += "</li>";
console.log(orag);
$("#list").html(orag); })
} }); })
   function fn(data, pid) {
var result = [], temp;
for (var i in data) {
if (data[i].pid == pid) {
result.push(data[i]);
temp = fn(data, data[i].id);
if (temp.length > 0) {
data[i].children = temp;
}
}
}
return result;
}

  

  

最新文章

  1. Linq To Nhibernate 性能优化(入门级)
  2. Linux 下比较文件内容并相同部分、不同部分
  3. pads 扇出
  4. deep learning
  5. AT&amp;T ASSEMBLY FOR LINUX AND MAC (SYS_FORK)
  6. 利用Chrome插件向指定页面植入js,劫持 XSS
  7. Java源码初学_HashMap
  8. Unity4向上(Unity5)兼容PlayerPrefs的数据存储
  9. verilog中连续性赋值中的延时
  10. IOS开发-UI学习-UIImageView控件
  11. 【WebGL】《WebGL编程指南》读书笔记——第4章
  12. 《CSS世界》读书笔记(十四)
  13. Java基于opencv实现图像数字识别(三)—灰度化和二值化
  14. InfluxDB部署
  15. GitHub贡献第一的公司是谁?微软开源软件列表
  16. python-猜数字小练习
  17. shell之使用paste命令按列拼接多个文件
  18. CF679E Bear and Bad Powers of 42
  19. [转]window下使用SetUnhandledExceptionFilter捕获让程序的崩溃
  20. python队列、线程、进程、协程

热门文章

  1. SVN客户端安装 Linux
  2. jq DataTable
  3. Python笔记23------Python统计列表中的重复项出现的次数的方法
  4. 【LeetCode算法】LeetCode初级算法——字符串
  5. 阿里云服务上面部署redis + 本地Redis客户端连接方法
  6. 了解 object.defineProperty 的基本使用方法(数据双向绑定的底层原理)
  7. BZOJ 3144 [HNOI2013]切糕 (最大流+巧妙的建图)
  8. JavaScript链式编程模拟Jquery函数
  9. mysql 插入更新在一条sql ON DUPLICATE KEY UPDATE
  10. 修改struts2自定义标签的源代码,在原有基础上增加功能(用于OA项目权限判断,是否显示某个权限)