layui Table默认全选

最新推荐文章于 2023-08-10 17:32:06 发布

小胡仙

最新推荐文章于 2023-08-10 17:32:06 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： layui web

本文链接：https://blog.youkuaiyun.com/weixin_44436078/article/details/108084546

笔记专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用layui框架实现表格数据的全选功能及数据动态加载。通过配置table.render方法，设置数据源URL、解析接口返回数据，并定义单元格最小宽度。同时，文章详细解释了如何监听checkbox事件，实现数据的全选与反选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table class="layui-hide" id="test" data-type="reload" lay-filter="test"></table>

table.render({
elem: '#test'
 , url: ''
 , where: {}
 , parseData: function (res) {
   let count = res.data ? res.data.totalCount : ''
   let list = res.data ? res.data.list : ''
   return {
     "code": res.status, //解析接口状态
     "msg": res.msg, //解析提示文本
     "count": count, //解析数据长度
     "data": list //解析数据列表
   }
 }
 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
 , page: true
 , limit: 1000
 , limits: [200,400,600,800,1000]
 , cols: [[
   { type: 'checkbox' }
   , { field: 'uid', title: 'ID' }
   , { field: 'name', title: '名字' }
 ]]
 , id: 'test'
 ,done: function(res, page, count){
 // 主要代码
 // 全选按钮选中
   $('.layui-table-header input[name="layTableCheckbox"]').prop('checked', true)
   $('.layui-table-header input[name="layTableCheckbox"]').next().addClass('layui-form-checked')
  // 其他按钮选中
   res.data.forEach((element, index) => {
     element["LAY_CHECKED"]='true'
     $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
     $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
   });
 }
});
let cher = []
table.on('checkbox(test)', function(obj){
  // 取消选择，把uid放入cher，否则删除cher里的uid
	if (obj.checked == false) {
	  if (!cher.includes(obj.data.uid)){
	    console.log('you')
	    cher.push(obj.data.uid)
	  }
	} else {
	  let n = cher.indexOf(obj.data.uid)
	  cher.splice(n, 1)
	}
	console.log(cher)
});