ApiAdmin/public/admin/static/js/template/table.js

(function ($) {
    /**
     * 创建表格HTML字符串
     * 1、严重依赖Bootstrap的样式
     * 2、严格的Json数据格式
     * 3、如果有右侧操作按钮的话会默认自动加入{field:"action",info:"操作"}所以字段名不支持使用action，action是关键字
     * @param tableObj
     * @returns {string}
     */
    $.buildTable = function ( tableObj ) {
        var tableHtml = '<div class="box box-primary" id="tableBox"><div class="box-body">';
        if( tableObj.rightButton && tableObj.rightButton.length ){
            tableObj.header.push({field:"action",info:"操作"});
        }
        if( tableObj.topButton && tableObj.topButton.length ){
            tableHtml += buildTopButton( tableObj );
        }
        tableHtml += '<table class="table table-bordered"> <tbody>';
        if( tableObj.header && tableObj.header.length ){
            tableHtml += buildHeader( tableObj );
        }
        if( tableObj.data && tableObj.data.length ){
            tableHtml += buildDataList( tableObj );
        }else{
            tableHtml += buildEmptyTable( tableObj );
        }
        tableHtml += '</tbody></table></div></div>';
        return tableHtml;
    };

    /**
     * 创建表格头部分
     * @param tableObj
     * @returns {string}
     */
    function buildHeader( tableObj ) {
        var headerHtml = '<tr><th style="width: 10px"><input type="checkbox"></th>';
        $.each(tableObj.header, function (index, value) {
            headerHtml += '<th>'+ value.info +'</th>';
        });
        headerHtml += '</tr>';
        return headerHtml;
    }

    /**
     * 创建顶部功能按钮
     * @param tableObj
     * @returns {string}
     */
    function buildTopButton( tableObj ) {
        var topHtml = '<div class="btn-group margin-bottom">';
        if( tableObj.topButton ){
            $.each(tableObj.topButton, function(index, value) {
                topHtml += createButton(value);
            });
        }
        topHtml += '</div>';
        return topHtml;
    }

    /**
     * 创建数据部分
     * @param tableObj
     * @returns {string}
     */
    function buildDataList( tableObj ) {
        var paramStr, dataListHtml = '';
        $.each(tableObj.data, function (dataIndex, dataValue) {
            dataListHtml += '<tr><td><input type="checkbox"></td>';
            $.each(tableObj.header, function (fieldIndex, fieldValue) {
                var fieldName = fieldValue.field;
                if( fieldName == 'action' ){
                    dataListHtml += '<td><div class="btn-group">';
                    $.each(tableObj.rightButton, function(buttonIndex, buttonValue) {
                        dataListHtml += createButton(buttonValue, dataValue);
                    });
                    dataListHtml += '</div></td>';
                }else{
                    if( tableObj.typeRule[fieldName] ){
                        var rule = tableObj.typeRule[fieldName];
                        var styleList ,detailInfo, classAttr = '';
                        switch (rule.module){
                            case 'label':
                                if( rule.rule[dataValue[fieldName]] ){
                                    styleList = rule.rule[dataValue[fieldName]];
                                    detailInfo = prepareInfo( styleList, dataValue, fieldName);
                                    dataListHtml += '<td><span class="'+styleList['class']+'">'+detailInfo+'</span></td>';
                                }else{
                                    dataListHtml += '<td style="color:red;">' + dataValue[fieldName] + '</td>';
                                }
                                break;
                            case 'a':
                                styleList = rule.rule;
                                detailInfo = prepareInfo( styleList, dataValue, fieldName);
                                paramStr = prepareParamStr( styleList, dataValue );
                                if( styleList['class'] ){
                                    classAttr = 'class="'+ styleList['class'] +'"';
                                }
                                dataListHtml += '<td><a '+ classAttr +' url="'+styleList['href']+'" data="'+paramStr+'">' + detailInfo + '</a></td>';
                                break;
                            case 'date':
                                dataListHtml += '<td>' + $.formatDate(dataValue[fieldName]) + '</td>';
                                break;
                            case 'icon':
                                if( rule.rule[dataValue[fieldName]] ){
                                    styleList = rule.rule[dataValue[fieldName]];
                                    dataListHtml += '<td><i class="'+styleList['class']+'"></i></td>';
                                }else{
                                    dataListHtml += '<td style="color:red;">' + dataValue[fieldName] + '</td>';
                                }
                                break;
                            case 'auth':
                                if( dataValue['url'] ){
                                    if( dataValue[fieldName] && dataValue[fieldName] != 0 ){
                                        dataListHtml += '<td><input class="auth" checked type="checkbox" url="'+ rule.rule['url'] +'" name="'+fieldName+'" ></td>';
                                    }else{
                                        dataListHtml += '<td><input class="auth" type="checkbox" url="'+ rule.rule['url'] +'" name="'+fieldName+'" ></td>';
                                    }
                                }
                                break;
                            case 'listValue':
                                if( rule.rule[dataValue[fieldName]] ){
                                    styleList = rule.rule[dataValue[fieldName]];
                                    dataListHtml += '<td>'+ styleList +'</td>';
                                }else{
                                    dataListHtml += '<td style="color:red;">' + dataValue[fieldName] + '</td>';
                                }
                                break;
                        }
                    }else{
                        dataListHtml += '<td>' + dataValue[fieldName] + '</td>';
                    }
                }
            });
            dataListHtml += '</tr>';
        });
        return dataListHtml;
    }

    /**
     * 创建按钮
     * @param buttonValue 按钮属性对象
     * @param dataValue 当前行数据对象
     * @returns {string}
     */
    function createButton( buttonValue, dataValue ) {
        var paramStr = '', buttonStr = '', iconStr = '';
        if( buttonValue.confirm ){
            buttonValue.class += ' confirm';
        }else{
            buttonValue.class += ' refresh';
        }
        if( dataValue ){
            paramStr = prepareParamStr( buttonValue, dataValue );
        }
        if( buttonValue.icon ){
            iconStr = '<i class="'+buttonValue.icon+'"></i>';
        }
        if( buttonValue.show ){
            if( dataValue[buttonValue.show[0]] == buttonValue.show[1] ){
                buttonStr = '<button url="'+buttonValue.href+'" data="'+paramStr+'" type="button" class="btn '+buttonValue.class+'">'+ iconStr + ' ' +buttonValue.info+'</button>';
            }
        }else{
            buttonStr = '<button url="'+buttonValue.href+'" data="'+paramStr+'" type="button" class="btn '+buttonValue.class+'">'+ iconStr + ' ' +buttonValue.info+'</button>';
        }
        return buttonStr;
    }

    /**
     * 预处理显示信息
     * @param styleList 当前字段对应的规则对象
     * @param dataValue 当前行数据对象
     * @param fieldName 需要处理的数据的字段名
     * @returns {*}
     */
    function prepareInfo( styleList, dataValue, fieldName ) {
        var detailInfo;
        if( styleList['info'] && styleList['info'].length ){
            detailInfo = styleList['info'];
        }else{
            detailInfo = dataValue[fieldName];
        }
        return detailInfo;
    }

    /**
     * 预处理参数信息
     * @param styleList 当前字段对应的规则对象
     * @param dataValue 当前行数据对象
     * @returns {string}
     */
    function prepareParamStr( styleList, dataValue ) {
        var paramStr = '';
        if( styleList['param'].length ){
            $.each(styleList['param'], function (paramIndex, paramValue) {
                paramStr += paramValue + '=' + dataValue[paramValue] + '&';
            });
            paramStr = paramStr.substring(0, paramStr.length-1);
        }
        return paramStr;
    }

    /**
     * 创建空数据表
     * @param tableObj
     * @returns {string}
     */
    function buildEmptyTable( tableObj ) {
        var emptyHtml = '<tr>';
        var spanNum = tableObj.header.length + 1;
        emptyHtml += '<td colspan="'+spanNum+'" class="builder-data-empty">';
        emptyHtml += '<div class="am-text-center no-data" >';
        emptyHtml += '<i class="fa fa-cogs"></i> 暂时没有数据<br>';
        emptyHtml += '<small> 本系统由<b> '+ COMPANY_NAME +' </b>开发维护</small>';
        emptyHtml += '</div></td></tr>';
        return emptyHtml;
    }
})(jQuery);