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一元操作符(递增、递减)使用示例
Aug 07 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
通过layer实现可输入的模态框的例子
Sep 27 Javascript
Vue父组件监听子组件生命周期
Sep 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
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php实现插入排序
2015/03/29 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python中的集合类型知识讲解
2015/08/19 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python基础之文件读取的讲解
2019/02/16 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
市场营销专业毕业生自荐信
2013/11/02 职场文书
前台领班岗位职责
2013/12/04 职场文书
打架检讨书2000字
2014/02/22 职场文书
先进员工获奖感言
2014/08/14 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
接收函
2019/04/22 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Oracle中日期的使用方法实例
2022/07/07 Oracle