Layui table 使用记录
表头筛选并记录
本地保存记录,参考链接:实现layui table筛选框记忆功能
开启表头筛选功能 defaultToolbar: ['filter']
表头工具 : 文档
table.render({ //其它参数在此省略
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示' //标题
,layEvent: 'LAYTABLE_TIPS' //事件名,用于 toolbar 事件中使用
,icon: 'layui-icon-tips' //图标类名
}]
});
自动排序
启用前端自动排序 autoSort: true
initSort: {
field: 'dev_id' //排序字段,对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
表格整体模板
table.render({
elem: '#LAY-room-table'
,url: '/api/getTaskList' //模拟接口
,type:'Get'
,where: {"ids":id[0]}
,autoSort: true
,initSort: {
field: 'dev_id' //排序字段,对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'dev_id', title: '设备ID', sort: true}
,{field: 'm_name', title: '姓名', minWidth: 100}
,{field: 'dev_mac', title: '设备MAC', minWidth: 100}
,{field: 'tpl_1_status', title: 'A面状态', minWidth: 100,templet:"#tpl_1_status"}
,{field: 'tpl_2_status', title: 'B面状态', minWidth: 100,templet:"#tpl_2_status"}
,{field: 'disable', title: '启用/禁用', minWidth: 100,templet:"#disable"}
,{field: 'create_time', title: '创建时间', minWidth: 100,templet:"#create_time"}
,{title: '操作', width: 350, align:'center', fixed: 'right', toolbar: '#table-room-btns'}
]]
,page: true
,limit: 30
,limits: [10, 30, 50, 100, 200]
,height: 'full-320'
,text: {
none: '暂无相关数据' //默认:无数据。
}
});
form.select 多选
CSS文件 :formSelects-v4.css
JS文件 : formSelects-v4.js
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects;
});
<select name="m_id" id="LAY-members" lay-verify="required" lay-search lay-filter="LAY-members" xm-select="LAY-members" xm-select-skin="default">
<option value="">姓名</option>
</select>
限制选择上限 $("#LAY-members").attr("xm-select-max",10)
formSelects.on("LAY-members",function(id, vals, val, isAdd, isDisabled){
if(vals.length+1 >= c && isAdd)
{
layer.msg('添加人员不能超过空闲设备数量:'+c)
}
})
table.reload记录checkbox选项
参考链接