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 相关文章推荐
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
Vue动态获取width的方法
Aug 22 Javascript
JS自定义滚动条效果
Mar 13 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
解决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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
运动会广播稿20字
2014/02/18 职场文书
辅导员评语
2014/05/04 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
见义勇为事迹材料
2014/12/24 职场文书
博士导师推荐信
2015/03/25 职场文书
深入理解python多线程编程
2021/04/18 Python