使用layui第三方组件实现表格拖动排序

功能描述

我们在开发前端页面时，使用layui框架十分方便，但是默认的表格功能比较单一，无法进行一些复杂的操作，比如拖动行列等，这里介绍一个layui的第三方框架网站，都是各个开发者提供的layui第三方组件，可以使layui更加丰富。包括列表拖拽，条形图等： layui 第三方组件平台；

使用方法

使用的组件除了列表拖拽，还有很多其他的功能，这里我们主要就使用其列表的行列拖拽的功能。 列表拖拽组件页面；在页面中已经说明了使用方法，在这我再结合具体项目说一下使用方法。

1. 下载相关css文件，上面链接中有github和码云的下载地址，由于本篇只使用列表拖拽功能，就下载了soulTable.css，soulTable.js和soulTable.slim.js三个文件；
2. 放入工程目录下，css文件放在src/main/resources/static/febs/css目录下，js文件放在src/main/resources/static/febs/lay/extends/目录下，这个和项目目录和个人习惯有关，不是一定要放在这个目录下；
3. 引入js文件：

layui.config({
        base: './febs/',
        debug: true
    }).extend({
        soulTable: 'lay/extends/soulTable.slim',
    }).use(['index']);

4. 在html中使用：
   html：

<div class="layui-fluid layui-anim febs-anim" id="febs-job-add" lay-title="作业添加">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <div class="layui-row layui-col-space30">
                        <div class="layui-col-md4">
                            <div class="grid-demo">任务列表:</div>
                            <table lay-filter="job-add-task-table" lay-data="{id: 'job-add-task-table'}" id="job-add-task-table"></table>
                        </div>
                        <div class="layui-col-md8">
                            <div class="grid-demo grid-demo-bg1">任务序列(拖动排序):</div>
                            <table lay-filter="job-add-job-table" lay-data="{id: 'job-add-job-table'}" id="job-add-job-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

js文件：

layui.use(['dropdown', 'jquery', 'form', 'table', 'febs', 'soulTable'], function () {
var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            dropdown = layui.dropdown,
            $view = $('#febs-job-add'),
            soulTable = layui.soulTable,
            tableIns;
        form.render();
        initTaskTable() 

        function initTaskTable() {
            tableIns = febs.table.init({
                elem: $view.find('#job-add-task-table'),
                id: 'job-add-task-table',
                url: 【】,
                toolbar: false,
                defaultToolbar: ['filter'],
                cols: [[
                    {field: 'name', title: '任务名称', align: 'center'},
                    {title: '操作', toolbar: '#job-add-task-option', align: 'center'}
                ]]
            });
        }
})