Layui table 使用记录：table 排序；select多选

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 多选

参考链接 Hub

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选项

参考链接