实现表格的接口排序并且默认开启

2026-07-08 02:52:49 +08:00 · 2022-07-14 18:35:41 +08:00
parent cf6d0f9814
commit 94e2090559
6 changed files with 73 additions and 23 deletions
--- a/public/static/admin/js/system/menu.js
+++ b/public/static/admin/js/system/menu.js
@@ -36,11 +36,11 @@ define(["jquery", "easy-admin", "treetable", "iconPickerFa", "autocomplete"], fu
                    // @todo 不直接使用ea.table.render(); 进行表格初始化, 需要使用 ea.table.formatCols(); 方法格式化`cols`列数据
                    cols: ea.table.formatCols([[
                        { type: 'checkbox' },
-                        { field: 'title', width: 250, title: '菜单名称', align: 'left' },
-                        { field: 'icon', width: 80, title: '图标', templet: ea.table.icon },
-                        { field: 'href', minWidth: 120, title: '菜单链接' },
+                        { field: 'title', sort: false, width: 250, title: '菜单名称', align: 'left' },
+                        { field: 'icon', sort: false, width: 80, title: '图标', templet: ea.table.icon },
+                        { field: 'href', sort: false, minWidth: 120, title: '菜单链接' },
                        {
-                            field: 'is_home',
+                            field: 'is_home', sort: false,
                            width: 80,
                            title: '类型',
                            templet: function (d) {
@@ -54,8 +54,8 @@ define(["jquery", "easy-admin", "treetable", "iconPickerFa", "autocomplete"], fu
                                }
                            }
                        },
-                        { field: 'status', title: '状态', width: 85, templet: ea.table.switch },
-                        { field: 'sort', width: 80, title: '排序', edit: 'text' },
+                        { field: 'status', sort: false, title: '状态', width: 85, templet: ea.table.switch },
+                        { field: 'sort', sort: false, width: 80, title: '排序', edit: 'text' },
                        {
                            width: 220,
                            title: '操作',
@@ -81,7 +81,7 @@ define(["jquery", "easy-admin", "treetable", "iconPickerFa", "autocomplete"], fu
                                    method: 'none',
                                    auth: 'delete',
                                    class: 'layui-btn layui-btn-xs layui-btn-danger',
-                                    extend: 'data-treetable-delete-item="1" data-url="'+init.delete_url+'"',
+                                    extend: 'data-treetable-delete-item="1" data-url="' + init.delete_url + '"',
                                    data: ['id', 'title']
                                },],

--- a/public/static/admin/js/system/node.js
+++ b/public/static/admin/js/system/node.js
@@ -49,10 +49,10 @@ define(["jquery", "easy-admin"], function ($, ea) {
                    }
                    ]],
                cols: [[
-                    {field: 'node', minWidth: 200, align: 'left', title: '系统节点'},
-                    {field: 'title', minWidth: 80, title: '节点名称 <i class="table-edit-tips color-red">*</i>', edit: 'text'},
-                    {field: 'update_time', minWidth: 80, title: '更新时间', search: 'range'},
-                    {field: 'is_auth', title: '节点控制', width: 85, search: 'select', selectList: {0: '禁用', 1: '启用'}, templet: ea.table.switch},
+                    { field: 'node', sort: false, minWidth: 200, align: 'left', title: '系统节点' },
+                    { field: 'title', sort: false, minWidth: 80, title: '节点名称 <i class="table-edit-tips color-red">*</i>', edit: 'text' },
+                    { field: 'update_time', sort: false, minWidth: 80, title: '更新时间', search: 'range' },
+                    { field: 'is_auth', sort: false, title: '节点控制', width: 85, search: 'select', selectList: { 0: '禁用', 1: '启用' }, templet: ea.table.switch },
                ]],
            });

--- a/public/static/plugs/easy-admin/easy-admin.js
+++ b/public/static/plugs/easy-admin/easy-admin.js
@@ -13,6 +13,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
    }
    window.onInitElemStyle();

