本文共 3216 字，大约阅读时间需要 10 分钟。

var cate = {"cate":[{"id":"1","name":"景点景区","parent":"1"},{"id":"2","name":"星级饭店","parent":"2"},{"id":"3","name":"旅行社","parent":"3"},{"id":"4","name":"重点区域","parent":"4"},{"id":"5","name":"某景点","parent":"1"},{"id":"6","name":"慕田峪长城","parent":"1"},{"id":"7","name":"1星级饭店","parent":"2"},{"id":"8","name":"2星级饭店","parent":"2"},{"id":"9","name":"1星级饭店子类","parent":"7"},{"id":"10","name":"重点区域子类","parent":"4"},{"id":"11","name":"1星级饭店子类2","parent":"7","isEnd":true},{"id":"12","name":"1星级饭店子类的子类","parent":"9","isEnd":true}]};
var cates = cate.cate;

innerHtml = "<ul>";
//汇总根
function setContent(content) {
for(var i = 0; i < content.length; i++) {
if(content[i].parent == content[i].id) {
if(content[i].isEnd == true) {
//获取数据
innerHtml += "<li οnclick='getData();'>" + content[i].name + "</li>";
} else {
//伸展合拢
innerHtml += "<li οnclick='sss(this);'>" + content[i].name + "</li>";
}
setContentSub(content, i);
}
}
innerHtml += "</ul>";
document.write(innerHtml);
}
//汇总子集
function setContentSub(content,index) {
var tag = 0;
for(var j = 0; j < content.length; j++) {
if(content[j].parent != content[j].id && content[j].parent == content[index].id) {
tag++;
if(tag == 1) {
innerHtml += "<ul>";
if(content[j].isEnd == true) {
//获取数据
innerHtml += "<li οnclick='getData();'>" + content[j].name + "</li>";
} else {
//伸展合拢
innerHtml += "<li οnclick='sss();'>" + content[j].name + "</li>";
}
setContentSub(content, j);
} else {
if(content[j].isEnd == true) {
alert(content[j].name);
//获取数据
innerHtml += "<li οnclick='getData();'>" + content[j].name + "</li>";
} else {
//伸展合拢
innerHtml += "<li οnclick='sss();'>" + content[j].name + "</li>";
}
setContentSub(content, j);
}
}
}
if(tag > 0) {
innerHtml += "</ul>";
tag = 0;
}
}
setContent(cates);

function sss(obj) {
$(obj).siblings().toggle('slow');
}
function getData() {
alert('data');
}

//这种方式写的树状结构没有固定皮肤，需要自己加工
//而jquery插件dhtmlXTreeObjec有一套自己的皮肤，使用起来很方便，但是再用使用这个插件的时候要先准备好符合格式的数据
//var jsonClass = {id:0,item:[{id:'1',text:'景点景区',item:[{id:'5',text:'某景点'},{id:'6',text:'慕田峪长城'}]},{id:'2',text:'星级饭店',item:[{id:'7',text:'1星级饭店',item:[{id:'9',text:'1星级饭店子类',item:[{id:'12',text:'1星级饭店子类的子类'}]},{id:'11',text:'1星级饭店子类2'}]},{id:'8',text:'2星级饭店'}]},{id:'3',text:'旅行社'},{id:'4',text:'重点区域',item:[{id:'10',text:'重点区域子类'}]}]};

//转换方法

var xmlTree = "{id:0,item:[";
//汇总根类
function setContent(content) {
var tagA = 0;
for(var i = 0; i < content.length; i++) {
if(content[i].parent == content[i].id) {
tagA++;
if(tagA == 1) {
xmlTree += "{id:'" + content[i].id + "',text:'" + content[i].name + "'";
} else {
xmlTree += ",{id:'" + content[i].id + "',text:'" + content[i].name + "'";
}
setContentSub(content,i);
}

}
xmlTree += "]}";
//这个可以用return代替返回获取内容
document.write(xmlTree);
}
//汇总子集
function setContentSub(content,index) {
var tagB = 0;
for(var j = 0; j < content.length; j ++) {
if(content[j].parent != content[j].id && content[j].parent == content[index].id) {
tagB++;
if(tagB == 1) {
xmlTree += ",item:[";
xmlTree += "{id:'" + content[j].id + "',text:'" + content[j].name + "'";
} else {
xmlTree += ",{id:'" + content[j].id + "',text:'" + content[j].name + "'";
}
setContentSub(content,j);
}
}
if(tagB > 0) {
xmlTree += "]}";
} else {
xmlTree += "}";
}
}

setContent(cates);