五丶右键完成后台页面功能方法解读及调用
首先需要导入1个js包，并自己打好树状图位置（tree）和反应位置（Book）和右键菜单栏，布置好CSS
<script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>
1丶调用方法解析如下：
/*
将二维数组转化为列表的方法
arr {arr} 数据源json里面需要包含id，name，deep（依赖），img_url（显示图片源），child（附属目录），外部是数组
tree {object} 要插入列表的地方
bookfun {function} 每一行目录的点击事件
leftfun {function} 右键事件
*/
U.MD.UI.Tree= function (arr, treeaction, bookfun,leftfun) {
json = []; //将外变量josn清空
var _json = arr; //定义局部变量_json，值为r
for (var _i = 0; _i < _json.length; _i++) { //定义循环，循环对象为
U.MD.UI.Tree.jsonAdd(json, _json[_i]); //运行函数，生成json
}
treeaction.innerHTML = ""; //清空tree的内容
U.MD.UI.Tree.treeCreate(json, treeaction, bookfun); //运行方法，在tree中生成树状图
treeaction.oncontextmenu = function (e) {
e.preventDefault(); //去掉默认的contextmenu事件，否则会和右键事件同时出现。
};
treeaction.onmousedown = function (e) { //设置树状图的右键点击事件
if (e.button == 2) {
leftfun(e,bookfun);//运行右键事件
}
}
}
2丶默认列表生成方法：
/*
rightButton {object} 要插入li的右键对象
e {json} 点击事件的信息
*/
U.MD.UI.Tree.rightOnclick = function (rightButton, e) {
var _li = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "新建文件夹", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li
var _li1 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "重命名", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li
var _li2 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "删除", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep + 1) }, rightButton); //在右键菜单中添加li
var _return = [];
_return[0] = _li;
_return[1] = _li1;
_return[2] = _li2;
return _return;
}
调用方法生成示例步骤如下：
U.UF.DL.asynLoadJs({src:"http://www.1473.cn/js/Controls/Complex/Tree.js","charset": "utf-8", "type": "text/javascript"},function(){//动态加载js
var json =[]; //定义json数组
var tree = $("#tree")[0]; //获取树状图的插入位置
var book = $(".Book"); //获取效果对象
var rightButton = $(".rightButton")[0]; //获取右键菜单
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree',"Select_all"]),function(r){//获取数据库返回的数组
var iii=U.MD.UI.Tree.createID(r.value)+1;
U.MD.UI.Tree(r.value,tree,function(li){
rightButton.style.display="none";
book[0].innerHTML=li.childNodes[1].innerHTML+"的内容";
},
function(e,bookfun){
rightButton.style.display="block";
rightButton.style.left = e.layerX + 420 + "px"; //修改右键菜单的left位置
rightButton.style.top = e.layerY +100+ "px"; //修改右键菜单的right位置
rightButton.innerHTML = ""; //消除右键菜单的innerHTML
var _return=U.MD.UI.Tree.rightOnclick(rightButton,e);
_return[0].onclick=function(){//定义添加事件
var addjson={};//定义一个变量
var addimg ="http://api.1473.cn/Uform/Image/tree/folder.png";//定义默认图片路径
var addname = prompt("请输入新目录的名字");
if(addname != ""){
if(addname != null){
addjson.img_url=addimg;//将变量的img——url定义为addimg
addjson.name=addname;//将变量的name定义为addname
addjson.id=iii;//将变量的img——url定义为addimg
addjson.deep=_return[0].deep;//将变量的img——url定义为addimg
addjson.parentID=_return[0].parentid;//将变量的img——url定义为addimg
if(e.path[0].id=="tree"){//判断是否为一级目录
addjson.deep=1;//如果是，修改deep
addjson.parentID=0;//修改parentID
var _json=[];
_json[0]=addjson;
U.MD.UI.Tree.treeCreate(_json,tree,bookfun);//在前台生成树
}else{
var _json=[];
_json[0]=addjson;
U.MD.UI.Tree.treeCreate(_json,e.path[1].parentNode,bookfun);//在前台生成树
}
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){
});//运行数据库添加
}
}
rightButton.style.display="none";//隐藏右键目录
}
_return[1].onclick=function(){//修改方法
if(e.path[0].id=="tree"){//判断是否为一级目录
}else{//如果不是
var pid=e.path[1].id;//定义pid，值为修改的id名
var name = prompt("请输入修改的目录名");
if( name != ""){
if( name != null){
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree','Update_ID'
,pid,name]),function(r){
});//运行数据库修改
}
}
e.path[1].childNodes[1].innerHTML=name;//修改前台树
}
rightButton.style.display="none";//隐藏右键目录
}
_return[2].onclick=function(){//删除方法
if(e.path[0].id=="tree"){//判断是否为一级目录
}else{//如果不是
var pid=e.path[1].id;//定义pid，值为修改的id名
var _r=confirm("确定删除吗？");
if(_r){
U.A.Request('http://cd.1473.cn/php',(['db.1473.cn','UseStudio_Tree'
,"Delete_ID",pid]),function(r){
});//运行删除方法
e.path[1].parentNode.remove();//删除前台树
}
}
rightButton.style.display="none";//隐藏右键目录
}
});
});
});
注释：第一层目录deep必须为"0"且依附于"null"
范例html部分代码：
<div id="tree"></div>
<div class="Book"></div>
<div class="rightButton"></div>