layui table 新增一行数据

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

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




 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
          });

  });

layui table 新增一行数据

猜你喜欢