功能描述
我们在开发前端页面时,使用layui框架十分方便,但是默认的表格功能比较单一,无法进行一些复杂的操作,比如拖动行列等,这里介绍一个layui的第三方框架网站,都是各个开发者提供的layui第三方组件,可以使layui更加丰富。包括列表拖拽,条形图等: layui 第三方组件平台;
使用方法
使用的组件除了列表拖拽,还有很多其他的功能,这里我们主要就使用其列表的行列拖拽的功能。 列表拖拽组件页面;在页面中已经说明了使用方法,在这我再结合具体项目说一下使用方法。
- 下载相关css文件,上面链接中有github和码云的下载地址,由于本篇只使用列表拖拽功能,就下载了soulTable.css,soulTable.js和soulTable.slim.js三个文件;
- 放入工程目录下,css文件放在src/main/resources/static/febs/css目录下,js文件放在src/main/resources/static/febs/lay/extends/目录下,这个和项目目录和个人习惯有关,不是一定要放在这个目录下;
- 引入js文件:
layui.config({
base: './febs/',
debug: true
}).extend({
soulTable: 'lay/extends/soulTable.slim',
}).use(['index']);
- 在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'}
]]
});
}
})