layui-soul-table插件的使用详解

今天发现一款贼舒服的layui数据表格拖拽插件，官方网址：https://soultable.yelog.org/#/zh-CN/component/changelog

将下面模块放入到自己的项目中

soulTable.js 总入口
tableFilter.js 表头筛选
excel.js excel导出
tableChild.js 子表 可单独使用
tableMerge.js 单元格合并 可单独使用

源码版位置：ext 压缩版位置：docs/ext

 

将模块引入项目中

// 自定义模块，这里只需要开放soulTable即可
layui.config({
    base: 'ext/',   // 模块所在目录
}).extend({                         
    soulTable: 'soulTable'  // 模块别名
});

引入 CSS

将 soulTable.css 引入项目 （在项目根目录可找到）

使用

table.render({
    done: function() {
      // 在 done 中开启
      soulTable.render(this)
    }
})

废话不多说，直接上代码：

<script>
    layui.config({
          base: '__STATIC__/js/lay-module/dragtable/ext/',   // 模块目录
          version: 'v1.3.20'
      }).extend({                         // 模块别名
          soulTable: 'soulTable'
      });
      var tableFilter;
      layui.use('tableFilter', function() {
        tableFilter = layui.tableFilter
     })
    layui.use(['form', 'table','soulTable'], function () {
        var $ = layui.jquery,
            form = layui.form,
            soulTable = layui.soulTable,
            table = layui.table;

        var ins1 = table.render({
            elem: '#currentTableId',
            url: '{:url("yms/link/read")}',
            height: $(document).height() - $('#currentTableId').offset().top - 200,
            cellMinWidth: 60,
            drag: {toolbar: true},
            title: '友情链接表',
            rowDrag: { 
            	trigger: '.layui-icon-snowflake', 
	            done: function(obj) {
		            var data = obj.cache;
		            var ids = '';
		            if (data.length > 0) {
		                for (i = 0; i < data.length; i++) {
		                    ids += data[i].id + ",";
		                }
		            }
		            var $content = '{:url("yms/link/DataSort")}';
	                var i;
	                $.ajax({
	                    url: $content,
	                    type: 'POST',
	                    async: true,
	                    cache: false,
	                    data: {ids:ids},
	                    beforeSend: function () {
	                        i=showLoad();
	                    },
	                    success: function (res) {
	                        if (res.code == 1) {
	                            closeLoad(i);
	                            delete_showSuccess(res.msg);
	                            table.reload('currentTableId');
	                        } else {
	                            closeLoad(i);
	                            layer.alert(res.msg);
	                        }

	                    }
	                })
		        }
		    },
		    soulSort: false,
            cols: [[
            	{type:'numbers' ,fixed: "left"},
                {type: "checkbox", fixed: "left"},
                {field: 'id',  title: '序号',fixed: "left", width: 80, filter: true,sort:true,
                	templet: function(d){
                		return '<div><i class="layui-icon layui-icon-snowflake" />'+d.id+'</div>';
                	}
                },
                {field: 'title',  title: '链接名称', filter: {split:','}, sort:true},
                {field: 'url',  title: '链接地址',filter: true,
                	templet: function(d){
                        return '<a href="'+d.url+'" title="'+d.title+'" target="_blank">'+d.url+'</a>';
                    }
            	},
                {field: 'image',  title: '图片',width:100,align:'center', event: 'show_img', sort: true,filter: true,
                	templet: function(d){
                        return '<i class="fa fa-file-picture-o" aria-hidden="true" title="点击查看"></i>';
                    }
            	},
                {field: 'description',  title: '描述', filter: true},
                {field: 'status', title: '状态', width: 100, filter: true,
                    templet: function(d){
                        if(d.status == 1){
                            return '<span class="layui-badge layui-bg-green"><i class="fa fa-unlock"></i> 启用</span>';
                        }else{
                            return '<span class="layui-badge layui-bg-danger"><i class="fa fa-lock"></i> 禁用</span>';
                        }
                    }
                },
                {field: 'create_time',  title: '录入时间', filter: true},
                {field: 'update_time',  title: '修改时间', sort: true,filter: true},
                {title: '操作', width: 150, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            page: {
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,limits: [10,15,20,30,40,50]
                ,theme: '#2c3e50'
                ,first: true
                ,last: true
            },
            response: {
                statusName: 'status'
                ,statusCode: 200
                ,msgName: 'hint'
                ,countName: 'total'
                ,dataName: 'rows'
            },
            id: 'currentTableId',
            text: {
                none: '暂无相关数据'
            },
            filter: {
                items:['column','clearCache']
                ,bottom: false
                ,cache: true
            },
            done: function (res, curr, count) {
                exportData=res.data;
                soulTable.render(this);
            }
        });
</script>

效果实现：

不懂的小伙伴可以评论留言给我哦！

因为目前该插件仅支持java，所以对于thinkphp5.1来说 筛选功能暂时无法使用，不过小白将会努力的去完善该插件和使用方式，让其在thinkphp5.1中RUN起来，惊奇期待吧