layui-table表复选框勾选的所有行数据获取的例子

项目需求，可以用复选框勾选项目进行提交，如下表

<table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3">

  <thead>
  <tr>
    <th lay-data="{type:'checkbox'}">ID</th>
    <th lay-data="{field:'id', width:80}">ID</th>
    <th lay-data="{field:'t1'}">测试项</th>
    <th lay-data="{field:'t2', edit: 'text'}">标定参数</th>
    <th lay-data="{field:'t3'}">标定值</th>
  </tr>
  </thead>
</table>

我们已经获取到了表中所有行的数据，全选，部分选都可行，不用选复选框遍历的方式去获取数据

table.on('checkbox(test3)', function(obj){
      var checkStatus = table.checkStatus('test3');
      console.log(checkStatus.data)//选中行数据
      console.log(checkStatus.data.length)

      })

$('.ttes').click(function () {
      var index = parent.layer.getFrameIndex(window.name);
      var checkStatus = table.checkStatus('test3');
      console.log(checkStatus.data)//选中行数据
      var items = checkStatus.data;

以上这篇layui-table表复选框勾选的所有行数据获取的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

  • Layui数据表格之获取表格中所有的数据方法

    数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • layui获取选中行数据的实例讲解

    第一步: 在jsp文件中设置按钮 <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type="getCheckData">获取选中行数据</button> <button class="layui-btn" data-type="getCheckLength">获取选

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

  • layui的table单击行勾选checkbox功能方法

    如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox.find(".l

  • layui-table表复选框勾选的所有行数据获取的例子

    项目需求,可以用复选框勾选项目进行提交,如下表 <table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3"> <thead> <tr> <th lay-data="{type:'checkbox'}">ID</th> <th lay-data="

  • js html css实现复选框全选与反选

    本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content=&quo

  • JS中如何实现复选框全选功能

    js实现复选框全选功能,代码如下所示: <? include_once("inc/auth.inc.php"); include_once("inc/utility_all.php"); include_once("inc/utility_org.php"); $connstatus = ($connstatus) ? true : false; if(!isset($TYPE)) $TYPE="0"; $ITEMS_I

  • jquery复选框多选赋值给文本框的方法

    本文实例讲述了jquery复选框多选赋值给文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>jquery点击复选框触发事件给input赋值</title><base target="_blank" />  <m

  • 微信小程序获取复选框全选反选选中的值(实例代码)

    微信小程序获取复选框全选反选选中的值(实例代码)

    wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view> </view> <

  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能

    本文实例为大家分享了JavaScript实现复选框全选的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&quo

  • javascript实现复选框全选或反选

    以下是用原生js实现的复选框全选/反选的实现,选中checkbox的时候,实现全选的效果,并且样式发生改变. 代码最简洁,js行为优化版,复制粘贴即可使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框全选/反选效果实现</title> <style> body,dl,dt,dd,p

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • javaScript实现复选框全选反选事件详解

    javaScript实现复选框全选反选事件详解

    本文实例为大家分享了javaScript实现复选框全选反选的具体代码,供大家参考,具体内容如下 代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title

  • vue+vant-UI框架实现购物车的复选框全选和反选功能

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch

随机推荐