由于我们的项目文档会在官网中显示，有些项目比较重要，希望它们排在前面，这时就需要对项目进行排序。

实现排序有很多种方法，我们采用用户体验最好的拖动排序方式，简单而且直观。但这个方式只适合有限的项目，如果项目太多需要分页的话，就无法使用拖动排序，因为你无法把第二页的项目拖到第一页中。当然目前showdoc的项目管理页面并没有分页功能，因此暂时不需要考虑这个问题。先上效果图看看

前端增加排序操作

首先需要安装一个排序插件sortable.js（假如你之前已经执行npm install）

npm install sortable.js --save

然后打开项目管理页面的代码文件:web_src/src/components/admin/item/Index.vue，先引入sortablejs

import Sortable from 'sortablejs'

然后在methods里增加以下row_drop_for_order方法

            //行拖拽
            row_drop_for_order() {
                var that = this ;

                const wrapperTr = document.querySelector('.el-table__body-wrapper tbody')
                Sortable.create(wrapperTr, {
                    onEnd: evt => {
                        if(evt.oldIndex!=evt.newIndex){
                            //更新数据库里排序字段
                            var url = DocConfig.server+'/api/adminItem/updateOrder';
                            var params = new URLSearchParams();
                            params.append('oldIndex', evt.oldIndex);
                            params.append('newIndex', evt.newIndex);
                            that.axios.post(url, params);
                        }
                    }
                })
            },

然后在mounted里增加row_drop_for_order方法的调用

this.row_drop_for_order();

后端增加更新方法

最后打开后台server/Appliction/Api/Controller/AdminItemController.class.php 文件，在类方法增加更新数据库的方法：

    //更新数据库里排序字段
    public function updateOrder()
    {
        $oldIndex = I('oldIndex', 0, 'intval');
        $newIndex = I('newIndex', 0, 'intval');

        $old_item_id = D("Item")->where(array('order_number' => $oldIndex))->getField('item_id');

        if ($newIndex > $oldIndex) {
            //向下移动,介于[$oldIndex,$newIndex] 之间的项目向上移动一位，即排序-1
            D("Item")->where("order_number <= $newIndex and order_number > $oldIndex")->setDec('order_number');
        } else {
            //向上移动,介于[$newIndex,$oldIndex] 之间的项目向下移动一位，即排序+1
            D("Item")->where("order_number >= $newIndex and order_number < $oldIndex")->setInc('order_number');
        }

        //把拖动的项目ID位置更新
        $res = D("Item")->where(array('item_id' => $old_item_id))->save(array('order_number' => $newIndex));

        $this->sendResult($res);
    }

接着把程序里关于项目列表排序的地方修改下，如上面这个PHP文件里的getLists 方法中的

$items = D("Item")->where($where)->order(" addtime desc  ")->page($page, $count)->select();

修改为：

$items = D("Item")->where($where)->order("order_number asc")->page($page, $count)->select();

同理其它如 item_id asc 等需要项目排序的地方都可以按上面的修改，在此不一一列出

数据库增加字段

使用navicat管理工具连接到sqlite数据库，还没连接请参考教程：使用Navicat可视化工具管理远程服务器上的Sqlite数据库

进入数据库后，在item表上右键出来的列表中点击“设计表”

然后点击“增加字段”

增加的字段名为“order_number”，字段信息如下图

最后点左上角的保存即可增加字段，然后关闭当前界面，再回来到表对象中

把order_number字段的值

从0开始初始化它的值，这步非常重要，必须用从0开始连续的数字初始化它的值，否则后续排序保存会出问题

至此操作完成，可以愉快的使用拖动排序了。

本文由小韦云原创，转载请注明出处：https://www.bctos.cn/doc/9/1814，否则追究其法律责任

关键词：sortable showdoc项目排序 拖动排序