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

 更新时间:2019年09月29日 10:07:09   作者:sj0613xz  
今天小编就为大家分享一篇关于layui 实现点击按钮添加一行(方法渲染创建的table),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

目标: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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Tesseract.js使用纯js实现的OCR文字识别

    Tesseract.js使用纯js实现的OCR文字识别

    Tesseract.js是流行的Tesseract OCR引擎的纯Javascript端口,这个库支持100多种语言,自动文本定位和脚本检测,一个简单的界面,用于阅读段落、单词和字符边界框,Tesseract.js既可以在浏览器中运行,也可以在带有NodeJS的服务器上运行
    2023-10-10
  • ES6之Proxy的get方法详解

    ES6之Proxy的get方法详解

    这篇文章主要介绍了ES6之Proxy的get方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 原生JS实现图片轮播切换效果

    原生JS实现图片轮播切换效果

    这篇文章主要为大家详细介绍了原生JS实现图片轮播切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript-TreeView父子联动效果保持节点状态一致

    javascript-TreeView父子联动效果保持节点状态一致

    javascript-TreeView父子联动效果保持节点状态一致...
    2007-08-08
  • js构建二叉树进行数值数组的去重与优化详解

    js构建二叉树进行数值数组的去重与优化详解

    这篇文章主要给大家介绍了关于js构建二叉树进行数值数组的去重与优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • echarts饼图labelLine线的长度自适应设置

    echarts饼图labelLine线的长度自适应设置

    这篇文章主要给大家介绍了关于echarts饼图labelLine线的长度自适应设置的相关资料,在echarts中,饼图的标签线可以通过设置 labelLine属性来自定义位置,需要的朋友可以参考下
    2023-08-08
  • 在百度知道团队中快速审批新成员的js脚本

    在百度知道团队中快速审批新成员的js脚本

    每天都有大量网友申请加入我的团队,于是审核团队新成员成了一个费力气的活儿,在此情况下,我写了个脚本,自动计算他们的回答采纳率,采纳率低于20%的自动打勾 选中,等级太低的人也自动打勾选中
    2014-02-02
  • JS基于面向对象实现的多个倒计时器功能示例

    JS基于面向对象实现的多个倒计时器功能示例

    这篇文章主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • 从柯里化分析JavaScript重要的高阶函数实例

    从柯里化分析JavaScript重要的高阶函数实例

    这篇文章主要为大家介绍了从柯里化分析JavaScript重要的高阶函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript实现仿网易通行证表单验证

    JavaScript实现仿网易通行证表单验证

    这篇文章主要介绍了JavaScript实现仿网易通行证表单验证,十分的实用,有需要的小伙伴可以参考下。
    2015-05-05

最新评论