一个关于layTree的扩展(layTree懒加载)

项目遇到一个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="
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值