commit
						e229fe884f
					
				@ -0,0 +1,159 @@ | 
				
			||||
/** | 
				
			||||
 * 表单插件,使用方法: | 
				
			||||
 * var myform = layui.Form('formId'); | 
				
			||||
 * myform.setData({...}) | 
				
			||||
 * | 
				
			||||
 * var data = myform.getData(); | 
				
			||||
 * | 
				
			||||
 * var name = myform.getData('name') | 
				
			||||
 */ | 
				
			||||
layui.define(function (exports) { | 
				
			||||
 | 
				
			||||
    /** | 
				
			||||
     * form = new Form('formId'); | 
				
			||||
     * @param formId | 
				
			||||
     * @constructor | 
				
			||||
     */ | 
				
			||||
    var Form = function (formId) { | 
				
			||||
        this.$form = $('#' + formId); | 
				
			||||
        this.parseForm(this.$form); | 
				
			||||
    } | 
				
			||||
 | 
				
			||||
    Form.prototype = { | 
				
			||||
        fire: function (eventName, data) { | 
				
			||||
            var handler = this['on' + eventName]; | 
				
			||||
            handler && handler(data); | 
				
			||||
        } | 
				
			||||
        , opt: function (attr) { | 
				
			||||
            return this[attr]; | 
				
			||||
        } | 
				
			||||
        /** | 
				
			||||
         * @private | 
				
			||||
         */ | 
				
			||||
        , parseForm: function ($form) { | 
				
			||||
            var that = this; | 
				
			||||
            this.form = $form[0]; | 
				
			||||
        } | 
				
			||||
 | 
				
			||||
        , getEls: function () { | 
				
			||||
            return this.$form.find('input,select,textarea'); | 
				
			||||
        } | 
				
			||||
 | 
				
			||||
        /** | 
				
			||||
         * 同load(data) | 
				
			||||
         */ | 
				
			||||
        , setData: function (data) { | 
				
			||||
            this.loadData(data); | 
				
			||||
        } | 
				
			||||
 | 
				
			||||
        /** | 
				
			||||
         * @private | 
				
			||||
         */ | 
				
			||||
        , loadData: function (data) { | 
				
			||||
            this.reset(); | 
				
			||||
            for (var name in data) { | 
				
			||||
                var val = data[name]; | 
				
			||||
                var $el = this.$form.find('[name="' + name + '"]'); | 
				
			||||
 | 
				
			||||
                $el.each(function () { | 
				
			||||
                    var _$el = $(this); | 
				
			||||
                    if (_$el.is(':radio') || _$el.is(':checkbox')) { | 
				
			||||
                        _$el.prop('checked', false); | 
				
			||||
                        var elVal = _$el.val(); | 
				
			||||
 | 
				
			||||
                        if ($.isArray(val)) { | 
				
			||||
                            for (var i = 0, len = val.length; i < len; i++) { | 
				
			||||
                                if (elVal == val[i]) { | 
				
			||||
                                    _$el.prop('checked', true); | 
				
			||||
                                } | 
				
			||||
                            } | 
				
			||||
                        } else { | 
				
			||||
                            _$el.prop('checked', elVal == val); | 
				
			||||
                        } | 
				
			||||
 | 
				
			||||
                    } else { | 
				
			||||
                        _$el.val(val); | 
				
			||||
                    } | 
				
			||||
 | 
				
			||||
                }); | 
				
			||||
            } | 
				
			||||
        } | 
				
			||||
        /** | 
				
			||||
         * 清除表单中的值,清除错误信息 | 
				
			||||
         */ | 
				
			||||
        , clear: function () { | 
				
			||||
            this.getEls().each(function () { | 
				
			||||
                var _$el = $(this); | 
				
			||||
                if (_$el.is(':radio') || _$el.is(':checkbox')) { | 
				
			||||
                    this.checked = false; | 
				
			||||
                } else { | 
				
			||||
                    this.value = ''; | 
				
			||||
                } | 
				
			||||
 | 
				
			||||
                var msg = _$el.data('msg'); | 
				
			||||
                if (msg) { | 
				
			||||
                    msg.text(''); | 
				
			||||
                } | 
				
			||||
 | 
				
			||||
            }); | 
				
			||||
        } | 
				
			||||
        /** | 
				
			||||
         * 重置表单 | 
				
			||||
         */ | 
				
			||||
        , reset: function () { | 
				
			||||
            var form = this.form; | 
				
			||||
            if (form && form.reset) { | 
				
			||||
                form.reset(); | 
				
			||||
            } else { | 
				
			||||
                this.clear(); | 
				
			||||
            } | 
				
			||||
        } | 
				
			||||
        /** | 
				
			||||
         * 获取表单数据,如果有fieldName参数则返回表单对应的值<br> | 
				
			||||
         * var id = form.getData('id') 等同于 var id = form.getData().id; | 
				
			||||
         * @param {String} fieldName | 
				
			||||
         * @return {Object} 返回JSON对象,如果有fieldName参数,则返回对应的值 | 
				
			||||
         */ | 
				
			||||
        , getData: function (fieldName) { | 
				
			||||
            var that = this; | 
				
			||||
            var data = {}; | 
				
			||||
 | 
				
			||||
            this.getEls().each(function () { | 
				
			||||
                var value = that._getInputVal($(this)); | 
				
			||||
                if (value) { | 
				
			||||
                    var name = this.name; | 
				
			||||
                    var dataValue = data[name]; | 
				
			||||
                    if (dataValue) { | 
				
			||||
                        if ($.isArray(dataValue)) { | 
				
			||||
                            dataValue.push(value); | 
				
			||||
                        } else { | 
				
			||||
                            data[name] = [dataValue, value]; | 
				
			||||
                        } | 
				
			||||
                    } else { | 
				
			||||
                        data[name] = value; | 
				
			||||
                    } | 
				
			||||
                } | 
				
			||||
            }); | 
				
			||||
 | 
				
			||||
            if (typeof fieldName === 'string') { | 
				
			||||
                return data[fieldName]; | 
				
			||||
            } | 
				
			||||
 | 
				
			||||
            return data; | 
				
			||||
        } | 
				
			||||
        , _getInputVal: function ($input) { | 
				
			||||
            if ($input.is(":radio") || $input.is(":checkbox")) { | 
				
			||||
                if ($input.is(':checked')) { | 
				
			||||
                    return $input.val(); | 
				
			||||
                } | 
				
			||||
            } else { | 
				
			||||
                return $input.val(); | 
				
			||||
            } | 
				
			||||
        } | 
				
			||||
 | 
				
			||||
    } | 
				
			||||
 | 
				
			||||
    exports('Form', function (formId) { | 
				
			||||
        return new Form(formId); | 
				
			||||
    }); | 
				
			||||
}); | 
				
			||||
