【Layui】------- Layui table 新增一行数据

JavaScript 同时被 2 个专栏收录
52 篇文章 1 订阅
9 篇文章 0 订阅

1. 插入到表格最前面 代码实例:

2.阿里云米店:https://mi.aliyun.com/shop/36078 

<div id="Gl_Table">
        <table class="layui-hide" id="Table" style="max-height: 500px; height: 500px;" lay-filter="demo"></table>
          
    </div>

 

  1. 
    
    
     var AddData=[
            {审批状态:"已完成",报销人:"liyoubing",部门名称:"开发部门",名称:"名称",描述:"描述",创建时间:"2017-05-03",单据时间:"2017-06-02",总金额:"12"},
            {审批状态:"审核中",报销人:"liyoubing1",部门名称:"开发部门1",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"120"},
            {审批状态:"已完成",报销人:"liyoubing21",部门名称:"开发部门21",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"44"},
            {审批状态:"已完成",报销人:"liyoubing22",部门名称:"开发部门22",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"10"},
            {审批状态:"已完成",报销人:"liyoubing23",部门名称:"开发部门23",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"47"},
        ];
    
      var layer = layui.layer ,form = layui.form,table=layui.table,$=layui.jquery,laydate=layui.laydate;
      table.render({
        elem: '#Table',
        height:700
    // ,url:'/demo/table/user/'
        ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
          layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
          //,curr: 5 //设定初始在第 5 页
          ,groups: 1 //只显示 1 个连续页码
          ,first: false //不显示首页
          ,last: false //不显示尾页
          ,limit: 20
        }
        ,cols: [[
          {checkbox: true},
          {field:'审批状态', width:'10%', title: '审批状态', sort: true}
          ,{field:'报销人', width:'10%', title: '报销人'}
          ,{field:'部门名称', width:'15%', title: '部门名称', sort: true}
          ,{field:'名称', width:'15%', title: '名称'}
          ,{field:'描述', title: '描述', width: "20%"}
          ,{field:'创建时间', width:"15%", title: '创建时间', sort: true}
          ,{field:'单据时间', width:"15%", title: '单据时间', sort: true}
          ,{field:'总金额', width:"10%", title: '总金额'}
          
        ]],
        data:AddData
        
      });
    
    // 新增一行
    $("#btn-add").off("click").on("click",function(){
    
    var data1={审批状态:"已完成",报销人:"liyoubing1722",部门名称:"开发部门1221",名称:"出差调查",描述:"出差",创建时间:"2018-07-25",单据时间:"2018-07-05",总金额:"922"};
    
    AddData.unshift(data1);
    
    table.reload('Table',{
    
    data : AddData
    
    });

2. 插入表格的最后一行 实例代码 

 //新增
  $("#btn-add").off("click").on("click",function(){
     // BottonCommonMenthod();
    // var oldData =  table.cache["Table"];
          
          var data1={审批状态:"已完成",报销人:"liyoubing1722",部门名称:"开发部门1221",名称:"出差调查",描述:"出差",创建时间:"2018-07-25",单据时间:"2018-07-05",总金额:"922"};
          AddData.push(data1);
          table.reload('Table',{
              data : AddData
          });

  });
帮个忙吧 谢谢

 

  • 2
    点赞
  • 21
    评论
  • 8
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 21 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

皮皮冰要做大神

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值