h = i(['
//TODO源码调整
//return ? l ? '' : '' : ''
return ? l ? '' : '' : ''
}(), function () {
return ? '' : ""
}(), function () {
//TODO修改源码显示title
//return && ? '' + ( || || ) + "" : '' + ( || || ) + ""
return && ? '' + ( || || ) + "" : '' + ( || || ) + ""
}(), "
if (!) return "";
var e = {
add: '',
update: '',
del: ''
}, i = ['
return === !0 && ( = ["update", "del"]), "object" == typeof ? ((, function (a, n) {
(e[n] || "")
}), ("") + "
}(), "
l && ((o), (o, )), (h), ("." + s)[0] && ().children(".layui-tree-pack").addClass("layui-tree-showLine"), l || (".layui-tree-pack").addClass("layui-tree-lineExtend"), (h, r), && ( && (), (h, r)), && (h, r)
})
}
4：修改节点展开方法，修改后代码如下【备注：//TODO 部分标识的是layui原始代码】
= function (e, a) {
var n = this, t = , r = ("." + p), l = ("." + f), c = ("." + o),
k = ("." + y), m = ? c : l, x = "";
("click", function (i) {
var ax = ("." + v),//TODO a冲突改成ax
//TODO修改源码
//n = (".layui-icon")[0] ? (".layui-icon") : (".layui-tree-icon").children(".layui-icon");
n = (".layui-icon")[0] ? (".layui-tree-iconClick").children(".layui-icon") : (".layui-tree-icon").children(".layui-icon");
if (ax[0]) { //TODO a改为ax
//TODO展开节点
if (!(c) && !(C)) {
&& ({
elem: e,
state: > 0,
data: a
})
}
//TODO注释掉源码
/*if ((C)) (C), (200), (u).addClass(h); else if ((C), (200), (u).removeClass(h), ) {
var r = ("." + s);
(C), ("." + v).slideUp(200), (".layui-tree-icon").children(".layui-icon").removeClass(u).addClass(h)
}*/
//TODO节点展开效果调整添加Begin
if ((C) && !$().hasClass("layui-tree-txt")) {
(C), (200)
//修改源码，调整无实线状态时三角图标有动画
if (!) {
('span .layui-icon').removeClass(aa).addClass(bb)
} else {
(u).addClass(h)
}
} else if ((C), (200), (u).removeClass(h), ) {
var r = ("." + s);
(C), ("." + v).slideUp(200), (".layui-tree-icon").children(".layui-icon").removeClass(u).addClass(h)
} else if (!) {
('span .layui-icon').removeClass(bb).addClass(aa)
} //TODO节点展开效果调整添加End
} else x = "normal"
})
5： 方法修改中，有两处样式添加 aa 、bb:如下所示
需要在中顶部样式变量处添加。
c = "layui-hide", d = "layui-disabled", s = "layui-tree-set", o = "layui-tree-iconClick",
h = "layui-icon-addition", u = "layui-icon-subtraction", p = "layui-tree-entry", f = "layui-tree-main",
y = "layui-tree-txt", v = "layui-tree-pack", C = "layui-tree-spread", k = "layui-tree-setLineShort",
m = "layui-tree-showLine", x = "layui-tree-lineExtend" ,
aa = "layui-tree-active", bb = "layui-tree-iconArrow", //TODO添加aa、bb两个样式
步骤2：方案落地
解决问题1：异步加载子节点
下面是狐小E智慧办公 ()后台通讯录模块中，部门树渲染加载的业务逻辑，其核心逻辑就是通过父节点ID查询子节点数据，绑定tree组件的spread函数，捕捉节点的展开事件，用户点击树节点，根据当前节点ID查询下一级节点，如果children节点有数据，则调用tree的children函数动态地渲染子节点。
//获取部门树
function LoadDeptTree() {
$.ajax({
url: "${ctx}/dept/tree/one-level?parentId=0",
dataType: "json",
async: true,
type: "GET",
success: function (resp) {
if (resp && == 0) {
//无连接线风格
deptTree =({
elem: '#leftTreeArea'
,id:'leftTreeArea'
, data:
, showLine: false //是否开启连接线
, click: editDept
, spread: function (obj) {
if (!) {
//懒加载子节点，异步获取data数据这里根据向后台请求当前节点数据
$.ajax({
url: "${ctx}/dept/tree/one-level?parentId="+,
dataType: "json",
async: true,
type: "GET",
success: function (resp) {
//当前节点展开，如果下一层有children，则调用树的children方法，动态渲染子节点
if (resp && == 0) {
//第一个参数是树绑定的页面元素ID
//第二个参数是当前展开节点的ID
//第三个参数是当前节点子节点的数据(数据格式参照layui的tree组件数据格式)
(, , );
}
}
});
}
}
});
} else {
alert("加载部门树失败")
}
},
error:function(XMLHttpRequest, textStatus, error){
if ( == 19) {
();
}else{
alert("加载部门树失败");
}
}
});
}
解决问题2：父部门添加子部门，局部动态更新视图
选中父部门，动态地为父部门添加一个子部门，添加成功将新增的子部门局部渲染到整体部门树中。下面是添加子部门后，js调用一下我自己的refreshTreeNode函数，函数里有操作的局部更新视图的代码，如下:
//重新渲染树节点
function refreshTreeNode(treeNodeId,treeNodeName) {
$.ajax({
url: "${ctx}/dept/tree/one-level?parentId="+treeNodeId,
dataType: "json",
async: true,
type: "GET",
success: function (resp) {
if (resp && == 0) {
(, treeNodeId, );
if (treeNodeName) {
//修改节点名称
$("div[data-id='"+treeNodeId+"']").find(".layui-tree-txt").eq(0).html(treeNodeName).attr("title",treeNodeName);
}
//光标重新定位到当前节点
$("div[data-id='"+treeNodeId+"']").find(".layui-tree-entry").eq(0).addClass("layui-table-click");
}
}
});
}
如果想下载我们修改后的代码，请点击：
作者介绍：小文文，狐小E智慧办公 ()开发工程师，专注移动办公软件的SaaS平台建设以及轻应用开发