layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？

这个功能layui 本身可能没直接提供给我们相关的功能，需要自己写出来了有几个疑点可能要一一排查出来

核心点: 能不能有一个状态值能判断当前行的数据是否是勾选状态

然后就可以一步一步跟踪判断来获取我们想要的答案了

首选获取一个状态值去判断layui 如何判断用户是否勾选呢我们这个可以利用 js的引用变量的特性追踪变量的变化

开始书写代码

在全局中定义一个数据对象，然后赋值到 layui表格的数据中然后我们查看每次勾选之后我们的数据在经过layui处理之后发生了什么变化

layui.use(['table'], function() {var table = layui.table;var data = [{ id: 1, name: "张三"},{ id: 2, name: "张三" },{ id: 3, name: "张三" },{ id: 4, name: "张三" },{ id: 5, name: "张三" },{ id: 6, name: "张三" },{ id: 7, name: "张三" },{ id: 8, name: "张三" },{ id: 9, name: "张三" },{ id: 10, name: "张三" },{ id: 11, name: "张三"},{ id: 12, name: "张三"},{ id: 13, name: "张三" },{ id: 14, name: "张三" },{ id: 15, name: "张三" },{ id: 16, name: "张三" },]table.render({elem: "#test",page: true,cols: [[ //表头{ type: 'checkbox', fixed: 'left' }, { field: 'id', title: '编号', width: 80 }, { field: 'name', title: '姓名', width: 80 },]],data})// 监听复选框勾选状态table.on('checkbox(test)', function (obj) {console.log(data)});})

点击一次我们看下控制台

看到图中知道了 layui 原来是在变量中加入了属性 LAY_CHECKED 来判断是否选中那我们可以提前加上让他初始渲染的时候就勾住不知道可不可以我们去试试看

{ id: 1, name: "张三", LAY_CHECKED: true}, 在data中手动加上一个属性看下页面中表格的状态

确实渲染的时候就勾中了我们的猜想是正确的那么这下我们的问题好像都可以解决了

2. 首先我们在上面加一个勾选的数量的展示元素追踪用户跨页勾选的个数同时设置一个获取勾选数据的按钮

    <div>勾选的数量: <span id="num">0</span> <button id="getData" class="layui-btn layui-btn-normal">获取勾选的数据</button> </div>

根据 我们之前定义的全局变量 data 数据中每次 LAY_CHECKED = true 的个数来判断勾选的个数这下我们想要的结果就浮出水面了

1. 先提前把我们要赋值的变量全部加上 LAY_CHECKED = false;

data.forEach(item => (item.LAY_CHECKED = false))

监听复选框点击事件

// 监听复选框勾选状态table.on('checkbox(test)', function (obj) {var count = 0;for(var item of data) {item.LAY_CHECKED == true && count ++;}$('#num').text(count); });
// 获取勾选的数据$('#getData').click(function() {var checkData = data.filter( item => item.LAY_CHECKED == true)console.log(checkData)})

然后就大功告成了就是这样简单了我们看下实际的效果吧

关注我持续更新前端知识好像bug 就没有在我手上存活超过两天的(本人现在还是个菜鸟前端, 连vue都不会的小白) 嘻嘻加油

layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？相关推荐

layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
SpreadJS表格中关于下拉框new GC.Spread.Sheets.CellTypes.ComboBox()的设置和使用
SpreadJS表格中关于下拉框的设置和使用 Spreadjs使我们经常用到的一种表格插件,下面是自己使用中的一点心得,希望对大家有帮助,废话不所说,下面进入正题: 1.npm下载 @grapecit ...
VOS中开启媒体转发功能后，计算几种常用编码所需占用的带宽量
VOS中开启媒体转发功能后,计算几种常用编码所需占用的带宽量计算方法如下: 带宽＝包长度 × 每秒包数＝包长度 × (1 / 打包周期) ＝(Ethernet 头 + IP 头 + UDP ...
aspose Word for java 表格中插入斜下框线、斜上框线
aspose Word for java 表格中插入斜下框线.斜上框线 //添加斜线 //拿到表格 Table table = (Table) allTables.get(3); //获取具体的表格中 ...
html表格中插入单行文本框,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...
问题: 1.添加数据后下拉框中未显示带入的数据 2.不可以重复添加相同的数据 3.复选框选中单行或多行以后点击按钮禁用对于行的input 大神们帮忙看看怎么解决啊. Title v-model=&q ...
wps表格在拟合曲线找点_请问在WPS表格中，绘制好标准曲线后，如何在这个曲线上找到准确的一点...
2018-05-18 回答没有相应功能的函数.但可以在图表做好以后在数据点上右击,用"添加趋势线"来实现.→显示网格",在页面上把网格显示出来,一般网格尺寸用默认的&q ...
excel表格数字显示不全_从word中把身份证号码复制到excel表格中完整显示身份证号码后4位...
如果直接从word中复制内容,在excel表格中进行粘贴处理,gif动画演示如下: 在word中,身份证号显示是完整的,而直接复制到excel表格会显示成E*17,这是科学计数法.双击单元格显示出 ...
layui复选框怎么取值_layui获取多选框中的值方法
layui获取多选框中的值方法 HTML: title="=$value;?>"> js: $("input:checkbox[name='standard' ...

layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？

layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？相关推荐

最新文章

热门文章