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变量作用域更轻松
Oct 25 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
使用js实现数据格式化
Dec 03 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
纯JS代码实现气泡效果
May 04 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
JS实现简单打字测试
Jun 24 Javascript
js实现弹幕墙效果
Dec 10 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
基于php判断客户端类型
2016/10/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue多次循环操作示例
2019/02/08 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
母亲节感恩活动记录
2014/03/16 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS