NodeJS：利用node.js实现ztree
ztree包怎么导或者express怎么配置这种问题直接去官网看api！
zTree v3.2 API 文档
Express
下来我们进入正题，如下：
HTML部分：
<ul id="treeDemo" class="ztree"></ul>
JS部分：
<pre><code>/**
* 在开始的时候我们得先配置ztree的setting
* 也就是你想开启或关闭ztree这个插件的哪些功能
/
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
keep: {
parent: true
}
},
edit: {
enable: true
},
callback: {
beforeDrag: zTreeBeforeDrag,
onClick: zTreeOnClick,
onDblClick: zTreeOnDblClick,
beforeRemove: zTreeBeforeRemove,
onRemove: zTreeOnRemove,
beforeRename: zTreeBeforeRename,
onRename: zTreeOnRename
}
};
/*
* 我把初始化单独提了出来以供后续刷新节点使用，
* refreshTree中的post请求获取所有的用户节点信息,
* userGroupLen这个请求很关键后面说。
*/
function initzTree(zNodes){
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
});
}
function refreshTree(){
$.post('/allUserNodes' , function(zNodes){
nodetree = zNodes;
initzTree(zNodes);
});
}
$.post('/userGroupLen' , function(data){console.log(data.len)});
refreshTree();
/**
* 这里对应setting中你的配置选项，做一些扩展或者重写
*/
function addHoverDom(treeId, treeNode) {
gettreenode=treeNode;
if(treeNode.level != 0) {
var sObj1 = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr1 = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='增加用户组' onfocus='this.blur();'></span>";
sObj1.after(addStr1);
var btn1 = $("#addBtn_" + treeNode.tId);
var btn2 = $("#" + treeNode.tId + "_edit");
var btn3 = $("#" + treeNode.tId + "_remove");
btn2.attr('title','修改用户组名');
btn3.attr('title','删除用户组');
if (btn1) {
btn1.bind("click", function () {
$('#userGroupModal').modal();
console.log(treeNode)
return false;
});
}
}else{
var sObj1 = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr1 = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='增加用户组' onfocus='this.blur();'></span>";
sObj1.after(addStr1);
var btn1 = $("#addBtn_" + treeNode.tId);
if (btn1) {
btn1.bind("click", function () {
$('#userGroupModal').modal();
console.log(treeNode)
return false;
});
}
$("#" + treeNode.tId + "_edit").css('display' , 'none');
$("#" + treeNode.tId + "_remove").css('display' , 'none');
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
$("#"+treeNode.tId+"_edit").unbind().remove();
};
function zTreeBeforeDrag(treeId, treeNode) {
return false;
};
function zTreeOnClick(event , treeId , treeNode){
clearTimeout(clickTimeStamp);
clickTimeStamp = setTimeout(function(){
if(treeNode.level != 0){
zhankaibtndown(treeNode.name);
}else if(treeNode.level == 0){
zhankaibtndown('root');
}
} , 300);
}
function zTreeOnDblClick(event , treeId , treeNode){
clearTimeout(clickTimeStamp);
}
function zTreeBeforeRemove(event, treeId, treeNode){
if(confirm('确定删除吗？')){
return true;
}else{
return false;
}
}
function zTreeOnRemove(event, treeId, treeNode) {
$.post('/DeleteUserGroup', {
groupname: treeNode.name
});
}
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
var oldName = treeNode.name;
if(oldName == newName){
return true;
}else{
if(newName.length > 15){
alert('组名应不大于15个字符！');
return false;
}else{
if(newName.length <= 0){
alert('请输入组名！');
return false;
}else{
$.post(
'/queryUserSameGroup',
{
groupname: newName
},
function (data) {
var getdata = JSON.parse(data);
if (getdata.status == 'success') {
return true;
}else{
var obj = zTree.getNodeByTId(treeNode.tId);
obj.name = oldName;
zTree.updateNode(obj);
alert('所输入用户组名与其他用户组名重复，请重新输入！');
return false;
}
}
);
}
}
}
}
function zTreeOnRename(event, treeId, treeNode, isCancel) {
groupconfirm(treeNode.id, treeNode.name);
}
</code></pre>
NodeJS部分：
<pre><code>
/**
* 全局变量，为了在为了写死一个根节点数据
* 以便操作数据时不会被修改
*/
var num = 0;
var userGrouplen = 0;
var zNodes = [
{id: 1, pId: 0, name: "用户管理", isParent: true, open: true}
];
var sendflag = 0;
//为了在allUserNodes中控制由userFindGrouptree递归回调传来节点数量
app.post('/userGroupLen',function(req,res){
var gettable =
dbconn.createtable(dbconn.usergrouptablename,dbconn.usergroup_table,
function(result) {
var data = dbconn.queryalltable(gettable, function (groupresult) {
if(groupresult.length>0)
{
res.send({len:groupresult.length});
userGrouplen = groupresult.length;
}
});
});
});
app.post('/allUserNodes',function(req,res) {
sendflag = 0;
num = 0;
zNodes = [{id: 0, pId: 0, name: "用户管理", isParent: true, open: true, nocheck: true}];
var userNode = {'name': 'root', 'id':0};
userFindGrouptree(dbconn, userNode, function (nodes) {
if(num == userGrouplen){
if(sendflag ==0) {
res.send(nodes);
sendflag=1;
}
}
});
});
`
//利用递归和回调构建树节点信息数组zNodes
function userFindGrouptree(dbconn,userNode,callback){
var group_table = dbconn.createtable(dbconn.usergrouptablename, dbconn.usergroup_table,
function (result) {
var group_data = {
"parent": userNode.name,
};
var data = dbconn.querytable(group_table,group_data,function(vmgrouparray){
if(vmgrouparray.length != 0) {
vmgrouparray.forEach(function (vmgroup) {
zNodes.push({id:vmgroup.id, name:vmgroup.name, pId:userNode.id, isParent:true, nocheck: true});
num++;
console.log('Nodes Num is:'+num);
console.log("vmgroup name="+vmgroup.name);
var sonNode = {'name': vmgroup.name, 'id':vmgroup.id};
userFindGrouptree(dbconn, sonNode,function(getgroupname){
console.log("ifcallback"+getgroupname);
callback(zNodes); //这里回调至上面allusernodes中的userfindgrouptree并传入（zNodes）
});
});
console.log('Num:'+num + 'len:'+userGrouplen);
}
else
{
console.log("elsecallback");
callback(zNodes);
}
},function (err) {
console.log("err:")
console.log(err);
});
})
}
</code></pre>
`
