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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
JS中作用域以及变量范围分析
Jul 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
PHP5函数小全(分享)
2013/06/06 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php文件操作相关类实例
2015/06/18 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
React Native 图片查看组件的方法
2018/03/01 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python+opencv轮廓检测代码解析
2018/01/05 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
软件测试笔试题
2012/10/25 面试题
销售经理竞聘书
2014/03/31 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers