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

app/common/command/admin/Version.php

@@ -12,10 +12,10 @@ use think\console\Output;
 class Version extends Command
 {
 
-    const VERSION = 'v2.0.4';
+    const VERSION = 'v2.0.5';
 
     const COMMENT = [
-        '自动生成CURD导出生成关联查询',
+        '实现表格的接口排序并且默认开启',
     ];
 
     protected function configure()

app/common/controller/AdminController.php

@@ -104,6 +104,17 @@ class AdminController extends BaseController
         $this->isDemo = Env::get('adminsystem.is_demo', false);
         $this->viewInit();
         $this->checkAuth();
+
+        $this->initSort();
+    }
+
+    public function initSort()
+    {
+        $sort = $this->request->param('sort');
+
+        if (!empty($sort)) {
+            $this->sort = $sort;
+        }
     }
 
     /**

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: 'title', sort: false, width: 250, title: '菜单名称', align: 'left' },
-                        { field: 'icon', width: 80, title: '图标', templet: ea.table.icon },
+                        { field: 'icon', sort: false, width: 80, title: '图标', templet: ea.table.icon },
-                        { field: 'href', minWidth: 120, title: '菜单链接' },
+                        { 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: 'status', sort: false, title: '状态', width: 85, templet: ea.table.switch },
-                        { field: 'sort', width: 80, title: '排序', edit: 'text' },
+                        { 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']
                                 },],
 

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: 'node', sort: false, minWidth: 200, align: 'left', title: '系统节点' },
-                    {field: 'title', minWidth: 80, title: '节点名称 <i class="table-edit-tips color-red">*</i>', edit: 'text'},
+                    { field: 'title', sort: false, minWidth: 80, title: '节点名称 <i class="table-edit-tips color-red">*</i>', edit: 'text' },
-                    {field: 'update_time', minWidth: 80, title: '更新时间', search: 'range'},
+                    { field: 'update_time', sort: false, minWidth: 80, title: '更新时间', search: 'range' },
-                    {field: 'is_auth', title: '节点控制', width: 85, search: 'select', selectList: {0: '禁用', 1: '启用'}, templet: ea.table.switch},
+                    { field: 'is_auth', sort: false, title: '节点控制', width: 85, search: 'select', selectList: { 0: '禁用', 1: '启用' }, templet: ea.table.switch },
                 ]],
             });
 

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: {
+                        , where: where
-                            filter: JSON.stringify(formatFilter),
-                            op: JSON.stringify(formatOp)
-                        }
                     }, '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: {
+                    , where: where
-                        filter: '{}',
-                        op: '{}'
-                    }
                 }, 'data');
             });
 

view/index/welcome.html

@@ -40,7 +40,7 @@
                 <p><i class="name img-name"></i></p>
                 <p class="desc">{$data.description|default=''}</p>
                 <p class="operation">
-                    <a class="start" href="{:__url('admin/Index/index')}"> 后台</a>
+                    <a class="start" href="{:__url('admin/Index/index')}"> 进入后台</a>
                     <a class="start" target="_blank" href="http://doc.ulthon.com/home/read/ulthon_admin/home.html"> 起步 <i class="icon-play"></i></a>
 
                     <a class="gitee button-grya" target="_blank" href="https://gitee.com/ulthon/ulthon_admin"><i class="icon-gitee"></i>Gitee</a>