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中万恶的function实例分析
May 25 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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 session处理的定制
2009/03/16 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Django分组聚合查询实例分享
2020/04/29 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
工程安全员岗位职责
2014/03/09 职场文书
合伙协议书范本
2014/04/21 职场文书
环保建议书500字
2014/05/14 职场文书
工作目标责任书
2014/07/23 职场文书
个人务虚会发言材料
2014/10/20 职场文书