@ -0,0 +1,18 @@ | 
				
			||||
.treeTable-empty { | 
				
			||||
    width: 20px; | 
				
			||||
    display: inline-block; | 
				
			||||
} | 
				
			||||
 | 
				
			||||
.treeTable-icon { | 
				
			||||
    cursor: pointer; | 
				
			||||
} | 
				
			||||
 | 
				
			||||
.treeTable-icon .layui-icon-triangle-d:before { | 
				
			||||
    content: "\e623"; | 
				
			||||
} | 
				
			||||
 | 
				
			||||
.treeTable-icon.open .layui-icon-triangle-d:before { | 
				
			||||
    content: "\e625"; | 
				
			||||
    background-color: transparent; | 
				
			||||
} | 
				
			||||
 | 
				
			||||
@ -0,0 +1,216 @@ | 
				
			||||
layui.define(['layer', 'table'], function (exports) { | 
				
			||||
    var $ = layui.jquery; | 
				
			||||
    var layer = layui.layer; | 
				
			||||
    var table = layui.table; | 
				
			||||
 | 
				
			||||
    var treetable = { | 
				
			||||
        // 渲染树形表格
 | 
				
			||||
        render: function (param) { | 
				
			||||
            // 检查参数
 | 
				
			||||
            if (!treetable.checkParam(param)) { | 
				
			||||
                return; | 
				
			||||
            } | 
				
			||||
            // 获取数据
 | 
				
			||||
            if (param.data) { | 
				
			||||
                treetable.init(param, param.data); | 
				
			||||
            } else { | 
				
			||||
                // $.getJSON(param.url, param.where, function (res) {
 | 
				
			||||
                //     treetable.init(param, res.data);
 | 
				
			||||
                // });
 | 
				
			||||
                $.ajax({ | 
				
			||||
                    url: param.url, | 
				
			||||
                    type: param.method || 'get', | 
				
			||||
                    data: param.where, | 
				
			||||
                    headers: param.headers || {}, | 
				
			||||
                    dataType: "json", | 
				
			||||
                    success: function (res) { | 
				
			||||
                        treetable.init(param, res.data); | 
				
			||||
                    } | 
				
			||||
                }) | 
				
			||||
            } | 
				
			||||
        }, | 
				
			||||
        // 渲染表格
 | 
				
			||||
        init: function (param, data) { | 
				
			||||
            var mData = []; | 
				
			||||
            var doneCallback = param.done; | 
				
			||||
            var tNodes = data; | 
				
			||||
            // 补上id和pid字段
 | 
				
			||||
            for (var i = 0; i < tNodes.length; i++) { | 
				
			||||
                var tt = tNodes[i]; | 
				
			||||
                if (!tt.id) { | 
				
			||||
                    if (!param.treeIdName) { | 
				
			||||
                        layer.msg('参数treeIdName不能为空', {icon: 5}); | 
				
			||||
                        return; | 
				
			||||
                    } | 
				
			||||
                    tt.id = tt[param.treeIdName]; | 
				
			||||
                } | 
				
			||||
                if (!tt.pid) { | 
				
			||||
                    if (!param.treePidName) { | 
				
			||||
                        layer.msg('参数treePidName不能为空', {icon: 5}); | 
				
			||||
                        return; | 
				
			||||
                    } | 
				
			||||
                    tt.pid = tt[param.treePidName]; | 
				
			||||
                } | 
				
			||||
            } | 
				
			||||
 | 
				
			||||
            // 对数据进行排序
 | 
				
			||||
            var sort = function (s_pid, data) { | 
				
			||||
                for (var i = 0; i < data.length; i++) { | 
				
			||||
                    if (data[i].pid == s_pid) { | 
				
			||||
                        var len = mData.length; | 
				
			||||
                        if (len > 0 && mData[len - 1].id == s_pid) { | 
				
			||||
                            mData[len - 1].isParent = true; | 
				
			||||
                        } | 
				
			||||
                        mData.push(data[i]); | 
				
			||||
                        sort(data[i].id, data); | 
				
			||||
                    } | 
				
			||||
                } | 
				
			||||
            }; | 
				
			||||
            sort(param.treeSpid, tNodes); | 
				
			||||
 | 
				
			||||
            // 重写参数
 | 
				
			||||
            param.url = undefined; | 
				
			||||
            param.data = mData; | 
				
			||||
            param.page = { | 
				
			||||
                count: param.data.length, | 
				
			||||
                limit: param.data.length | 
				
			||||
            }; | 
				
			||||
            param.cols[0][param.treeColIndex].templet = function (d) { | 
				
			||||
                var mId = d.id; | 
				
			||||
                var mPid = d.pid; | 
				
			||||
                var isDir = d.isParent; | 
				
			||||
                var emptyNum = treetable.getEmptyNum(mPid, mData); | 
				
			||||
                var iconHtml = ''; | 
				
			||||
                for (var i = 0; i < emptyNum; i++) { | 
				
			||||
                    iconHtml += '<span class="treeTable-empty"></span>'; | 
				
			||||
                } | 
				
			||||
                if (isDir) { | 
				
			||||
                    iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>'; | 
				
			||||
                } else { | 
				
			||||
                    iconHtml += '<i class="layui-icon layui-icon-file"></i>'; | 
				
			||||
                } | 
				
			||||
                iconHtml += '  '; | 
				
			||||
                var ttype = isDir ? 'dir' : 'file'; | 
				
			||||
                var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">'; | 
				
			||||
                return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>' | 
				
			||||
            }; | 
				
			||||
 | 
				
			||||
            param.done = function (res, curr, count) { | 
				
			||||
                $(param.elem).next().addClass('treeTable'); | 
				
			||||
                $('.treeTable .layui-table-page').css('display', 'none'); | 
				
			||||
                $(param.elem).next().attr('treeLinkage', param.treeLinkage); | 
				
			||||
                // 绑定事件换成对body绑定
 | 
				
			||||
                /*$('.treeTable .treeTable-icon').click(function () { | 
				
			||||
                    treetable.toggleRows($(this), param.treeLinkage); | 
				
			||||
                });*/ | 
				
			||||
                if (param.treeDefaultClose) { | 
				
			||||
                    treetable.foldAll(param.elem); | 
				
			||||
                } | 
				
			||||
                if (doneCallback) { | 
				
			||||
                    doneCallback(res, curr, count); | 
				
			||||
                } | 
				
			||||
            }; | 
				
			||||
 | 
				
			||||
            // 渲染表格
 | 
				
			||||
            table.render(param); | 
				
			||||
        }, | 
				
			||||
        // 计算缩进的数量
 | 
				
			||||
        getEmptyNum: function (pid, data) { | 
				
			||||
            var num = 0; | 
				
			||||
            if (!pid) { | 
				
			||||
                return num; | 
				
			||||
            } | 
				
			||||
            var tPid; | 
				
			||||
            for (var i = 0; i < data.length; i++) { | 
				
			||||
                if (pid == data[i].id) { | 
				
			||||
                    num += 1; | 
				
			||||
                    tPid = data[i].pid; | 
				
			||||
                    break; | 
				
			||||
                } | 
				
			||||
            } | 
				
			||||
            return num + treetable.getEmptyNum(tPid, data); | 
				
			||||
        }, | 
				
			||||
        // 展开/折叠行
 | 
				
			||||
        toggleRows: function ($dom, linkage) { | 
				
			||||
            var type = $dom.attr('lay-ttype'); | 
				
			||||
            if ('file' == type) { | 
				
			||||
                return; | 
				
			||||
            } | 
				
			||||
            var mId = $dom.attr('lay-tid'); | 
				
			||||
            var isOpen = $dom.hasClass('open'); | 
				
			||||
            if (isOpen) { | 
				
			||||
                $dom.removeClass('open'); | 
				
			||||
            } else { | 
				
			||||
                $dom.addClass('open'); | 
				
			||||
            } | 
				
			||||
            $dom.closest('tbody').find('tr').each(function () { | 
				
			||||
                var $ti = $(this).find('.treeTable-icon'); | 
				
			||||
                var pid = $ti.attr('lay-tpid'); | 
				
			||||
                var ttype = $ti.attr('lay-ttype'); | 
				
			||||
                var tOpen = $ti.hasClass('open'); | 
				
			||||
                if (mId == pid) { | 
				
			||||
                    if (isOpen) { | 
				
			||||
                        $(this).hide(); | 
				
			||||
                        if ('dir' == ttype && tOpen == isOpen) { | 
				
			||||
                            $ti.trigger('click'); | 
				
			||||
                        } | 
				
			||||
                    } else { | 
				
			||||
                        $(this).show(); | 
				
			||||
                        if (linkage && 'dir' == ttype && tOpen == isOpen) { | 
				
			||||
                            $ti.trigger('click'); | 
				
			||||
                        } | 
				
			||||
                    } | 
				
			||||
                } | 
				
			||||
            }); | 
				
			||||
        }, | 
				
			||||
        // 检查参数
 | 
				
			||||
        checkParam: function (param) { | 
				
			||||
            if (!param.treeSpid && param.treeSpid != 0) { | 
				
			||||
                layer.msg('参数treeSpid不能为空', {icon: 5}); | 
				
			||||
                return false; | 
				
			||||
            } | 
				
			||||
 | 
				
			||||
            if (!param.treeColIndex && param.treeColIndex != 0) { | 
				
			||||
                layer.msg('参数treeColIndex不能为空', {icon: 5}); | 
				
			||||
                return false; | 
				
			||||
            } | 
				
			||||
            return true; | 
				
			||||
        }, | 
				
			||||
        // 展开所有
 | 
				
			||||
        expandAll: function (dom) { | 
				
			||||
            $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { | 
				
			||||
                var $ti = $(this).find('.treeTable-icon'); | 
				
			||||
                var ttype = $ti.attr('lay-ttype'); | 
				
			||||
                var tOpen = $ti.hasClass('open'); | 
				
			||||
                if ('dir' == ttype && !tOpen) { | 
				
			||||
                    $ti.trigger('click'); | 
				
			||||
                } | 
				
			||||
            }); | 
				
			||||
        }, | 
				
			||||
        // 折叠所有
 | 
				
			||||
        foldAll: function (dom) { | 
				
			||||
            $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { | 
				
			||||
                var $ti = $(this).find('.treeTable-icon'); | 
				
			||||
                var ttype = $ti.attr('lay-ttype'); | 
				
			||||
                var tOpen = $ti.hasClass('open'); | 
				
			||||
                if ('dir' == ttype && tOpen) { | 
				
			||||
                    $ti.trigger('click'); | 
				
			||||
                } | 
				
			||||
            }); | 
				
			||||
        } | 
				
			||||
    }; | 
				
			||||
 | 
				
			||||
    layui.link(layui.cache.base + 'treetable-lay/treetable.css'); | 
				
			||||
 | 
				
			||||
    // 给图标列绑定事件
 | 
				
			||||
    $('body').on('click', '.treeTable .treeTable-icon', function () { | 
				
			||||
        var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage'); | 
				
			||||
        if ('true' == treeLinkage) { | 
				
			||||
            treetable.toggleRows($(this), true); | 
				
			||||
        } else { | 
				
			||||
            treetable.toggleRows($(this), false); | 
				
			||||
        } | 
				
			||||
    }); | 
				
			||||
 | 
				
			||||
    exports('treetable', treetable); | 
				
			||||
}); | 
				
			||||
					Loading…
					
					
				
		Reference in new issue