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

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给数据表格动态添加一行并跳转到添加行所在页的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui前端框架之table表数据的刷新方法

    最简单的方法就是: //当前页的刷新 $(".layui-laypage-btn")[0].click(); 以上这篇layui前端框架之table表数据的刷新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui实现点击按钮给table添加一行

    •问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能: •原先我写的table是这样实现的: $("#addTable").click(function(){ var tr=" <tr>"+ " <td>11</td>"+ " <td>22</td>"+ " <td>33</td

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

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • 对layui数据表格动态cols(字段)动态变化详解

    如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论. 把表格渲染封装在函数里面,cols_arr是传入的字段数组 function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'post' , page: true //开启分页 , cols: cols_arr , id: 'demo' , limit: 10 , limits: [10,

  • 关于layui 实现点击按钮添加一行(方法渲染创建的table)

    目标:layui 实现点击按钮添加一行 解决方案: 方案1.table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签: 方案2.table 是用方法渲染的方式创建的,写一个button,每次点击按钮,加载数据时添加一个Object; 之前我试过用方案1 来实现该功能,发现这个方案,代码量极大,最困难的地方就是在<tr>中加样式,特别是table中有很多种控件时,样式的添加非常麻烦 ,可参见点击打开链接 后选择使用方案2 ,但是遇到了,添加

  • jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui实现数据表格隐藏列的示例

    在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '编号', sort: true,type:'numbers',width:100} ]] ,page: true }); 我们就会获得一

  • JS实现为表格动态添加标题的方法

    本文实例讲述了JS实现为表格动态添加标题的方法.分享给大家供大家参考.具体如下: JS中的表格对象带有一个createCaption方法用于为表格创建标题caption <!DOCTYPE html> <html> <head> <script> function createCaption() { var x=document.getElementById('myTable').createCaption(); x.innerHTML="My t

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

随机推荐