四丶生成完整列表加后台管理页面方法解读及调用
首先需要导入两1个js包，并自己打好树状图位置（tree）和反应位置（Book）和后台位置（Book[1]），布置好CSS
<script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>
调用方法解析如下：
/*
开始方法一，用来生成树和后台管理页面
arr {arr} 要解析的json arr对象
bookfun {function} 点击事件
dateDeleteFun {function} date的删除方法
dateUpdateFun {function} date的修改方法
dateInsertFun {function} date的添加方法
tree {object} 右侧要插入后台li的地方
directory {object} 要插入后台li的地方
list {object} 左侧放添加标签的的地方
listimg {String} 后台页面的img
deteimg {String} 是否启用删除标签的图片
upimg {String} 是否启用修改标签的图片
*/
U.MD.UI.BTree = function (arr, bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, tree, directory, list, listimg, deteimg, upimg) {
U.MD.UI.BTree.jsonStartLeft(arr, tree[0], bookfun); //调用方法，生成树状图
U.MD.UI.BTree.jsonStartRight(tree[1], bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, directory, list, listimg, deteimg, upimg); //调用方法，生成管理页面
}
调用方法生成示例步骤如下：
U.UF.DL.asynLoadJs({src:"http://www.1473.cn/js/Controls/Complex/BTree.js","charset": "utf-8", "type": "text/javascript"},function(){//动态加载js
var json=[]; //创建一个空的二维数组json
var mulu=$(".mulu"); //获取mulu对象
var tree = $(".tree"); //获取树状图的插入位置
var book = $(".Book"); //获取效果和管理页面对象
var directory = $(".directory"); //获取插入目录的位置
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree',"Select_all"]),function(r){ //从数据库获取数据的方法，r.value为获取到的数组
var iii=U.MD.UI.BTree.createID(r.value)+1;
tree[0].innerHTML=""; //清空tree的内容
U.MD.UI.BTree(r.value,
function(li){
if(li.yid==1){
book[0].style.display="none";
book[1].style.display="block";
}else{
book[0].innerHTML=li.childNodes[1].innerHTML+"内容";
book[1].style.display="none";
book[0].style.display="block";
}
},
function(pid){
var _r=confirm("确定删除吗？");
if(_r){
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree'
,"Delete_ID",pid]),function(r){
});
return true;
}
},
function(upjson){
var name = prompt("请输入修改的目录名");
if( name != ""){
if( name != null){
upjson.name=name;
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree','Update_ID'
,upjson.id,name]),function(r){
console.log(r);
});
return upjson;
}
}
},
function(addjson){
var addimg ="http://api.1473.cn/Uform/Image/tree/folder.png";
var addname = prompt("请输入新目录的名字");
if(addname != ""){
if(addname != null){
addjson.img_url=addimg;
addjson.name=addname;
addjson.id=iii;
iii++;
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn',
'UseStudio_Tree',"Insert_Tree",addjson.id,addjson.parentID,addjson.name,addjson.deep,addjson.img_url]),
function(r){
});
return addjson;
}
}
},tree,directory,mulu
,"http://hs.1473.cn/icon/99590b18-a84f-4df5-a941-74ae61f49832.png"
,true,true
); //调用方法，生成树状图
});
});
范例html部分代码：
<div id="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="Book"></div>
<div class="Book" style="display:none">
<!-- 左侧代表点击管理页面后反应的页面 -->
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<div class="title">一级目录</div>
<div class="directory"></div>
<!-- 代表左侧添加目录的地方 -->
</div>
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<div class="title">二级目录</div>
<div class="directory"></div>
<!-- 代表左侧添加目录的地方 -->
</div>
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<div class="title>三级目录</div>
<div class="directory"></div>
</div>
</div>