审查视图

public/assets/js/require-table.js 16.2 KB
Karson authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
define(['jquery', 'bootstrap', 'backend', 'config', 'toastr', 'moment', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-mobile', 'bootstrap-table-export', 'bootstrap-table-advancedsearch'], function ($, undefined, Backend, Config, Toastr, Moment) {

    var Table = {
        list: {},
        // Bootstrap-table 基础配置
        defaults: {
            url: '',
            sidePagination: 'server',
            method: 'get',
            toolbar: "#toolbar",
            search: true,
            advancedSearch: true,
            idTable: 'advancedTable',
            showExport: true,
            pagination: true,
            clickToSelect: true,
            showRefresh: false,
            locale: Config.language.replace('_', '-'),
            showToggle: true,
            showColumns: true,
            sortName: 'id',
            sortOrder: 'desc',
            paginationFirstText: __("First"),
            paginationPreText: __("Previous"),
            paginationNextText: __("Next"),
            paginationLastText: __("Last"),
            mobileResponsive: true,
            checkOnInit: true,
            extend: {
                index_url: '',
                add_url: '',
                edit_url: '',
                del_url: '',
                multi_url: '',
                dragsort_url: 'ajax/weigh',
            }
        },
        // Bootstrap-table 列配置
        columnDefaults: {
            align: 'center',
            valign: 'middle',
        },
        config: {
Karson authored
44
            firsttd: 'tbody tr td:first-child:not(:has(div.card-views))',
Karson authored
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
            toolbar: '.toolbar',
            refreshbtn: '.btn-refresh',
            addbtn: '.btn-add',
            editbtn: '.btn-edit',
            delbtn: '.btn-del',
            multibtn: '.btn-multi',
            disabledbtn: '.btn-disabled',
            editonebtn: '.btn-editone',
            dragsortfield: 'weigh',
        },
        api: {
            init: function (defaults, columnDefaults, locales) {
                defaults = defaults ? defaults : {};
                columnDefaults = columnDefaults ? columnDefaults : {};
                locales = locales ? locales : {};
                // 写入bootstrap-table默认配置
                $.extend(true, $.fn.bootstrapTable.defaults, Table.defaults, defaults);
                // 写入bootstrap-table column配置
                $.extend($.fn.bootstrapTable.columnDefaults, Table.columnDefaults, columnDefaults);
                // 写入bootstrap-table locale配置
                $.extend($.fn.bootstrapTable.locales[Table.defaults.locale], {
                    formatAdvancedSearch: function () {
                        return __('Advanced search');
                    },
                    formatAdvancedSubmitButton: function () {
                        return __("Submit");
                    },
                    formatAdvancedResetButton: function () {
                        return __("Reset");
                    },
                    formatAdvancedCloseButton: function () {
                        return __("Close");
                    }
                }, locales);
            },
            // 绑定事件
            bindevent: function (table) {
                //Bootstrap-table的父元素,包含table,toolbar,pagnation
                var parenttable = table.closest('.bootstrap-table');
                //Bootstrap-table配置
                var options = table.bootstrapTable('getOptions');
                //Bootstrap操作区
                var toolbar = $(options.toolbar, parenttable);

                //当刷新表格时
                table.on('load-error.bs.table', function (status, res) {
                    Toastr.error(__('Unknown data format'));
                });
                //当刷新表格时
                table.on('refresh.bs.table', function (e, settings, data) {
                    $(Table.config.refreshbtn, toolbar).find(".fa").addClass("fa-spin");
                });
                //当双击单元格时
                table.on('dbl-click-row.bs.table', function (e, row, element, field) {
                    $(Table.config.editonebtn, element).trigger("click");
                });
                //当内容渲染完成后
                table.on('post-body.bs.table', function (e, settings, json, xhr) {
                    $(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin");

                    // 挺拽选择,需要重新绑定事件
                    require(['drag', 'drop'], function () {
                        $(Table.config.firsttd, table).drag("start", function (ev, dd) {
                            return $('<div class="selection" />').css('opacity', .65).appendTo(document.body);
                        }).drag(function (ev, dd) {
                            $(dd.proxy).css({
                                top: Math.min(ev.pageY, dd.startY),
                                left: Math.min(ev.pageX, dd.startX),
                                height: Math.abs(ev.pageY - dd.startY),
                                width: Math.abs(ev.pageX - dd.startX)
                            });
                        }).drag("end", function (ev, dd) {
                            $(dd.proxy).remove();
                        });
                        $(Table.config.firsttd, table).drop("start", function () {
                            Table.api.toggleattr(this);
                        }).drop(function () {
                            Table.api.toggleattr(this);
                        }).drop("end", function () {
                            Table.api.toggleattr(this);
                        });
                        $.drop({
                            multi: true
                        });
                    });
                });

                // 处理选中筛选框后按钮的状态统一变更
                table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                    $(Table.config.disabledbtn, toolbar).toggleClass('disabled', !table.bootstrapTable('getSelections').length);
                });

                // 刷新按钮事件
                $(toolbar).on('click', Table.config.refreshbtn, function () {
                    table.bootstrapTable('refresh');
                });
                // 添加按钮事件
                $(toolbar).on('click', Table.config.addbtn, function () {
                    var ids = Table.api.selectedids(table);
                    Backend.api.open(options.extend.add_url + "/ids/" + ids.join(","), __('Add'));
                });
                // 编辑按钮事件
                $(toolbar).on('click', Table.config.editbtn, function () {
                    var ids = Table.api.selectedids(table);
                    //循环弹出多个编辑框
                    $.each(ids, function (i, j) {
                        Backend.api.open(options.extend.edit_url + "/ids/" + j, __('Edit'));
                    });
                });
                // 批量操作按钮事件
                $(toolbar).on('click', Table.config.multibtn, function () {
                    var ids = Table.api.selectedids(table);
                    Table.api.multi($(this).data("action"), ids, table, this);
                });
                // 批量删除按钮事件
                $(toolbar).on('click', Table.config.delbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    var index = Backend.api.layer.confirm(
                            __('Are you sure you want to delete the %s selected item?', ids.length),
                            {icon: 3, title: __('Warning'), offset: 0, shadeClose: true},
                            function () {
                                Table.api.multi("del", ids, table, that);
                                Backend.api.layer.close(index);
                            }
                    );
                });
                // 拖拽排序
                require(['dragsort'], function () {
                    //绑定拖动排序
                    $("tbody", table).dragsort({
                        itemSelector: 'tr',
                        dragSelector: "a.btn-dragsort",
                        dragEnd: function () {
                            var data = table.bootstrapTable('getData');
                            var current = data[parseInt($(this).data("index"))];
                            //改变的值和改变的ID集合
                            var ids = $.map($("tbody tr:visible", table), function (tr) {
                                return data[parseInt($(tr).data("index"))].id;
                            });
                            var changeid = current.id;
                            var pid = typeof current.pid != 'undefined' ? current.pid : '';
                            var options = {
                                url: table.bootstrapTable('getOptions').extend.dragsort_url,
                                data: {
                                    ids: ids.join(','),
                                    changeid: changeid,
                                    pid: pid,
                                    field: Table.config.dragsortfield,
                                    orderway: table.bootstrapTable('getOptions').sortOrder,
                                    table: table.bootstrapTable('getOptions').extend.table
                                }
                            };
                            Backend.api.ajax(options, function (content) {
                                Toastr.success(__('Operation completed'));
                                table.bootstrapTable('refresh');
                            });
                        },
                        placeHolderTemplate: ""
                    });
                });

                var id = table.attr("id");
                Table.list[id] = table;
                return table;
            },
            // 批量操作请求
            multi: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var url = action == "del" ? options.extend.del_url : options.extend.multi_url;
                url = url + "/ids/" + ($.isArray(ids) ? ids.join(",") : ids);
                var options = {url: url, data: {action: action, ids: ids, params: element ? $(element).data("params") : ''}};
                Backend.api.ajax(options, function (content) {
                    Toastr.success(__('Operation completed'));
                    table.bootstrapTable('refresh');
                });
            },
            // 单元格元素事件
            events: {
                operate: {
                    'click .btn-editone': function (e, value, row, index) {
                        var options = $(this).closest('table').bootstrapTable('getOptions');
                        Backend.api.open(options.extend.edit_url + "/ids/" + row.id, __('Edit'));
                    },
                    'click .btn-delone': function (e, value, row, index) {
                        var that = this;
231 232 233 234 235 236 237 238
                        var top = $(that).offset().top - $(window).scrollTop();
                        var left = $(that).offset().left - $(window).scrollLeft() - 260;
                        if(top + 154 > $(window).height()){
                            top = top - 154;
                        }
                        if($(window).width()<480){
                            top = left = undefined;
                        }
Karson authored
239 240
                        var index = Backend.api.layer.confirm(
                                __('Are you sure you want to delete this item?'),
241
                                {icon: 3, title: __('Warning'), offset: [top, left], shadeClose: true},
Karson authored
242 243 244 245 246 247 248 249 250 251 252 253 254
                                function () {
                                    var table = $(that).closest('table');
                                    Table.api.multi("del", row.id, table, that);
                                    Backend.api.layer.close(index);
                                }
                        );

                    }
                }
            },
            // 单元格数据格式化
            formatter: {
                icon: function (value, row, index) {
255
                    value = value.indexOf(" ") > -1 ? value : "fa fa-" + value;
Karson authored
256
                    //渲染fontawesome图标
257
                    return '<i class="' + value + '"></i> ' + value;
Karson authored
258 259 260 261
                },
                image: function (value, row, index) {
                    return '<img class="img-rounded img-sm" src="' + (value.indexOf("http") === 0 ? '' : Config.upload.cdnurl) + value + '" />';
                },
262 263 264 265 266 267
                status: function (value, row, index, custom) {
                    //颜色状态数组,可使用red/yellow/aqua/blue/navy/teal/olive/lime/fuchsia/purple/maroon
                    var colorArr = {normal: 'success', hidden: 'grey', deleted: 'danger', locked: 'info'};
                    //如果有自定义状态,可以按需传入
                    if (typeof custom !== 'undefined') {
                        colorArr = $.extend(colorArr, custom);
Karson authored
268
                    }
269 270 271 272
                    var color = value && typeof colorArr[value] !== 'undefined' ? colorArr[value] : 'primary';
                    value = value[0].toUpperCase() + value.substr(1);
                    //渲染状态
                    var html = '<span class="text-' + color + '"><i class="fa fa-circle"></i> ' + __(value) + '</span>';
Karson authored
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
                    return html;
                },
                url: function (value, row, index) {
                    return '<a href="' + value + '" target="_blank" class="label bg-green">' + value + '</a>';
                },
                flag: function (value, row, index) {
                    var flagstext = __('Flags');
                    var flagscolor = {t: 'red', i: 'blue', r: 'green', h: 'yellow'};
                    if (!value)
                        return value;
                    //渲染Flag
                    var html = [];
                    var arr = value.split(',');
                    arr.forEach(function (value) {
                        html.push('<span class="label bg-' + (typeof flagscolor[value] != 'undefined' ? flagscolor[value] : 'primary') + '">' + (typeof flagstext[value] !== 'undefined' ? flagstext[value] : '') + '</span>');
                    });
                    return html.join(' ');
                },
                datetime: function (value, row, index) {
                    return value ? Moment(parseInt(value) * 1000).format("YYYY-MM-DD HH:mm:ss") : __('None');
                },
                operate: function (value, row, index, table) {
                    var showweigh = true;
                    var showedit = true;
                    var showdel = true;
                    if (typeof table != 'undefined') {
                        var options = table.bootstrapTable('getOptions');
                        if (options.extend.del_url == '')
                            showdel = false;
                        if (options.extend.edit_url == '')
                            showedit = false;
                    }
                    showweigh = typeof row[Table.config.dragsortfield] != 'undefined' ? true : false;
                    //行操作
                    var html = [];
                    if (showweigh)
                        html.push('<a href="javascript:;" class="btn btn-primary btn-dragsort btn-xs"><i class="fa fa-arrows"></i></a>');

                    if (showedit)
                        html.push('<a href="javascript:;" class="btn btn-success btn-editone btn-xs"><i class="fa fa-pencil"></i></a>');
                    if (showdel)
                        html.push('<a href="javascript:;" class="btn btn-danger btn-delone btn-xs"><i class="fa fa-trash"></i></a>');
                    return html.join(' ');
                }
            },
            // 获取选中的条目ID集合
            selectedids: function (table) {
                return $.map(table.bootstrapTable('getSelections'), function (row) {
                    return row.id
                });
            },
            // 切换复选框状态
            toggleattr: function (table) {
                $("input[type='checkbox']", table).trigger('click');
            }
        },
    };
    return Table;
});