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中万恶的function实例分析
May 25 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
限制只能输入数字的实现代码
May 16 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
python单线程实现多个定时器示例
2014/03/30 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
详解Python IO编程
2020/07/24 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
小学中秋节活动方案
2014/02/06 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
教职工代表大会主持词
2014/04/01 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android