项目遇到一个8级树结构,总数据量在4万条的渲染 ,后台查询的时间大概是3min,前端渲染时页面直接崩溃,通过百度发现layTree是不支持点击加载树的,为了保持页面渲染的一致,就只能慢慢的磨一磨laytree的JS,尝试扩展一下。
下面这一段是更改后的layTree的JS,懒加载后的数据在原先layTree的Data中是找不到的,所以需要数据的话要根据DOM节点获取选中节点的数据
layui.define("form", function (e) {
"use strict";
var i = layui.$, a = layui.form, n = layui.layer, t = "tree", r = {
config: {}, index: layui[t] ? layui[t].index + 1e4 : 0, set: function (e) {
var a = this;
return a.config = i.extend({}, a.config, e), a
}, on: function (e, i) {
return layui.onevent.call(this, t, e, i)
}
}, l = function () {
var e = this, i = e.config, a = i.id || e.index;
return l.that[a] = e
, l.config[a] = i
, {
config: i
// 增加树的懒加载事件,传入Url
,treeLazy:({treeLazyUrl:i.treelazyUrl})
,reload: function (i) {
e.reload.call(e, i)
}
, getChecked: function () {
return e.getChecked.call(e)
}
, getCheckedBySingle: function () {
return e.getCheckedBySingle.call(e)
}
, setChecked: function (i) {
return e.setChecked.call(e, i)
}
}
}, 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", b = function (e) {
var a = this;
a.index = ++r.index, a.config = i.extend({}, a.config, r.config, e), a.render()
};
b.prototype.config = {
data: [],
showCheckbox: !1,
showLine: !0,
accordion: !1,
onlyIconControl: !1,
isJump: !1,
edit: !1,
text: {defaultNodeName: "未命名", none: "无数据"}
},
// 增加懒加载属性
b.prototype.treeLazy = {
treelazyUrl:'',
treelazy:true,
isSingleCheck:!1,
showCheckbox:!1,
isJump:!1,
showLine:!1,
onlyIconControl:!1
}
, b.prototype.reload = function (e) {
var a = this;
layui.each(e, function (e, i) {
i.constructor === Array && delete a.config[e]
}), a.config = i.extend(!0, {}, a.config, e), a.render()
}, b.prototype.render = function () {
var e = this, a = e.config;
// 初次加载增加属性
e.treeLazy.treelazyUrl = a.treelazyUrl;
e.treeLazy.treelazy = a.treelazy;
e.treeLazy.isSingleCheck = a.isSingleCheck;
e.treeLazy.showCheckbox = a.showCheckbox;
e.treeLazy.isJump = a.isJump;
e.treeLazy.showLine = a.showLine;
e.treeLazy.onlyIconControl = a.onlyIconControl;
e.checkids = [];
var n = i('<div class="layui-tree' + (a.showCheckbox ? " layui-form" : "") + (a.showLine ? " layui-tree-line" : "") + '" lay-filter="LAY-tree-' + e.index + '"></div>');
e.tree(n);
var t = a.elem = i(a.elem);
if (t[0]) {
if (e.key = a.id || e.index, e.elem = n, e.elemNone = i('<div class="layui-tree-emptyText">' + a.text.none + "</div>"), t.html(e.elem), 0 == e.elem.find(".layui-tree-set").length) return e.elem.append(e.elemNone);
a.showCheckbox && e.renderForm("checkbox"), e.elem.find(".layui-tree-set").each(function () {
var e = i(this);
e.parent(".layui-tree-pack")[0] || e.addClass("layui-tree-setHide"), !e.next()[0] && e.parents(".layui-tree-pack").eq(1).hasClass("layui-tree-lineExtend") && e.addClass(k), e.next()[0] || e.parents(".layui-tree-set").eq(0).next()[0] || e.addClass(k)
}), e.events()
}
}, b.prototype.renderForm = function (e) {
a.render(e, "LAY-tree-" + this.index)
}, b.prototype.tree = function (e, a) {
var n = this, t = n.config, r = a || t.data;
layui.each(r, function (a, r) {
var l = r.childrens>0?[]: r.children,
o = i('<div class="layui-tree-pack" ' + (r.spread ? 'style="display: block;"' : "") + '"></div>'),
h = i(['<div data-id="' + r.id + '" ' + (r.dataCode ? "data-code='" + r.dataCode + "'" : "") + (r.orderNum ? "data-orderNum='" + r.orderNum + "'" : "") + ' class="layui-tree-set' + (r.spread ? " layui-tree-spread" : "") + (r.checked ? " layui-tree-checkedFirst" : "") + '">', '<div class="layui-tree-entry">', '<div class="layui-tree-main">', function () {
return t.showLine ? l ? '<span class="layui-tree-iconClick layui-tree-icon"><i class="layui-icon ' + (r.spread ? "layui-icon-subtraction" : "layui-icon-addition") + '"></i></span>' : '<span class="layui-tree-iconClick"><i class="layui-icon layui-icon-file"></i></span>' : '<span class="layui-tree-iconClick"><i class="layui-tree-iconArrow ' + (l ? "" : c) + '"></i></span>'
}(),
function () {
return t.isSingleCheck ? '<input type="checkbox" name="