二丶列表生成方法解读及调用
首先需要导入1个js包，并自己打好树状图位置（tree）和反应位置（Book），布置好CSS
<script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>
1丶json转化为列表的方法
/*
将二维数组转化为列表的方法
json {arr} 数据源json里面需要包含id，name，deep（依赖），img_url（显示图片源），child（附属目录），外部是数组
tree {object} 要插入列表的地方
bookfun {function} 每一行目录的点击事件
*/
U.MD.UI.BTree.treeCreate = function (json, tree, onclickfun) {
for (var _i = 0; _i < json.length; _i++) { //创建循环，解析json数组，得到每一个json
var _ul = $$("ul", { className: "U_MD_UI_Tree_a " + json[_i].parentID }, tree); //创建var对象，在tree中创建ul
var _li = $$("li", { id: json[_i].id, parentid: json[_i].parentid, className: "U_MD_UI_Tree_listyle", parentid: json[_i].id, deep: json[_i].deep }, _ul); //创建var对象，在ul中创建li，id为a+jsonid
var _img = $$("img", { src: json[_i].img_url, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建var对象，在li中创建img
var _span = $$("span", { innerHTML: json[_i].name, className: "spanstyle" }, _li); //创建var对象，在li中创建span，内容为json的name
_ul.style.display="none";
if (json[_i].deep == "1") { _ul.style.display = "block" } //进行判断，判断是否为一级目录，不是的先隐藏
_img.aa = false; //定义img的一个变量，用来控制列表的展开和关闭
var _liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + json[_i].parentID)[0]; //定义一个let对象为获取到的对应的li对象
_ul.style.display=_liobj.style.display;//如果是展开状态，显示ul
_li.onclick = function () {//定义li的点击事件
onclickfun(this); //执行bookconlick函数，改变book对象的内容
_liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + this.parentid);
if (_img.aa === true) { //如果img.aa等于true
_img.aa = false; //修改img.aa对象为false
for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环，循环对象为获取到的li对象集合
_liobj[_ii].style.display = "none"; //将集合隐藏
}
} else { //如果img.aa等于false
_img.aa = true; //修改img.aa等于true
for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环，循环对象为获取到的li对象集合
_liobj[_ii].style.display = "block"; //将集合显示
}
}
}
if(json[_i].child){
U.MD.UI.BTree.treeCreate(json[_i].child, _ul, onclickfun); //重新调用函数
}
}
}
注释：id代表各个列的id,parentID代表各个列的依附id（第一列为0）,name代表名字,img_url代表显示图片,deep代表列的深度
2丶往json中添加数据的方法
/*
在json中插入json的方法
json {arr} 要被插入的json对象
addjson {json} 要查入的json对象
*/
U.MD.UI.BTree.jsonAdd = function (json, addjson) {
var _addid = addjson.parentID; //定义要目的地id，等于插入json的parentID值
if (_addid == "0") { //进行判断，判断目的地id是否在第一层（0）
json[json.length] = addjson; //如果在，直接在json的第一层中加入要插入的json
return json; //结束方法，返回json对象
}
for (var _i = 0; _i < json.length; _i++) { //创建循环，解析json数组，得到每一个json
if (json[_i].id == _addid) { //进行判断，判断json的id是否等于获取到的目的地id，如果是
if (json[_i].child) { //进行判断，判断json的child有没有值
json[_i].child[json[_i].child.length] = addjson; //如果有，就在其中添加插入对象
return json; //结束方法，返回json对象
} else {//如果json中没有child
json[_i].child = [];
json[_i].child[json[_i].child.length] = addjson; //将json的child等于插入的对象
return json; //结束方法，返回json对象
}
}
if (json[_i].child) { //如果json的id不与目的地id相等且json中存在child
var _return = U.MD.UI.BTree.jsonAdd(json[_i].child, addjson); //定义函数，调用自己，变量为json的child，要插入的json
json[_i].child = _return; //json的child等于返回的json
}
}
return json; //返回json对象
}
3丶将数据库返回数生成json并创建左侧树状图的方法
/*
生成左边树状图的方法
arr {arr} 要处理的arrjson对象
tree {object} 要插入树状图的地方
bookfun {function} 点击事件
*/
U.MD.UI.BTree.jsonStartLeft = function (r, tree, bookfun) {
json = []; //将外变量josn清空
var _json = arr; //定义局部变量_json，值为r
for (var _i = 0; _i < _json.length; _i++) { //定义循环，循环对象为
U.MD.UI.BTree.jsonAdd(json, _json[_i]); //运行函数，生成json
}
tree.innerHTML = ""; //清空tree的内容
U.MD.UI.BTree.treeCreate(json, tree, bookfun); //运行方法，在tree中生成树状图
}
调用方法生成目录示例步骤如下：
U.UF.DL.asynLoadJs({src:"http://www.1473.cn/js/Controls/Complex/BTree.js","charset": "utf-8", "type": "text/javascript"},function(){
var json =[];//定义总json
var tree = $("#tree")[0];//获取插入tree的地方
var book = $(".Book");//获取反应页面
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree',"Select_all"]),function(r){
U.MD.UI.BTree.jsonStartLeft(r.value,tree,function(li){
book[0].innerHTML=li.childNodes[1].innerHTML+"下的内容";
book[0].style.display="block";
});//调用方法，生成tree
});
});
注释： 第一层数据deep必须是1且依附于"0"
范例html部分代码：
<div id="tree"></div>
<div class="Book"></div>
下载范例：
后台树范例下载
工作人员
作者：周琳恒
信息录入:周琳恒