text/web/lay/modules/transfer.js

/** layui-v2.5.6 MIT License By https://www.layui.com */
;layui.define(["laytpl","form"], function(e) {
    "use strict";

    var a = layui.$,  // 引用jQuery
        t = layui.laytpl,  // 引用laytpl模板引擎
        n = layui.form,  // 引用layui的表单模块
        i = "transfer",  // 模块名称
        l = {  // 配置和事件管理
            config: {},  // 配置项
            index: layui[i] ? layui[i].index + 1e4 : 0,  // 模块的索引
            set: function(e) {  // 设置配置项
                var t = this;
                return t.config = a.extend({}, t.config, e), t;
            },
            on: function(e, a) {  // 绑定事件
                return layui.onevent.call(this, i, e, a);
            }
        },
        r = function() {  // 传递模块的实例
            var e = this, a = e.config, t = a.id || e.index;
            return r.that[t] = e, r.config[t] = a, {config: a, reload: function(a) { e.reload.call(e, a); }, getData: function() { return e.getData.call(e); }};
        },
        c = "layui-hide",  // 隐藏元素的类名
        o = "layui-btn-disabled",  // 禁用按钮的类名
        d = "layui-none",  // 无数据的类名
        s = "layui-transfer-box",  // 转移框的类名
        u = "layui-transfer-header",  // 转移框头部的类名
        h = "layui-transfer-search",  // 搜索框的类名
        f = "layui-transfer-active",  // 激活的类名
        y = "layui-transfer-data",  // 数据项的类名
        p = function(e) {  // 模板渲染的HTML
            return e = e || {}, [
                '<div class="layui-transfer-box" data-index="'+e.index+'">',
                '<div class="layui-transfer-header">',
                '<input type="checkbox" name="'+e.checkAllName+'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{ d.data.title['+e.index+"] || 'list"+(e.index+1)+"' }}">',
                '</div>',
                '{{# if(d.data.showSearch){ }}',
                '<div class="layui-transfer-search">',
                '<i class="layui-icon layui-icon-search"></i>',
                '<input type="input" class="layui-input" placeholder="关键词搜索">',
                '</div>',
                '{{# } }}',
                '<ul class="layui-transfer-data"></ul>',
                '</div>'
            ].join("");
        },
        v = [
            '<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">',
            p({index: 0, checkAllName: "layTransferLeftCheckAll"}),
            '<div class="layui-transfer-active">',
            '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">',
            '<i class="layui-icon layui-icon-next"></i>',
            '</button>',
            '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">',
            '<i class="layui-icon layui-icon-prev"></i>',
            '</button>',
            '</div>',
            p({index: 1, checkAllName: "layTransferRightCheckAll"}),
            '</div>'
        ].join(""),  // 生成的HTML结构

        x = function(e) {  // 转移框构造函数
            var t = this;
            t.index = ++l.index;  // 自增索引
            t.config = a.extend({}, t.config, l.config, e);  // 合并配置
            t.render();
        };

    x.prototype.config = {
        title: ["列表一", "列表二"],  // 两个列表的标题
        width: 200,  // 转移框宽度
        height: 360,  // 转移框高度
        data: [],  // 数据源
        value: [],  // 默认选中的值
        showSearch: !1,  // 是否显示搜索框
        id: "",  // 唯一ID
        text: {  // 文本配置
            none: "无数据",  // 无数据时显示的文本
            searchNone: "无匹配数据"  // 搜索无匹配数据时显示的文本
        }
    };

    // 重新加载数据
    x.prototype.reload = function(e) {
        var t = this;
        layui.each(e, function(e, a) {
            a.constructor === Array && delete t.config[e];
        });
        t.config = a.extend(!0, {}, t.config, e);  // 合并新的配置
        t.render();
    };

    // 渲染转移框
    x.prototype.render = function() {
        var e = this, n = e.config;
        var i = e.elem = a(t(v).render({data: n, index: e.index})),  // 渲染模板
            l = n.elem = a(n.elem);  // 获取元素
        l[0] && (n.data = n.data || [], n.value = n.value || [], e.key = n.id || e.index, l.html(e.elem), e.layBox = e.elem.find("."+s), e.layHeader = e.elem.find("."+u), e.laySearch = e.elem.find("."+h), e.layData = i.find("."+y), e.layBtn = i.find("."+f+" .layui-btn"), e.layBox.css({width: n.width, height: n.height}), e.layData.css({height: function() { return n.height - e.layHeader.outerHeight() - e.laySearch.outerHeight() - 2;} }), e.renderData(), e.events());
    };

    // 渲染数据
    x.prototype.renderData = function() {
        var e = this, a = (e.config, [{checkName: "layTransferLeftCheck", views: []}, {checkName: "layTransferRightCheck", views: []}]);
        e.parseData(function(e) {  // 解析数据
            var t = e.selected ? 1 : 0,
                n = ["<li>", '<input type="checkbox" name="'+a[t].checkName+'" lay-skin="primary" lay-filter="layTransferCheckbox" title="'+e.title+'"'+(e.disabled ? " disabled" : "")+(e.checked ? " checked" : "")+' value="'+e.value+'">', "</li>"].join("");
            a[t].views.push(n);
            delete e.selected;
        });
        e.layData.eq(0).html(a[0].views.join(""));  // 更新左侧列表数据
        e.layData.eq(1).html(a[1].views.join(""));  // 更新右侧列表数据
        e.renderCheckBtn();
    };

    // 渲染按钮（全选等）
    x.prototype.renderCheckBtn = function(e) {
        var t = this, n = t.config;
        e = e || {};
        t.layBox.each(function(i) {
            var l = a(this), r = l.find("."+y), d = l.find("."+u).find('input[type="checkbox"]'), s = r.find('input[type="checkbox"]'), h = 0, f = !1;
            s.each(function() {
                var e = a(this).data("hide");
                (this.checked || this.disabled || e) && h++, this.checked && !e && (f = !0);
            });
            d.prop("checked", f && h === s.length);
            t.layBtn.eq(i)[f ? "removeClass" : "addClass"](o);
            !e.stopNone && t.noneView(r, r.children("li:not(."+c+")").length ? "" : n.text.none);
        });
        t.renderForm("checkbox");
    };

    // 显示没有数据的提示
    x.prototype.noneView = function(e, t) {
        var n = a('<p class="layui-none">'+(t || "")+"</p>");
        e.find("."+d)[0] && e.find("."+d).remove();
        t.replace(/\s/g, "") && e.append(n);
    };

    // 设置值
    x.prototype.setValue = function() {
        var e = this, t = e.config, n = [];
        e.layBox.eq(1).find("."+y+' input[type="checkbox"]').each(function() {
            var e = a(this).data("hide");
            e || n.push(this.value);
        });
        t.value = n;
        e.renderCheckBtn();
    };

    // 解析数据
    x.prototype.parseData = function(e) {
        var t = this, n = t.config, i = [];
        layui.each(n.data, function(t, l) {
            l = ("function" == typeof n.parse