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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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生成自己的LOG文件
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP 数组基础知识小结
2010/08/20 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
python3.4爬虫demo
2019/01/22 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Keras设置以及获取权重的实现
2020/06/19 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
pymysql模块使用简介与示例
2020/11/17 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
董事长秘书职责
2014/01/31 职场文书
新年爱情寄语
2014/04/08 职场文书
求职信范文大全
2014/05/26 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
python利用while求100内的整数和方式
2021/11/07 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers