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测试题练习代码
Oct 10 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vuex的简单使用教程
Feb 02 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
p5.js实现简单货车运动动画
Oct 23 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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/03/23 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python实现五子棋程序
2020/04/24 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
2014年大学生党员评议表自我评价
2014/09/20 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
银行先进个人总结
2015/02/15 职场文书
于丹论语心得观后感
2015/06/15 职场文书