ztree--插件實現增刪改查demo（完整版）
阿新 • • 發佈：2017-12-21
mes add treenode pan tno btn tin 異步 als
ztree--插件實現增刪改查demo（完整版）
var setting = {
async: {
enable: true, //開啟異步加載處理
dataFilter: filter //用於對 Ajax 返回數據進行預處理的函數
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
},
check: {
enable: false
},
data: {
simpleData: {
enable: true
}
},
edit: {
removeTitle: "刪除",
renameTitle: "編輯名稱"
},
callback: {
//用於捕獲節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作
beforeRemove: beforeRemove,
//用於捕獲節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之後，
beforeRename: beforeRename,
//用於捕獲節點被點擊的事件回調函數
onClick: zTreeOnClick
}
};
var zNodes = date;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$(‘.ico_open‘).remove();
$(‘.ico_docu‘).remove();
//添加新的節點
function addHoverDom(treeId, treeNode) {
if (treeNode.level === 2) {
return false;
} else {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
if (treeNode.level === 0) {
var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.tId
+ "‘ title=‘添加部門‘ onfocus=‘this.blur();‘></span>";
sObj.after(addStr);
}
if (treeNode.level === 1) {
var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.tId
+ "‘ title=‘添加班組‘ onfocus=‘this.blur();‘></span>";
sObj.after(addStr);
}
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
if (treeNode.name) {
var parentId = treeNode.id;
var orgName = treeNode.name;
$.ajax({
url: baseUrl + ‘system/department/add‘,
type: "post",
data: {
orgName: orgName,
parentId: parentId
},
success: function (res) {
if (res.status == "0000") {
toastr.success(‘添加成功!‘)
me.ztree()
} else {
toastr.error(‘添加失敗!‘)
}
}
});
}
});
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
//刪除節點信息
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
if (treeNode.name) {
var sids = [];
sids.push(treeNode.id)
$.ajax({
url: baseUrl + ‘system/department/delete‘,
type: "post",
data: {
sids: sids
},
success: function (res) {
if (res.status == "0000") {
toastr.success(‘刪除成功‘)
} else {
toastr.error(res.message)
me.ztree()
}
}
});
} else {
window.location.reload();
}
}
//修改節點信息
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
toastr.error(‘節點名稱不能為空‘)
return false;
} else if (newName.length >= 15) {
toastr.error(‘節點名稱長度不得超出14個字符‘)
return false;
} else if (/^\s+$/gi.test(newName)) {
toastr.error(‘節點名稱不能以空格‘)
return false;
}
var pNode = treeNode.getParentNode();
var parentId;
var sid = treeNode.id;
if (pNode == null) {
parentId = 0;
} else {
parentId = pNode.id;
}
$.ajax({
url: baseUrl + ‘system/department/edit‘,
type: "post",
data: {
sid: sid,
orgName: newName,
parentId: parentId
},
success: function (res) {
if (res.status == "0000") {
toastr.success(‘修改成功!‘)
} else {
toastr.error(‘修改失敗!‘)
}
}
});
}
//修改異步獲取到的節點name屬性
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, ‘.‘);
}
return childNodes;
}
//點擊節點後， 彈出該節點的 tId、name 的信息
function zTreeOnClick(event, treeId, treeNode) {
if (treeNode.pId === null || treeNode.pId==0) {
$(‘#table‘).bootstrapTable(‘refresh‘, {
url: baseUrl + ‘system/person/list?organizationId=‘ + ""
})
} else {
$(‘#table‘).bootstrapTable(‘refresh‘, {
url: baseUrl + ‘system/person/list?organizationId=‘ + treeNode.id
})
}
};
ztree--插件實現增刪改查demo（完整版）