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实现的一个导航滚动效果具体代码
May 27 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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/23 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
Vue精简版风格概述
2018/01/30 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
教育英语专业毕业生的求职信
2014/03/13 职场文书
文明工地标语
2014/06/16 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
清明节寄语2015
2015/03/23 职场文书
永远是春天观后感
2015/06/12 职场文书
2016年公司新年寄语
2015/08/17 职场文书
青年文明号创建口号大全
2015/12/25 职场文书