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 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue实现信息管理系统
May 30 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php的dl函数用法实例
2014/11/06 PHP
curl和libcurl的区别简介
2015/07/01 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python文件写入实例分析
2015/04/08 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python 反向输出字符串的方法
2018/07/16 Python
Python使用python-docx读写word文档
2019/08/26 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
运动会广播稿60字
2014/01/15 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
理财投资建议书
2014/03/12 职场文书
婚礼司仪主持词
2014/03/14 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书