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 02 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 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 flush类输出缓冲剖析
2008/10/19 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
零基础php编程好学吗
2019/10/11 PHP
javascript测试题练习代码
2012/10/10 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Vue 自定义动态组件实例详解
2018/03/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
详解python做UI界面的方法
2019/02/27 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
民主评议政风行风整改方案
2014/09/17 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python