六丶生成后台树目录方法解读及调用
首先需要导入1个js包和1个css，三张img，并自己准备好树状图反应位置
<script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js"></script>
<link rel="stylesheet" type="text/css" href="css/controlTree.css">
<script type="text/javascript" src="js/CreateTree.js"></script>
查找img：http://cms.1473.cn/html/Templates/default/admin/img/u263.png
删除img：http://cms.1473.cn/html/Templates/default/admin/img/Detele.png
修改img：http://cms.1473.cn/html/Templates/default/admin/img/Update.png
1丶调用方法解析如下：
Namespace.register("U.MD.UI.BTree")
/**
**初始化树目录
*ele {element}第一個參數是你想放入的位置
*pid {String}第二个参数是你要开始显示的目录的父亲id
*updatefun, deletefun, addfun{function} 第三四五個參數是你修删增的回调函数
*/
U.MD.UI.BTree.createFirstTree = function (ele, pid, updatefun, deletefun, addfun) {
$$("div", { "className": "mulu", "id": "Manage0", "pid": pid, "deep": "0" }, ele); //创建第一级目录的静态页面
$("#Manage0")[0].style.display = "block";
$$("div", { "className": "title", "innerHTML": "1级分类" }, $("#Manage0")[0]);
$$("div", { "className": "directory" }, $("#Manage0")[0]);
$$("div", { "className": "U_MD_UI_Tree_add", "innerHTML": "添加新的分类", "id": "add0" }, $("#Manage0")[0]);
$(".directory")[0].categoryId = pid; //给目录添加属性
$(".directory")[0].deep = "0";
U.MD.UI.BTree.categoryManageOne($(".directory")[0], $(".directory")[0].deep, updatefun, deletefun, addfun,ele); //根据属性生成子目录
}
/**
*开始创建第一级目录
*parent {element} 浏览树目录的盒子
*deep {String} 树目录的层数
* updatefun, deletefun, addfun{function}传递回调函数
*ele {element} 生成多级目录放置的位置
*/
U.MD.UI.BTree.categoryManageOne = function (parent, deep, updatefun, deletefun, addfun,ele) { //创建第一级树目录的小目录
var _parent = parent;
var _deep = deep;
U.A.Request('http://cd.1473.cn/php', (['db.1473.cn', 'UseStudio_Tree', " Select_ParentID", _parent.categoryId]), function (r) {
var _data = r.value; //局部定义_data,值为r.value
var _directory = $(".directory")[_deep]; //局部定义
_directory.innerHTML = "";
for (var i = 0; i < _data.length; i++) { //根据返回的信息，动态创建子目录
$$("ul",
{ "id": "U_MD_UI_Tree_styleul" + _data[i].id,
"className": "U_MD_UI_Tree_styleul"
},
_directory);
var _categoryUl = $("#U_MD_UI_Tree_styleul" + _data[i].id)[0];
_categoryUl.categoryId = _data[i].id;
$$("li",
{ "id": "U_MD_UI_Tree_styleli" + _data[i].id,
"className": "U_MD_UI_Tree_styleli", "innerHTML": _data[i].name
},
_categoryUl);
var _categoryLi = $("#U_MD_UI_Tree_styleli" + _data[i].id)[0]; //给子目录添加属性
_categoryLi.categoryId = _data[i].id;
_categoryLi.deep = _data[i].deep;
_categoryLi.onclick = function () {
U.MD.UI.BTree.categoryManageSecond(this, this.deep, updatefun, deletefun, addfun,ele); //生成二级目录，this是你点击的子目录，this.deep是二级目录的deep
}
$$("input", //创建修改目录的按钮
{"className": "U_MD_UI_Tree_button", "type": "button", "id": "btn" + _data[i].id },
_categoryUl);
$("#btn" + _data[i].id)[0].onclick = function () {
U.MD.UI.BTree.Update(this.parentNode.categoryId,updatefun);
}
$$("input", //创建删除目录的按钮
{"className": "U_MD_UI_Tree_button1", "type": "button", "id": "btn1" + _data[i].id },
_categoryUl);
$("#btn1" + _data[i].id)[0].onclick = function () {
U.MD.UI.BTree.Delete(this.parentNode.categoryId,deletefun);
}
}
$("#add0")[0].onclick = function () { //添加目录的点击事件
U.MD.UI.BTree.Add(this.parentNode,addfun); //第一个参数是判断你要添加的是第几级目录
}
});
}
/**
*创建一级以后的树目录
*parent {element} 你生成树目录的父级
*deep {String} 树目录的层数
* updatefun, deletefun, addfun{function}传递回调函数
*ele {element} 生成多级目录放置的位置
*/
U.MD.UI.BTree.categoryManageSecond = function (parent, deep, updatefun, deletefun, addfun,ele) { //创建第一级以后的树目录 parent指向你点击的子目录，deep判断第几级目录
for (var i = $(".mulu").length - 1; i > 0; i--) { //防止多次点击子目录会生成多个二级目录
if (i <= parseInt(deep) - 1) {
break;
}
ele.removeChild($(".mulu")[i]);
}
var _parent = parent;
var _deep = deep;
$$("div", { "className": "mulu", "id": "Manage" + deep, "pid": _parent.categoryId, "deep": parseInt(deep) + 1 }, ele);
$("#Manage" + deep)[0].style.display = "block";
$$("div", { "className": "title", "innerHTML": parseInt(deep) + 1 + "级分类" }, $("#Manage" + deep)[0]);
$$("div", { "className": "directory" }, $("#Manage" + deep)[0]);
$$("div", { "className": "U_MD_UI_Tree_add", "innerHTML": "添加新的分类", "id": "add" + _deep }, $("#Manage" + deep)[0]);
U.A.Request('http://cd.1473.cn/php', (['db.1473.cn', 'UseStudio_Tree', " Select_ParentID", _parent.categoryId]), function (r) {
var _data = r.value;
/*if (_data.length == 0) { //如果你点击的目录没有子目录，删除这级目录
/*$(".Book")[0].removeChild($("#Manage" + deep)[0]);
return false;
}*/
var _directory = $(".directory")[_deep];
_directory.innerHTML = ""; //清空树目录
for (var i = 0; i < _data.length; i++) {
$$("ul",
{ "id": "U_MD_UI_Tree_styleul" + _data[i].id,
"className": "U_MD_UI_Tree_styleul"
},
_directory);
var _categoryUl = $("#U_MD_UI_Tree_styleul" + _data[i].id)[0];
_categoryUl.categoryId = _data[i].id;
$$("li",
{ "id": "U_MD_UI_Tree_styleli" + _data[i].id,
"className": "U_MD_UI_Tree_styleli", "innerHTML": _data[i].name
},
_categoryUl);
var _categoryLi = $("#U_MD_UI_Tree_styleli" + _data[i].id)[0];
_categoryLi.categoryId = _data[i].id;
_categoryLi.deep = _data[i].deep;
_categoryLi.onclick = function () { //查看，点击生成下级目录
U.MD.UI.BTree.categoryManageSecond(this, this.deep, updatefun, deletefun, addfun,ele);
}
$$("input", //修改按钮
{ "className": "U_MD_UI_Tree_button", "type": "button", "id": "btn" + _data[i].id },
_categoryUl);
$("#btn" + _data[i].id)[0].onclick = function () {
U.MD.UI.BTree.Update(this.parentNode.categoryId,updatefun);
}
$$("input", //删除按钮
{ "className": "U_MD_UI_Tree_button1", "type": "button", "id": "btn1" + _data[i].id },
_categoryUl);
$("#btn1" + _data[i].id)[0].onclick = function () {
U.MD.UI.BTree.Delete(this.parentNode.categoryId,deletefun);
}
}
$("#add" + _deep)[0].onclick = function () { //添加按钮
U.MD.UI.BTree.Add(this.parentNode,addfun,updatefun,deletefun);
}
});
}
2丶删除，添加，修改方法解析如下：
/**
*点击删除按钮事件
*id {string} 你要删除的目录的id
*deletefun {function} 删除的回调函数
*/
U.MD.UI.BTree.Delete = function (id, deletefun) {
var _r = confirm("确定删除吗？");
var _id = id;
if (_r == false) {
return false;
}
U.A.Request('http://cd.1473.cn/php', (['db.1473.cn', 'UseStudio_Tree', " Delete_ID", _id]), function (r) {
//回调函数 编写自己的处理过程
$('#U_MD_UI_Tree_styleli' + _id)[0].parentNode.style.display = "none";
if (r.value == true) {
U.UF.C.isFunction(deletefun) && deletefun();//判断回调函数是否是函数，是就运行
U.Alert('刪除成功！');
}
});
return true;
}
/**
*点击添加按钮事件
*ele {element} 你要添加目录的树目录
*addfun {function} 添加的回调函数
*updatefun,deletefun{function} 给新目录添加的回调函数
*/
U.MD.UI.BTree.Add = function (ele, addfun, updatefun, deletefun) { //增加 第一个参数是你要增加的目录的父元素，第二个是增加成功后的回调函数
var _addimg = "http://api.1473.cn/Uform/Image/tree/folder.png";
var _addname = prompt("请输入新目录的名字");
var _pid = ele.pid;
var _adddeep = parseInt(ele.deep);
if (_addname == "" || _addname == null) {
return false;
}
U.A.Request('http://cd.1473.cn/php', (['db.1473.cn', 'UseStudio_Tree', "Insert_Tree", _pid, _addname, _adddeep, _addimg]), function (r) {
//回调函数 编写自己的处理过程
if (r.value.length != 0) {
U.UF.C.isFunction(addfun) && addfun(); //增加成功后检查是否有回调函数 有则执行
if (_adddeep == 0) {
_adddeep = 1;
}
var _directory = $(".directory")[_adddeep - 1]; //获取增加目录的所在树目录
$$("ul", //在树目录里创建一条子目录框
{"id": "U_MD_UI_Tree_styleul" + r.value[0].id,
"className": "U_MD_UI_Tree_styleul"
},
_directory);
var _categoryUl = $("#U_MD_UI_Tree_styleul" + r.value[0].id)[0];
_categoryUl.categoryId = r.value[0].id;
$$("li",
{ "id": "U_MD_UI_Tree_styleli" + r.value[0].id,
"className": "U_MD_UI_Tree_styleli", "innerHTML": _addname
},
_categoryUl);
var _categoryLi = $("#U_MD_UI_Tree_styleli" + r.value[0].id)[0]; //给子目录框添加属性和内容
_categoryLi.categoryId = r.value[0].id;
_categoryLi.deep = _adddeep;
_categoryLi.onclick = function () {
U.MD.UI.BTree.categoryManageSecond(this, this.deep);
}
$$("input",
{ "className": "U_MD_UI_Tree_button", "type": "button", "id": "btn" + r.value[0].id },
_categoryUl);
$("#btn" + r.value[0].id)[0].onclick = function () {
U.MD.UI.BTree.Update(this.parentNode.categoryId, updatefun);
}
$$("input",
{ "className": "U_MD_UI_Tree_button1", "type": "button", "id": "btn1" + r.value[0].id },
_categoryUl);
$("#btn1" + r.value[0].id)[0].onclick = function () {
U.MD.UI.BTree.Delete(this.parentNode.categoryId, deletefun);
}
U.Alert('添加成功！');
}
// console.log(r);
});
return true;
}
/**
*点击修改按钮事件
*id {string} 你要修改的目录的id
*deletefun {function} 修改的回调函数
*/
U.MD.UI.BTree.Update = function (id, updatefun) { //修改 第一个参数是你要修改的目录的id，第二个是你修改成功后的回调函数
var _upid = id;
var _upname = prompt("请输入修改的目录名");
if (_upname == "" || _upname == null) { //修改内容不能为空
return false;
}
U.A.Request('http://cd.1473.cn/php', (['db.1473.cn', 'UseStudio_Tree', "Update_ID", _upid, _upname]), function (r) {
//回调函数 编写自己的处理过程
$('#U_MD_UI_Tree_styleli' + _upid)[0].innerHTML = _upname;
if (r.value == true) {
U.UF.C.isFunction(updatefun) && updatefun();
U.Alert('修改成功！');
}
});
return true;
}
调用方法生成示例步骤如下：
U.UF.DL.asynLoadJs({
src: "http://cms.1473.cn/html/Templates/default/admin/js/CreateTree.js",
"charset": "utf-8",
"type": "text/javascript"
}, function () {//动态加载js
U.MD.UI.BTree.createFirstTree($('.Book')[0], 0, function () { alert("修改成功!") }, function () { alert("删除成功") }, function () { alert("添加成功") })
});
范例html部分代码： <div id="tree"><div class="Book"></div> </div>