Layui给数据表格动态添加一行并跳转到添加行所在页的方法


Posted in Javascript onAugust 20, 2018

Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。

笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并没有给出实现,需要自己手动解决。

解决思路及方案

简单分析:根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行样式及功能一样,就必须给tr设置和渲染出来的每一行一样的样式,利用jQuery去完成这个添加这样一个tr工程量实在太大了,因此需要换一种方案。

数据表格中的原始数据:查看Layui官方文档,采用方法渲染或者自动渲染的方式去生成数据表格时,数据表格中的数据是通过直接赋值的方式或者异步加载的方式获得原始的数据。

直接赋值方式原始的数据其实就是一个对象数组,如[{}, {}, {}, {}, …]。

异步加载方式原始的数据发请求从后端取,然后后端返回给前端的一个json对象,这里要求后端返回给前端的json对象要符合Layui数据表格能渲染的格式,Layui数据表格默认支持的后端返回给前端的json对象格式如下,各个属性具体描叙参照官方文档:

{
  code: 0, 
  msg: "", 
  count: 1000, 
  data: [] 
 }

数据表格的重载:数据表格重载可以将新拿到的原始数据重新渲染到数据表格中,Layui提供的是方法是table.reload(ID, options)

ID:table的id属性值

options:为Layui数据表格的基础参数,具体参照官方文档

下面给出针对原始数据是通过直接赋值的方式、采用方法渲染的数据表格动态添加一行的思路及解决方法

思路:通过上述讲解,动态添加一行其实可以转换为:

拿到数据表格中的所有数据后,也就是拿到一个对象数组,在那个对象数组最后添加一个与拿到的对象数组中对象相同、但其所有属性的属性值为空的一个空对象。(那数据表格中所有数据可参照我的另一篇Layui数据表格之获取表格中所有的数据)

利用table.reload(ID, options)方法将添加了一个“空对象”的数组重新加载渲染到数据表格即可。

跳转到动态添加行所在页,只要设置table.reload(ID, options)中options的page基础参数即可,将page参数的curr属性值设置为动态添加行所在页页码(页码根据数据表格每页显示的记录数以及添加了一行后数据表格中总的记录数自己算)即可。2、3步代码如下():

//获取每页显示的记录数、当前记录总数,计算新添加的记录在第几页
var totalRecord = tableContent.length;
var pageSize = $(".layui-laypage-limits").find("select").val();
if($.type(pageSize) == "string"){
 pageSize = parseInt(pageSize);
}

var currPageNo = Math.ceil(totalRecord / pageSize);
console.log("每页显示的记录数:"+pageSize+" 类型:"+$.type(pageSize)+" 总的记录数:"+totalRecord+" 类型:"+$.type(totalRecord)
  +" 新增行所在页码:"+currPageNo+" 类型:"+$.type(currPageNo));

// 重载表格并跳转到最后修改或者添加数据的那一页
table.reload('viewTable', {
  page : {
   curr : currPageNo
  },
  data : tableContent
});

最终效果图:

动态添加一行前(请将图片保存到本地查看大图)

Layui给数据表格动态添加一行并跳转到添加行所在页的方法

动态添加一行后(请将图片保存到本地查看大图)

Layui给数据表格动态添加一行并跳转到添加行所在页的方法

以上这篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
You might like
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
ES6入门教程之Class和Module详解
2017/05/17 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
Python中static相关知识小结
2018/01/02 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python对html过滤处理的方法
2018/10/21 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
历史专业学生的自我评价
2014/02/28 职场文书
小学生综合素质评语
2014/04/23 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
英语演讲开场白
2015/05/29 职场文书
js实现自动锁屏功能
2021/06/02 Javascript