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


Posted in Javascript onAugust 20, 2018

数据表格中的数据是通过直接赋值的方式。这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。

1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。

2、将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数。

3、获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据。

// 存放数据表格中的数据的对象数组tableContent
var tableContent = new Array();

table.render({
 elem : '#viewTable',
 height : 325,
 even: true,
 text: {
 none: '您没有选中任何字段!'
 },
 // 拿对象数组tableContent中的数据作为原始数据渲染数据表格
 data : tableContent, 
 page : {
 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
 },
 limit : 5,
 limits : [5, 10, 15, 20, 25],
 cellMinWidth: 80,
 cols:[[
 {type:'checkbox',fiexd : 'left'},
 {title : '序号',type:'numbers'},
 {field : 'column',title : '列',align:'center'},
 {field : 'alias',title : '别名',align:'center',edit : 'text'},
 {title : '操作',fiexd : 'right',align:'center', toolbar: '#viewBar'}
 ]],
 done : function(res, curr, count){
 // do something...
 }
});

数据表格中的数据是通过异步请求的方式

直接通过table.render()的done参数即可获得,该参数的值是一个数据渲染完的回调,无论是直接赋值还是异步请求数据,在渲染完之后都会触发该回调。注意:使用直接赋值方式给Laytable原始数据时,该方法获取到的是数据表格中当前页的数据,并不是表格中的所有数据,想获取表格中所有数据必须按照上面“数据表格中的数据是通过直接赋值的方式”的方法

table.render({ //其它参数在此省略
 done: function(res, curr, count){
 //如果是异步请求数据方式,res即为你接口返回的信息。
 //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
 console.log(res);
 //得到当前页码
 console.log(curr);
 //得到数据总量
 console.log(count);
 }
});

以上这篇Layui数据表格之获取表格中所有的数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
微信小程序如何获取用户收货地址
Nov 27 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
Vue常用指令详解分析
Aug 19 #Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
layui获取选中行数据的实例讲解
Aug 19 #Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 #Javascript
菊花转动的jquery加载动画效果
Aug 19 #jQuery
You might like
PHP封装的字符串加密解密函数
2015/12/18 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python实现简单银行管理系统
2019/10/25 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Django如何实现防止XSS攻击
2020/10/13 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
python链表类中获取元素实例方法
2021/02/23 Python
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
MySQL面试题
2014/01/12 面试题
一年级学生评语
2014/04/23 职场文书
社区维稳工作方案
2014/06/06 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js