+    var lastTableWhere = {};
+
    var selectMode, selectConfirmCallback;

    var form = layui.form,
@@ -241,6 +243,7 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                options.page = admin.parame(options.page, true);
                options.search = admin.parame(options.search, true);
                options.skin = options.skin || 'line';
+                options.autoSort = options.autoSort || false;
                options.limit = options.limit || 15;
                options.limits = options.limits || [10, 15, 20, 25, 50, 100];
                options.cols = options.cols || [];
@@ -407,6 +410,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                // 监听表格搜索开关显示
                admin.table.listenToolbar(options.layFilter, options.id);

+                // 监听表格瓶排序
+                admin.table.listenTableSort(options);
+
                // 监听表格开关切换
                admin.table.renderSwitch(options.cols, options.init, options.id, options.modifyReload);

@@ -620,6 +626,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                    op: JSON.stringify(formatOp)
                }

+                lastTableWhere[tableId] = options.where;
+
                return options;
            },
            renderSwitch: function (cols, tableInit, tableId, modifyReload) {
@@ -763,6 +771,11 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                    for (index in col) {
                        var val = col[index];

+                        if (val.sort === undefined) {
+
+                            cols[i][index]['sort'] = true;
+                        }
+
                        // 判断是否包含初始化数据
                        if (val.init === undefined) {
                            cols[i][index]['init'] = init;
@@ -772,6 +785,10 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                        if (val.templet === admin.table.tool && val.operat === undefined) {
                            cols[i][index]['operat'] = ['edit', 'delete'];
                        }
+                        // 格式化列操作栏
+                        if (val.templet === admin.table.tool) {
+                            cols[i][index]['sort'] = false;
+                        }

                        // 判断是否包含开关组件
                        if (val.templet === admin.table.switch && val.filter === undefined) {
@@ -797,6 +814,7 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                        // 初始化图片高度
                        if (val.templet === admin.table.image && val.imageHeight === undefined) {
                            cols[i][index]['imageHeight'] = 40;
+                            cols[i][index]['sort'] = false;
                        }

                        // 判断是否列表数据转换
@@ -1079,14 +1097,17 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                            formatOp[key] = op;
                        }
                    });
+
+                    var where = {
+                        filter: JSON.stringify(formatFilter),
+                        op: JSON.stringify(formatOp)
+                    }
+                    lastTableWhere[tableId] = where
                    table.reload(tableId, {
                        page: {
                            curr: 1
                        }
-                        , where: {
-                            filter: JSON.stringify(formatFilter),
-                            op: JSON.stringify(formatOp)
-                        }
+                        , where: where
                    }, 'data');
                    return false;
                });
@@ -1128,6 +1149,23 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                    }
                });
            },
+            listenTableSort(option) {
+                //触发排序事件 
+                table.on('sort(' + option.layFilter + ')', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
+
+                    var lastWhere = lastTableWhere[option.id] ?? {};
+
+                    lastWhere.sort = {}
+                    lastWhere.sort[obj.field] = obj.type;
+
+                    table.reload(option.id, {
+                        initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
+                        , where: lastWhere
+                    });
+
+
+                });
+            },
            listenToolbar: function (layFilter, tableId) {
                table.on('toolbar(' + layFilter + ')', function (obj) {

@@ -1270,7 +1308,7 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                        toUrl = admin.url(url);
                        if (toUrl.indexOf('?') < 0) {
                            toUrl += '?';
-                        }else{
+                        } else {
                            toUrl += '&'
                        }
                        toUrl += query;
@@ -1510,14 +1548,15 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                if (tableId === undefined || tableId === '' || tableId == null) {
                    tableId = init.table_render_id;
                }
+                var where = {
+                    filter: '{}',
+                    op: '{}'
+                };
                table.reload(tableId, {
                    page: {
                        curr: 1
                    }
-                    , where: {
-                        filter: '{}',
-                        op: '{}'
-                    }
+                    , where: where
                }, 'data');
            });