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


Posted in Javascript onSeptember 29, 2019

目标:layui 实现点击按钮添加一行

解决方案:

方案1、table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签;

方案2、table 是用方法渲染的方式创建的,写一个button,每次点击按钮,加载数据时添加一个Object;

之前我试过用方案1 来实现该功能,发现这个方案,代码量极大,最困难的地方就是在<tr>中加样式,特别是table中有很多种控件时,样式的添加非常麻烦 ,可参见点击打开链接

后选择使用方案2 ,但是遇到了,添加的对象无法通过加载url来渲染t

原来的数据表格使用方法渲染的方法传的值,其数据是从url中取出,

发现layui的url传值方式,数据格式必须为:

{"code":0,"msg":"","count":4,"data":[{"colName":"ID","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]}

而我在reload方法中存放的data数据格式为

[{"colName":"ID1","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]

因此,解决方案:

1、将新增的data格式修改为url返回的格式,失败;

2、将url的返回值,以data的array格式返回,并作为变量传给data;成功。

全部方法如下:

首先:用ajax请求将数据取出存于变量,将变量赋值给table的data

var tableData=new Array(); // 用于存放表格数据
$.ajax({
   url: "${ctp}/TableOperate/GetColsInfo?tabId=1048586&dbId=1"
   ,type:"get"
   ,async:false
   ,dataType:"json"
   , success: function(result){
    tableData=result;
   console.log(result);
   }
  });
table.render({
   elem: '#baseInfo'
   ,data:tableData
   ,cols: [[
   {title : '序号',type:'numbers',Width: 20}
   /* ,{field:'tableId' , title:'tableId' }
    ,{field:'dbId'  , title:'dbId' } */
    ,{field:'colNo' , title:'colNo' , sort: true}
    ,{field:'domainId' , title:'domainId', minWidth: 120, templet: '#switchTpl', unresize: true }
    ,{field:'colName' , title:'colName' , minWidth: 120, sort: true   , edit: 'text'}
    ,{field:'typeName' , title:'typeName', minWidth: 120, sort: true ,templet: '#selectTpl'}
    ,{field:'scale' , title:'scale' , minWidth: 80, edit: 'text'}
    ,{field:'notNull' , title:'notNull' , minWidth: 100, templet: '#switchNullTpl', unresize: true}
    ]]
   ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
   layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
   ,curr: 1 //设定初始在第 1 页
   ,groups: 1 //只显示 1 个连续页码
   ,first: false //不显示首页
   ,last: false //不显示尾页
   }
   , done: function(res, curr, count){
    }
 
  });

最后,调用按钮的点击方法

//点击加号按钮时,新添一行
  $("#addTable").click(function(){
   var oldData = table.cache["baseInfo"];
   var data1={"colName":"ID2","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0};
   oldData.push(data1);
   table.reload('baseInfo',{
    data : oldData
   });
  });

效果如图所示:

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

以上这篇关于layui 实现点击按钮添加一行(方法渲染创建的table)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 #Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 #Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 #Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 #Javascript
react用Redux中央仓库实现一个todolist
Sep 29 #Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 #Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 #Javascript
You might like
PHP 的几个配置文件函数
2006/12/21 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
JS库之ParticlesJS使用简介
2017/09/12 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python迭代器的使用方法实例
2013/11/21 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python2.7实现邮件发送功能
2018/12/12 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
两道JAVA笔试题
2016/09/14 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
大学毕业感言
2014/01/10 职场文书
夜不归宿检讨书
2014/02/25 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
体育教师个人总结
2015/02/09 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python