关于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 ready和load事件的区别示例介绍
Aug 30 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
js星星评分效果
Jul 24 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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会员权限控制实现原理分析
2011/05/29 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jquery密码强度校验
2015/12/02 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
模范教师事迹材料
2014/12/16 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python