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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
微信小程序自定义弹出层效果
May 26 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中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python palywright库基本使用
2021/01/21 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
初中科学教学反思
2014/01/21 职场文书
初中同学聚会感言
2014/02/11 职场文书
小学生表扬稿范文
2015/05/05 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers