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函数
Dec 22 Javascript
简单的jQuery入门指引
Jul 28 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
js模块加载方式浅析
Aug 12 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
基于webpack.config.js 参数详解
2018/03/20 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
华为慧通面试题
2012/09/11 面试题
模具数控专业自荐信
2014/01/27 职场文书
化工见习报告范文
2014/10/31 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
Python中else的三种使用场景
2021/06/16 Python