三丶生成后台管理页面方法解读及调用
首先需要导入1个js包，并自己打好树状图位置（tree）和反应位置（Book）和后台位置（Book[1]），布置好CSS
<script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>
1丶创建查询管理目录的方法
/*
创建查询管理目录的方法
json {arr} 要解析的json arr对象
tree {object} 左侧要插入后台li的地方
mulu {object} 左侧放添加标签的的地方
jsonpid {String} 添加标签的深度
jsondelete {function} json的删除方法
jsonupdate {function} json的修改方法
jsonadd {function} json的添加方法
deteurl {String} 是否启用删除标签的图片
upurl {String} 是否启用修改标签的图片
i {String} tree的对象值，控制下一级
j {String} tree的对象值,控制上一级
*/
U.MD.UI.BTree.DirectoryCreate = function (json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i, j) {
if (i == 0) { //判断是否载入第一层，如果是
mulu[1].style.display = "none"; //隐藏二级目录
mulu[2].style.display = "none"; //隐藏三级目录
} else { //如果不是载入第一层目录
mulu[2].style.display = "none"; //将三级目录隐藏
mulu[i].style.display = "block"; //显示对应级目录
}
var _buttonText = "修改"; //定义变量_buttonText，代表修改按钮的默认值
var _button1Text = "删除"; //定义变量_button1Text，代表删除按钮的默认值
if (deteurl && upurl) { //进行判断，是否提供默认按钮，如果不是
_buttonText = ""; //消除_buttonText
_button1Text = ""; //消除_button1Text
}
tree[i].innerHTML = ""; //将tree中的内容清空
mulu[i].parentID = jsonpid; //给mulu定义一个变量
mulu[i].deep = i + 1; //给mulu定义深度变量
if (j) { //判断是否有输入上一级
tree[j].innerHTML = ""; //如果有，清空上一级
}
if (json) { //如果json存在
for (var _i = 0; _i < json.length; _i++) { //创建循环，循环对象为json
var _ul = $$("ul", { className: "U_MD_UI_Tree_styleul", parentid: json[_i].parentID, deep: json[_i].deep }, tree[i]); //创建在tree中创建ul
var _li = $$("li", { className: "U_MD_UI_Tree_styleli", innerHTML: json[_i].name, parentid: json[_i].id }, _ul); //创建li在tree的下一级中，css为styleli
var _button = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _buttonText, className: "U_MD_UI_Tree_button" }, _ul); //创建修改button在在li中，css为stylebutton
var _button1 = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _button1Text, className: "U_MD_UI_Tree_button1" }, _ul); //创建删除button在在li中，css为stylebutton
//创建删除button在在li中，css为stylebutton
_button.onclick = function () { //给修改按钮定义onclick事件
jsonupdate(this, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsonupdate方法，输入this为变量
}
_button1.onclick = function () { //给删除按钮定义oncick事件
jsondelete(this, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsondelete方法，输入this为变量
}
_li.onclick = function () { //给li定义onclick事件
if (j) { //判断j是否存在，如果存在
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, mulu, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, j); //调用方法，创建下一级的下一级目录
} else { //如果不存在
if (i == 2) { //判断是否到三级目录
} else { //如果还没到
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, mulu, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); //调用方法，创建下一级的下一级目录
}
}
}
}
}
var add = $(".U_MD_UI_Tree_add");
if (add[i]) { //进行判断，当添加标签已存在时
mulu[i].removeChild(add[i]); //销毁添加标签
}
var _div = $$("div", { className: "U_MD_UI_Tree_add", innerHTML: "添加新分类" }, mulu[i]); //创建添加标签
_div.onclick = function () { //设置添加标签的点击事件
jsonadd(this, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //调用添加方法，进行添加
}
}
2丶在json中查找制定子目录的方法
/*
在json中查找指定id下的child
json {arr} 要查找的arr对象
parentID {String} 要查找的id
*/
U.MD.UI.BTree.JsonSelect = function (json, parentID) {
var _json = []; //创建一个变量_json，来接收筛选后的json
for (var _i = 0; _i < json.length; _i++) {//创建循环，循环对象为json
if (parentID == 0) { //判断parentID是否为0，如果是
return json; //返回json
} //如果不是
if (json[_i].id == parentID) {//判断json中各个对象的id是否与parentID相等，如果是
_json = json[_i].child; //变量_json等于json中对应对象的child值
return _json; //返回变量_json
} //如果不是
if (json[_i].child) { //判断json中对象是否有child值，如果有
var _return = U.MD.UI.BTree.JsonSelect(json[_i].child, parentID); //定义变量_return 值为调用方法本身的返回值
}
}
return _return; //返回_return
}
3丶将数据库返回数生成json并创建左侧树状图管理li及右侧管理页面的方法
/*
生成后台管理页面及管理页面li
tree {object} 右侧要插入后台li的地方
bookfun {function} 点击事件
jsonDeleteFun {function} json的删除方法
jsonUpdateFun {function} json的修改方法
jsonInsertFun {function} json的添加方法
directory {object} 要插入后台li的地方
mulu {object} 左侧放添加标签的的地方
muluimg {String} 后台页面的img
deteimg {String} 是否启用删除标签的图片
upimg {String} 是否启用修改标签的图片
*/
U.MD.UI.BTree.jsonStartRight = function (tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, deteimg, upimg) {
var _ul = $$("ul", { className: "U_MD_UI_Tree_a " }, tree); //创建对象，在tree中创建ul
var _li = $$("li", { className: "U_MD_UI_Tree_listyle", yid: "1" }, _ul); //创建对象，在ul中创建li，id为a+jsonid
var _img = $$("img", { src: muluimg, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建对象，在li中创建img
var _span = $$("span", { innerHTML: "目录管理", className: "U_MD_UI_Tree_spanstyle" }, _li); //创建对象 在li中创建span
_li.onclick = function () { //设置li的点击事件
bookfun(this); //先执行点击事件
U.MD.UI.BTree.DirectoryCreate(json, directory, mulu, 0, //运行方法，生成后台页面
function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) {
var _ret = jsonDeleteFun(objects.pid); //运行删除方法
if (_ret) {//如果返回了方法
json = U.MD.UI.BTree.jsonDelete(json, objects.pid); //运行方法，修改json
var _id = $("#" + objects.pid)[0]; //获取修改对象
if (_id) { _id.parentNode.remove(); } //如果有对象，修删除
if (i == 1) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2);
} //刷新二级页面
if (i == 2) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2);
} //刷新三级页面
if (i == 0) {
U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0);
} //修改一级页面
}
},
function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) {
var _ret = jsonUpdateFun(U.MD.UI.BTree.jsonSelectA(json, objects.pid)); //运行修改方法
json = U.MD.UI.BTree.jsonUpdate(json, _ret); //运行方法，修改json
var _id = $("#" + objects.pid)[0]; //获取修改对象
if (_id) {
_id.childNodes[0].src = _ret.img_url; //修改对象
_id.childNodes[1].innerHTML = _ret.name; //修改对象
}
if (i == 1) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2);
} //刷新二级页面
if (i == 2) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2);
} //刷新三级页面
if (i == 0) {
U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0);
} //修改一级页面
},
function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) {
var _json = {}; //定义变量
_json.parentID = objects.parentNode.parentID; //获取添加的parentid
_json.deep = objects.parentNode.deep; //获取添加的deep
var _ret = jsonInsertFun(_json); //运行添加方法
var _post; //定义局部对象
if (_ret) {//如果有返回值
_post = $(".U_MD_UI_Tree_a")[1];
if (_post) {//判断前台树是否存在
if (_ret.parentID == 0) {//如果要插入的是一级目录
_post = $(".U_MD_UI_Tree_a")[0].parentNode; //获取一级对象
} else {
_post = $("#" + _ret.parentID)[0].parentNode; //获取对应对象
}
_js = []; //定义局部对象
_js[0] = _ret; //给对象定值
U.MD.UI.BTree.treeCreate(_js, _post, bookfun); //创建li
}
json = U.MD.UI.BTree.jsonAdd(json, _ret); //刷新json
if (i == 1) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2);
} //刷新二级页面
if (i == 2) {
U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2);
} //刷新三级页面
if (i == 0) {
U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0);
} //修改一级页面
}
}, deteimg, upimg, 0); //调用方法，生成一级目录
}
}
4丶 json删除方法
/*
json的删除方法
json {arr} 要处理的arrjson对象
pid {String} 要删除的id
*/
U.MD.UI.BTree.jsonDelete = function (json, pid) {
for (var _i = 0; _i < json.length; _i++) {//定义循环，循环对象为json
if (json[_i].id == pid) {//进行判断，判断json[_i]是否为目标pid
json.splice(_i, 1); //删除
return json; //返回json
} else {
if (json[_i].child) {//如果有child
json[_i].child = U.MD.UI.BTree.jsonDelete(json[_i].child, pid); //重复调用方法
}
}
}
return json; //返回json
}
5丶 json修改方法
/*
json的修改方法
json {arr} 要处理的arrjson对象
upjson {json}要插入的json
*/
U.MD.UI.BTree.jsonUpdate = function (json, upjson) {
for (var _i = 0; _i < json.length; _i++) {//定义循环，循环对象为json
if (json[_i].id == upjson.id) {//进行判断，判断json[_i]是否为目标pid
json[_i] = upjson; //进行替换
return json; //返回json
}
if (json[_i].child) {//如果有child
var _return = U.MD.UI.BTree.jsonUpdate(json[_i].child, upjson); //重复调用方法
if (_return) {//当返回有值
json[_i].child = _return;
return json; //返回结果
}
}
}
return false;
}
6丶 json查找指定id方法
/*
json的搜索方法
json {arr} 要处理的arrjson对象
id {String} 要删除的id
*/
U.MD.UI.BTree.jsonSelectA = function (json, id) {
for (var _i = 0; _i < json.length; _i++) {//定义循环，循环对象为json
if (json[_i].id == id) {//进行判断，判断json[_i]是否为目标pid
return json[_i]; //返回目标
}
if (json[_i].child) {//如果有child
var _return = U.MD.UI.BTree.jsonSelectA(json[_i].child, id); //重复调用方法
if (_return) {//当返回有值
return _return; //返回结果
}
}
}
return false;
}
7丶 搜索arr中最高的id方法
/*
搜索arr中最高的id方法
arr {arr} 要搜索的arr对象
*/
U.MD.UI.BTree.createID = function (arr) {
var _return = 0; //定义变量
for (var _i = 0; _i < arr.length; _i++) {//定义循环，循环对象为arr
console.log(arr[_i].id);
if (parseInt(arr[_i].id) > _return) {//进行判断，如果arr的id比_return大
_return = parseInt(arr[_i].id); //修改_return的值
}
}
return _return; //返回变量
}
8丶 管理页面总调用方法
/*
开始方法二，生成后台管理页面
arr {arr} 要解析的json arr对象
bookfun {function} 点击事件
jsonDeleteFun {function} json的删除方法
jsonUpdateFun {function} json的修改方法
jsonInsertFun {function} json的添加方法
tree {object} 右侧要插入后台li的地方
directory {object} 要插入后台li的地方
mulu {object} 左侧放添加标签的的地方
muluimg {String} 后台页面的img
deteimg {String} 是否启用删除标签的图片
upimg {String} 是否启用修改标签的图片
*/
U.MD.UI.BTree.jsonStartA = function (arr, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, tree, directory, mulu, muluimg, deteimg, upimg) {
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.jsonStartRight(tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, 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.jsonStartA(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){
});
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++;
var aa=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[0],directory,mulu
,"http://hs.1473.cn/icon/99590b18-a84f-4df5-a941-74ae61f49832.png"
,true,true
); //调用方法，生成树状图
});
});
范例html部分代码：
<div id="tree"></div>
<div class="Book"></div>
<div class="Book" style="display:none">
<!-- 左侧代表点击管理页面后反应的页面 -->
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<h4 class="title">一级目录</h4>
<div class="directory"></div>
<!-- 代表左侧添加目录的地方 -->
</div>
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<h4 class="title">二级目录</h4>
<div class="directory"></div>
<!-- 代表左侧添加目录的地方 -->
</div>
<div class="mulu">
<!-- 代表左侧每一个目录 -->
<h4 class="title>三级目录</h4>
<div class="directory"></div>
</div>
</div>