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

第一步： 在jsp文件中设置按钮

<div class="layui-btn-group demoTable">

 <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
 <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
 <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

第二步：在jsp文件中创建表格

<table class="layui-table" lay-data="{width: 892, height:332, url:'/demo/table/user/', page:true, id:'idTest'}" lay-filter="demo">
 <thead>
  <tr>
   <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
   <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
   <th lay-data="{field:'username', width:80}">用户名</th>
   <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
   <th lay-data="{field:'city', width:80}">城市</th>
   <th lay-data="{field:'sign', width:160}">签名</th>
   <th lay-data="{field:'experience', width:80, sort: true}">积分</th>

   <th lay-data="{field:'classify', width:80}">职业</th>
   <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
   <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>
   <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
  </tr>
 </thead>
</table>

第三步：写js,监听事件

<script>
layui.use('table', function(){
 var table = layui.table;

 var $ = layui.$, active = {
  getCheckData: function(){ //获取选中数据
   var checkStatus = table.checkStatus('idTest')
   ,data = checkStatus.data;
   layer.alert(JSON.stringify(data));
  }
 };
</script>

以上这篇layui获取选中行数据的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于layui数据表格以及传数据的方式

    如下所示: 数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockquote class="layui-elem-quote"> <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type=&

  • 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从数据库中获取复选框的值并默认选中方法

    如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

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

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

  • jQuery实现选中行变色效果(实例讲解)

    //点击复选框添加样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <

  • mui开发中获取单选按钮、复选框的值(实例讲解)

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

  • angularJs中$http获取后台数据的实例讲解

    1.html <div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data"> <td

  • Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)

    Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)

    最近在弄一个项目分析的时候,看到有一个后缀为".sqlite"的数据文件,由于以前没怎么接触过,就想着怎么用python来打开并进行数据分析与处理,于是稍微研究了一下. SQLite是一款非常流行的关系型数据库,由于它非常轻盈,因此被大量应用程序采用. 像csv文件一样,SQLite可以将数据存储于单个数据文件,以便方便的分享给其他人员.许多编程语言都支持SQLite数据的处理,python语言也不例外. sqlite3是python的一个标准库,可以用于处理SQLite数据库. 用s

  • ajax跨域获取网站json数据的实例

    由于自己的公司的项目需要调用视频地址 1:当为链接时:直接在播放器用数据库查找的地址 2:当为外部链接时:直接用window.location.href('数据库查找的地址') 3:当为H5链接时:使用<ifram src="数据库查找的地址">播放 4:当为其余网站链接时,要去第三方网站读取json信息然后把json数据作为url放在播放器中 当为4时,我使用json时会出格式错误 当用jsonp解决跨域问题时,会出现返回格式接收不到 所以我用 public static

  • JQuery Ajax动态加载Table数据的实例讲解

    我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. <select id="type" name="type" onchange="reloadTable(this)"></select> <table id="import-table" class="table table-striped table-bordered table

  • 对Python3+gdal 读取tiff格式数据的实例讲解

    1.遇到的问题:numpy版本 im_data = dataset.ReadAsArray(0,0,im_width,im_height)#获取数据 这句报错 升级numpy:pip install -U numpy 但是提示已经是最新版本 解决:卸载numpy 重新安装 2.直接从压缩包中读取tiff图像 参考:http://gdal.org/gdal_virtual_file_systems.html#gdal_virtual_file_systems_vsizip 当前情况是2层压缩: /

  • python爬虫实现爬取同一个网站的多页数据的实例讲解

    对于一个网站的图片.文字音视频等,如果我们一个个的下载,不仅浪费时间,而且很容易出错.Python爬虫帮助我们获取需要的数据,这个数据是可以快速批量的获取.本文小编带领大家通过python爬虫获取获取总页数并更改url的方法,实现爬取同一个网站的多页数据. 一.爬虫的目的 从网上获取对你有需要的数据 二.爬虫过程 1.获取url(网址). 2.发出请求,获得响应. 3.提取数据. 4.保存数据. 三.爬虫功能 可以快速批量的获取想要的数据,不用手动的一个个下载(图片.文字音视频等) 四.使用py

  • Node.js学习之TCP/IP数据通讯(实例讲解)

    Node.js学习之TCP/IP数据通讯(实例讲解)

    1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用net模块创建TCP服务器 var server = net.createServer([options],[connectionListener]) //options:false当TCP服务器接收到客户端发送的一个FIN包时将会回发一个FIN包 true当TCP服务器接收到客户端发送的一个FIN包时将不会回发FIN包,这使得TCP服务器

随机推荐