//自定义按钮的显示和功能绑定
function addDiyDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='fa fa-plus' id='addBtn_" +
treeNode.tId +
"' title='add node' οnfοcus='this.blur();'></span>";
var deleteStr = "<span class='fa fa-trash-o' id='deleteBtn_" +
treeNode.tId +
"' title='delete node' οnfοcus='this.blur();'></span>";
var activateStr;
//根据节点数据的启用状态添加状态图标
if (treeNode.IsUsed) {
activateStr = "<span class='fa fa-toggle-on' id='activateStrBtn_" +
treeNode.tId +
"' title='activateStr node' οnfοcus='this.blur();'></span>";
} else {
activateStr = "<span class='fa fa-toggle-off' id='activateStrBtn_" +
treeNode.tId +
"' title='activateStr node' οnfοcus='this.blur();'></span>";
}
sObj.after(addStr, deleteStr, activateStr);
var btnAdd = $("#addBtn_" + treeNode.tId);
if (btnAdd)
btnAdd.bind("click",
function () {
//点击后出发新增事件
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//新增节点
var newNode = zTree.addNodes(treeNode,
{ id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
//新增节点真实id为空
$("#ObjId").val("");
objId = 0;
//获取新增节点父节点真实Id并记录
$("#ParentId").val(treeNode.TrueId);
displayPId = treeNode.tId;
displayId = newNode[0].tId;
zTree.selectNode(newNode[0]);
switch (treeNode.TrueType) {
case 1:
//行业下新增分类
$("#IndustryDiv").hide();
$("#CategoryDiv").show();
$("#CourseSubjectDiv").hide();
newNode.type = 2;
zTree.updateNode(newNode);
break;
case 2:
//分类下新增科目
$("#IndustryDiv").hide();
$("#CategoryDiv").hide();
$("#CourseSubjectDiv").show();
newNode.type = 3;
zTree.updateNode(newNode);
break;
default:
break;
}
return false;
});
var btnActivateStr = $("#activateStrBtn_" + treeNode.tId);
if (btnActivateStr)
btnActivateStr.on("click",
function () {
$.ajax({
type: "post",
dataType: "json",
data: {
'Type': treeNode.TrueType,
'ObjectId': treeNode.TrueId,
'IsUsed': treeNode.IsUsed
},
url: "/IndustryCategory/ActivateIndustryCategory",
success: function (data) {
//更新ztree节点的启用状态
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByTId(displayId);
node.IsUsed = !treeNode.IsUsed;
treeObj.updateNode(node);
//改变选中的节点的启用禁用图标
var flag = btnActivateStr.hasClass("fa-toggle-on");
displayId = treeNode.tId;
if (flag) {
btnActivateStr.removeClass('fa-toggle-on').addClass('fa-toggle-off'); //删除旧class加入新class
} else {
btnActivateStr.removeClass('fa-toggle-off').addClass('fa-toggle-on'); //删除旧class加入新class
}
}
});
});
var btnDelete = $("#deleteBtn_" + treeNode.tId);
if (btnDelete)
btnDelete.bind("click",
function () {
//删除选中的节点
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.removeNode(treeNode);
$.ajax({
type: "post",
dataType: "json",
data: {
'Type': treeNode.TrueType,
'ObjectId': treeNode.TrueId,
},
url: "/IndustryCategory/DeleteIndustryCategory",
success: function (data) {
}
});
});
};
通过js触发ajax更新后台数据库数据，然后根据ajax回调更新ztree节点数据
ps：ajax回调刷新ztree可以通过初始化的方式 但是跟目前需求有冲突 别的地方可以考虑初始化ztree实现节点数据更新
