layui_back/back/assets/module/layui-soul-table/ext_source/tableChild.js

/**
 *
 * @name:  子表格扩展
 * @author: yelog
 * @version: v1.4.4
 */
layui.define(['table', 'element', 'form', 'laytpl'], function (exports) {

    var $ = layui.jquery,
        table = layui.table,
        laytpl = layui.laytpl,
        tableChildren = {},
        ELEM_HOVER = 'soul-table-hover';

    // 封装方法
    var mod = {
        /**
         * 渲染入口
         * @param myTable
         */
        render: function (myTable) {
            var _this = this,
                $table = $(myTable.elem),
                $tableBox = $table.next().children('.layui-table-box'),
                tableId = myTable.id,
                $tableHead = $tableBox.children('.layui-table-header').children('table'),
                $fixedBody = $tableBox.children('.layui-table-fixed').children('.layui-table-body').children('table'),
                $noFixedBody = $tableBox.children('.layui-table-body').children('table'),
                $tableBody = $.merge($tableBox.children('.layui-table-body').children('table'), $fixedBody),
                columns = _this.getCompleteCols(myTable.cols),
                childIndex = [],
                soulSort = typeof myTable.soulSort === 'undefined' || myTable.soulSort,
                i;

            // 修复hover样式
            _this.fixHoverStyle(myTable)
            // 获取子表配置信息
            for (i = 0; i < columns.length; i++) {
                if (columns[i].children && columns[i].children.length > 0) {
                    childIndex.push(i);
                }
            }
            if (typeof $table.attr('lay-filter') === 'undefined') {
                $table.attr('lay-filter', tableId);
            }
            // 绑定一下主表事件
            if ($table.parents('.childTr').length === 0) {
                if (typeof myTable.rowEvent === 'function') {
                    table.on('row(' + $table.attr('lay-filter') + ')', function (obj) {
                        var index = $(this).data('index');
                        obj.tr = $tableBody.children('tbody').children('tr[data-index="' + index + '"]');
                        myTable.rowEvent(obj);
                    })
                }
                if (typeof myTable.rowDoubleEvent === 'function') {
                    table.on('rowDouble(' + $table.attr('lay-filter') + ')', function (obj) {
                        var index = $(this).data('index');
                        obj.tr = $tableBody.children('tbody').children('tr[data-index="' + index + '"]');
                        myTable.rowDoubleEvent(obj);
                    })
                }
            }

            if (childIndex.length > 0) {
                for (i = 0; i < childIndex.length; i++) {
                    (function f() {
                        var child = columns[childIndex[i]]
                            , curIndex = childIndex[i]
                            , icon = child.icon || ['layui-icon layui-icon-right', 'layui-icon layui-icon-down'];

                        if (soulSort && !(myTable.url && myTable.page)) {
                            // 前台排序
                            table.on('sort(' + $table.attr('lay-filter') + ')', function () {
                                _this.render(myTable)
                            });
                        }

                        if (child.isChild && typeof child.isChild === 'function') {
                            $tableBody.find('tr').find('td[data-key$="' + child.key + '"]>div').each(function (index) {
                                if (child.isChild(layui.table.cache[tableId][index])) {
                                    if (child.field) {
                                        $(this).prepend('<i style="cursor: pointer" class="childTable ' + icon[0] + '"></i>');
                                    } else {
                                        $(this).html('<i style="cursor: pointer" class="childTable ' + icon[0] + '"></i>');
                                    }
                                }
                            })
                        } else {
                            if (child.field) {
                                $tableBody.find('tr').find('td[data-key$="' + child.key + '"]>div').prepend('<i style="cursor: pointer" class="childTable ' + icon[0] + '"></i>');
                            } else {
                                $tableBody.find('tr').find('td[data-key$="' + child.key + '"]>div').html('<i style="cursor: pointer" class="childTable ' + icon[0] + '"></i>');
                            }
                        }

                        $tableBody.children('tbody').children('tr').each(function () {
                            $(this).children('td:eq(' + curIndex + ')').find('.childTable').on('click', function (e) {
                                layui.stope(e)
                                var rowIndex = $(this).parents('tr:eq(0)').data('index'),
                                    key = $(this).parents('td:eq(0)').data('key'),
                                    $this = $noFixedBody.children('tbody').children('tr[data-index=' + rowIndex + ']').children('td[data-key="' + key + '"]').find('.childTable:eq(0)'),
                                    $fixedThis = $fixedBody.find('tr[data-index=' + rowIndex + ']').children('td[data-key="' + key + '"]').find('.childTable:eq(0)'),
                                    data = table.cache[myTable.id][rowIndex],
                                    children = child.children;
                                if (typeof child.children === 'function') {
                                    children = child.children(data)
                                }
                                if (child.show === 2) { // 弹窗模式

                                    layer.open($.extend({
                                        type: 1,
                                        title: '子表',
                                        maxmin: true,
                                        content: _this.getTables(this, data, child, myTable, children),
                                        area: '1000px',
                                        offset: '100px'
                                    }, child.layerOption || {}));
                                    _this.renderTable(this, data, child, myTable, children, icon);

                                } else { // 展开模式

                                    // 开启手风琴模式
                                    if (!$this.hasClass(icon[1]) && child.collapse) {
                                        $tableBody.children('tbody').children('tr').children('td').find('.childTable').each(function () {
                                            if ($(this).hasClass(icon[1])) {
                                                _this.destroyChildren($(this).parents('tr:eq(0)').data('index'), myTable, icon)
                                            }
                                        })
                                    }

                                    // 多个入口时，关闭其他入口
                                    if (!$this.hasClass(icon[1])) {
                                        $this.parents('tr:eq(0)').children('td').find('.childTable').each(function () {
                                            if ($(this).hasClass(icon[1])) {
                                                $(this).removeClass(icon[1]).addClass(icon[0])
                                                _this.destroyChildren($(this).parents('tr:eq(0)').data('index'), myTable, icon)
                                            }
                                        })
                                    }

                                    if ($this.hasClass(icon[1])) {
                                        $this.removeClass(icon[1]).addClass(icon[0])
                                        $fixedThis.removeClass(icon[1]).addClass(icon[0])
                                    } else {
                                        $this.removeClass(icon[0]).addClass(icon[1])
                                        $fixedThis.removeClass(icon[0]).addClass(icon[1])
                                    }
                                    var rowspanIndex = $this.parents('td:eq(0)').attr("rowspan");

                                    if ($this.hasClass(icon[1])) {
                                        var newTr = [];
                                        newTr.push('<tr class="noHover childTr"><td colspan="' + $tableHead.find('th:visible').length + '"  style="cursor: inherit; padding: 0; width: ' + $this.parents('tr:eq(0)').width() + 'px">');
                                        newTr.push(_this.getTables(this, data, child, myTable, children));
                                        newTr.push('</td></tr>');

                                        if (rowspanIndex) {
                                            var index = parseInt($this.parents('tr:eq(0)').data("index")) + parseInt(rowspanIndex) - 1;
                                            $this.parents('table:eq(0)').children().children("[data-index='" + index + "']").after(newTr.join(''));
                                        } else {
                                            $this.parents('tr:eq(0)').after(newTr.join(''));
                                        }
                                        _this.renderTable(this, data, child, myTable, children, icon);
                                        if ($fixedBody.length > 0) {
                                            var $tr = $this.parents('tr:eq(0)').next(),
                                                height = $tr.children('td').height(),
                                                $patchDiv = '<div class="soul-table-child-patch" style="height: ' + height + 'px"></div>';
                                            $tr.children('td').children('.layui-tab-card').css({
                                                position: 'absolute',
                                                top: 0,
                                                width: '100%',
                                                background: 'white',
                                                'z-index': 200
                                            })
                                            $tr.children('td').append($patchDiv);
                                            $fixedBody.find('tr[data-index="' + rowIndex + '"]').each(function () {
                                                $(this).after('<tr><td style="padding: 0;" colspan="' + $(this).children('[data-key]').length + '">' + $patchDiv + '</td></tr>')
                                            })
                                            table.resize(tableId)
                                        }
                                        if (child.show === 3) {
                                            $this.parents('tr:eq(0)').next().find('.layui-table-view').css({
                                                margin: 0,
                                                'border-width': 0
                                            });
                                            $this.parents('tr:eq(0)').next().find('.layui-table-header').css('display', 'none');
                                        }
                                        // 阻止事件冒泡
                                        $this.parents('tr:eq(0)').next().children('td').children('.layui-tab').children('.layui-tab-content').on('click', function (e) {
                                            e.stopPropagation()
                                        }).off('dblclick').on('dblclick', function (e) {
                                            e.stopPropagation()
                                        }).on('mouseenter', 'td', function (e) {
                                            e.stopPropagation()
                                        })
                                    } else {
                                        _this.destroyChildren(rowIndex, myTable, icon);
                                        table.resize(tableId)
                                    }

                                }
                            })

                        })

                        if (child.spread && child.show !== 2) {
                            $tableBody.children('tbody').children('tr').children('td').find('.childTable').trigger('click');
                        }
                    })()

                }
            }
        },
        /**
         * 生成子表内容
         * @param _this
         * @param data
         * @param child
         * @param myTable
         * @param children 子表配置
         * @returns {string}
         */
        getTables: function (_this, data, child, myTable, children) {
            var tables = [],
                $table = $(myTable.elem),
                tableId = myTable.id,
                rowTableId = tableId + $(_this).parents('tr:eq(0)').data('index'),
                $tableMain = $table.next().children('.layui-table-box').children('.layui-table-body'),
                $tableBody = $tableMain.children('table'),
                scrollWidth = 0,
                i;
            tables.push('<div class="layui-tab layui-tab-card" lay-filter="table-child-' + rowTableId + '" style="margin: 0;border: 0;box-shadow: none;');
            if (child.show === 2) {
                tables.push('max-width: ' + ($tableBody.width() - 2) + 'px">')
            } else if (child.show === 3) {
                //不限制宽度
                tables.push('">')
            } else {
                if (child.childWidth === 'full') {
                    //不限制宽度
                    tables.push('">')
                } else {
                    if ($tableMain.prop('scrollHeight') + (children.length > 0 ? children[0].height : 0) > $tableMain.height()) {
                        scrollWidth = this.getScrollWidth();
                    }
                    tables.push('max-width: ' + ($tableMain.width() - 1 - scrollWidth) + 'px">')
                }
            }
            if (child.show !== 3 && (typeof child.childTitle === 'undefined' || child.childTitle)) {
                tables.push('<ul class="layui-tab-title">')
                for (i = 0; i < children.length; i++) {
                    tables.push('<li class="' + (i === 0 ? 'layui-this' : '') + '">' + (typeof children[i].title === 'function' ? children[i].title(data) : children[i].title) + '</li>');
                }
                tables.push('</ul>')
            }
            if (child.show === 3) {
                tables.push('<div class="layui-tab-content" style="padding: 0">');
            } else {
                tables.push('<div class="layui-tab-content" style="padding: 0 10px">');
            }
            for (i = 0; i < children.length; i++) {
                var childTableId = rowTableId + i;
                tables.push('<div class="layui-tab-item layui-show"><form action="" class="layui-form" ><table id="' + childTableId + '" lay-filter="' + childTableId + '"></table></form></div>');
            }
            tables.push('</div></div>');
            return tables.join('')
        },
        /**
         * 渲染子表
         * @param _this
         * @param data 父表当前行数据
         * @param child 子表列
         * @param myTable 父表配置
         * @param children 子表配置
         */
        renderTable: function (_this, data, child, myTable, children, icon) {
            var tables = []
                , _that = this
                , tableId = myTable.id
                , rowTableId = tableId + $(_this).parents('tr:eq(0)').data('index');

            if (child.lazy) {
                tables.push(renderChildTable(_that, _this, data, child, myTable, 0, children, icon));
            } else {
                for (var i = 0; i < children.length; i++) {
                    tables.push(renderChildTable(_that, _this, data, child, myTable, i, children, icon));
                }
            }
            tableChildren[rowTableId] = tables;


            layui.element.on('tab(table-child-' + rowTableId + ')', function (tabData) {
                if (child.lazy) {
                    var isRender = false; // 是否已经渲染
                    for (i = 0; i < tableChildren[rowTableId].length; i++) {
                        if (tableChildren[rowTableId][i].config.id === (rowTableId + tabData.index)) {
                            isRender = true;
                            break;
                        }
                    }
                    if (!isRender) {
                        tableChildren[rowTableId].push(renderChildTable(_that, _this, data, child, myTable, tabData.index, children))
                    }
                }

                var rowIndex = $(_this).parents('tr:eq(0)').data('index'),
                    height = $(tabData.elem).height();

                $(_this).parents('.layui-table-box:eq(0)').children('.layui-table-body').children('table').children('tbody').children('tr[data-index=' + rowIndex + ']').next().children().children('.soul-table-child-patch').css('height', height)
                $(_this).parents('.layui-table-box:eq(0)').children('.layui-table-fixed').children('.layui-table-body').children('table').children('tbody').children('tr[data-index=' + rowIndex + ']').next().children().children('.soul-table-child-patch').css('height', height)
                table.resize(tableId)

            });


            function renderChildTable(_that, _this, data, child, myTable, i, children, icon) {
                var param = _that.deepClone(children[i]), thisTableChild,
                    tableId = myTable.id,
                    rowIndex = $(_this).parents('tr:eq(0)').data('index'),
                    childTableId = tableId + rowIndex + i,
                    $table = $(myTable.elem),
                    $tableBox = $table.next().children('.layui-table-box'),
                    $tableBody = $.merge($tableBox.children('.layui-table-body').children('table'), $tableBox.children('.layui-table-fixed').children('.layui-table-body').children('table')),
                    tr = $tableBody.children('tbody').children('tr[data-index="' + rowIndex + '"]'),
                    row = table.cache[tableId][rowIndex],
                    // 父表当前行对象
                    pobj = {
                        data: row,
                        tr: tr,
                        del: function () {
                            table.cache[tableId][rowIndex] = [];
                            _that.destroyChildren(rowIndex, myTable, icon)
                            tr.remove();
                            table.resize(tableId);
                        },
                        update: function (fields) {
                            fields = fields || {};
                            layui.each(fields, function (key, value) {
                                if (key in row) {
                                    var templet, td = tr.children('td[data-field="' + key + '"]');
                                    row[key] = value;
                                    table.eachCols(tableId, function (i, item2) {
                                        if (item2.field == key && item2.templet) {
                                            templet = item2.templet;
                                        }
                                    });
                                    td.children('.layui-table-cell').html(function () {
                                        return templet ? function () {
                                            return typeof templet === 'function'
                                                ? templet(row)
                                                : laytpl($(templet).html() || value).render(row)
                                        }() : value;
                                    }());
                                    td.data('content', value);
                                }
                            });
                        },
                        close: function () {
                            _that.destroyChildren(rowIndex, myTable, icon)
                            table.resize(tableId);
                        }

                    };
                param.id = childTableId;
                param.elem = '#' + childTableId;
                typeof param.where === 'function' && (param.where = param.where(data));
                typeof param.data === 'function' && (param.data = param.data(data));
                typeof param.url === 'function' && (param.url = param.url(data));
                thisTableChild = table.render(param);
                if (!child.lazy && i !== 0) {
                    $('#' + childTableId).parents('.layui-tab-item:eq(0)').removeClass('layui-show'); //解决隐藏时计算表格高度有问题
                }
                // 绑定 checkbox 事件
                if (typeof param.checkboxEvent === 'function') {
                    table.on('checkbox(' + childTableId + ')', function (obj) {
                        param.checkboxEvent(obj, pobj)
                    })
                }
                // 绑定 edit 事件
                if (typeof param.editEvent === 'function') {
                    table.on('edit(' + childTableId + ')', function (obj) {
                        obj.oldValue = $(this).prev().text();
                        param.editEvent(obj, pobj)
                    })
                }
                // 绑定 tool 事件
                if (typeof param.toolEvent === 'function') {
                    table.on('tool(' + childTableId + ')', function (obj) {
                        param.toolEvent(obj, pobj)
                    })
                }
                // 绑定 toolbar 事件
                if (typeof param.toolbarEvent === 'function') {
                    table.on('toolbar(' + childTableId + ')', function (obj) {
                        param.toolbarEvent(obj, pobj)
                    })
                }
                // 绑定单击行事件
                if (typeof param.rowEvent === 'function') {
                    table.on('row(' + childTableId + ')', function (obj) {
                        param.rowEvent(obj, pobj)
                    })
                }
                // 绑定双击行事件
                if (typeof param.rowDoubleEvent === 'function') {
                    table.on('rowDouble(' + childTableId + ')', function (obj) {
                        param.rowDoubleEvent(obj, pobj)
                    })
                }
                return thisTableChild;
            }
        },
        destroyChildren: function (rowIndex, myTable, icon) {
            var tableId = myTable.id,
                $table = $(myTable.elem),
                $tableBox = $table.next().children('.layui-table-box'),
                $fixedBody = $tableBox.children('.layui-table-fixed').children('.layui-table-body').children('table'),
                $tableBody = $.merge($tableBox.children('.layui-table-body').children('table'), $fixedBody),
                $tr = $tableBody.children('tbody').children('tr[data-index="' + rowIndex + '"]');

            $tr.find('.childTable').removeClass(icon[1]).addClass(icon[0]);

            // 暂时不处理 rowspan 情况
            // var rowspanIndex = $this.parents('td:eq(0)').attr("rowspan");
            // if(rowspanIndex){
            //     var index=$this.parents('tr:eq(0)').index()+parseInt(rowspanIndex);
            //     $this.parents('table:eq(0)').children().children('tr:eq('+index+')').remove()
            // }else{
            //     $this.parents('tr:eq(0)').next().remove();
            // }
            $tr.next().remove()
            var tables = tableChildren[tableId + rowIndex];
            if (layui.tableFilter) { //如果使用了筛选功能，怎同时清理筛选渲染的数据
                layui.tableFilter.destroy(tables);
            }
            delete tableChildren[tableId + rowIndex]
        },
        cloneJSON: function (obj) {
            var JSON_SERIALIZE_FIX = {
                PREFIX: "[[JSON_FUN_PREFIX_",
                SUFFIX: "_JSON_FUN_SUFFIX]]"
            };
            var sobj = JSON.stringify(obj, function (key, value) {
                if (typeof value === 'function') {
                    return JSON_SERIALIZE_FIX.PREFIX + value.toString() + JSON_SERIALIZE_FIX.SUFFIX;
                }
                return value;
            });
            return JSON.parse(sobj, function (key, value) {
                if (typeof value === 'string' &&
                    value.indexOf(JSON_SERIALIZE_FIX.SUFFIX) > 0 && value.indexOf(JSON_SERIALIZE_FIX.PREFIX) === 0) {
                    return eval("(" + value.replace(JSON_SERIALIZE_FIX.PREFIX, "").replace(JSON_SERIALIZE_FIX.SUFFIX, "") + ")");
                }
                return value;
            }) || {};
        },
        fixHoverStyle: function (myTable) {
            var $table = $(myTable.elem)
                ,
                $tableBody = $table.next().children('.layui-table-box').children('.layui-table-body').children('table')
                ,
                $tableFixed = $table.next().children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('table')
                , style = $table.next().find('style')[0],
                sheet = style.sheet || style.styleSheet || {};
            // 屏蔽掉layui原生 hover 样式
            this.addCSSRule(sheet, '.layui-table-hover', 'background-color: inherit');
            this.addCSSRule(sheet, '.layui-table-hover.soul-table-hover', 'background-color: #F2F2F2');
            $.merge($tableFixed.children('tbody').children('tr'), $tableBody.children('tbody').children('tr'))
                .on('mouseenter', function () {
                    var othis = $(this)
                        , index = $(this).data('index');
                    if (othis.data('off')) return;
                    $tableFixed.children('tbody').children('tr[data-index=' + index + ']').addClass(ELEM_HOVER);
                    $tableBody.children('tbody').children('tr[data-index=' + index + ']').addClass(ELEM_HOVER);
                }).on('mouseleave', function () {
                var othis = $(this)
                    , index = $(this).data('index');
                if (othis.data('off')) return;
                $tableFixed.children('tbody').children('tr[data-index=' + index + ']').removeClass(ELEM_HOVER);
                $tableBody.children('tbody').children('tr[data-index=' + index + ']').removeClass(ELEM_HOVER);
            })
        },
        addCSSRule: function (sheet, selector, rules, index) {
            if ('insertRule' in sheet) {
                sheet.insertRule(selector + '{' + rules + '}', index)
            } else if ('addRule' in sheet) {
                sheet.addRule(selector, rules, index)
            }
        },
        // 深度克隆-不丢失方法
        deepClone: function (obj) {
            var newObj = Array.isArray(obj) ? [] : {}
            if (obj && typeof obj === "object") {
                for (var key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        newObj[key] = (obj && typeof obj[key] === 'object') ? this.deepClone(obj[key]) : obj[key];
                    }
                }
            }
            return newObj
        },
        getCompleteCols: function (origin) {
            var cols = this.deepClone(origin);
            var i, j, k, cloneCol;
            for (i = 0; i < cols.length; i++) {
                for (j = 0; j < cols[i].length; j++) {
                    if (!cols[i][j].exportHandled) {
                        if (cols[i][j].rowspan > 1) {
                            cloneCol = this.deepClone(cols[i][j])
                            cloneCol.exportHandled = true;
                            k = i + 1;
                            while (k < cols.length) {
                                cols[k].splice(j, 0, cloneCol)
                                k++
                            }
                        }
                        if (cols[i][j].colspan > 1) {
                            cloneCol = this.deepClone(cols[i][j])
                            cloneCol.exportHandled = true;
                            for (k = 1; k < cols[i][j].colspan; k++) {
                                cols[i].splice(j, 0, cloneCol)
                            }
                            j = j + cols[i][j].colspan - 1
                        }
                    }
                }
            }
            return cols[cols.length - 1];
        },
        getScrollWidth: function (elem) {
            var width = 0;
            if (elem) {
                width = elem.offsetWidth - elem.clientWidth;
            } else {
                elem = document.createElement('div');
                elem.style.width = '100px';
                elem.style.height = '100px';
                elem.style.overflowY = 'scroll';

                document.body.appendChild(elem);
                width = elem.offsetWidth - elem.clientWidth;
                document.body.removeChild(elem);
            }
            return width;
        }
    };

    // 输出
    exports('tableChild', mod);
});