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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
js调用刷新界面的几种方式
May 03 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python实现计算图形面积
2021/02/22 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
消防安全宣传标语
2014/06/07 职场文书
大学生就业求职信
2014/06/12 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
长城导游词300字
2015/01/30 职场文书
新生儿未入户证明
2015/06/23 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书