layui 数据表格新增一行

第一件事先把闲心大佬的官网贴上：layui 官网

layui 数据表格中新增一行

复制代码

官网拉下来的一个 大体结构就这样  


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.9.9/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-templet"></table>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.9/dist/layui.js"></script>
<script>
layui.use(['table'], function(){
  var table = layui.table;
  var form = layui.form;
  
  // 创建渲染实例
  table.render({
    elem: '#ID-table-demo-templet',
    url:'/static/json/2/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    height: '315px',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      // 未自定义模板的普通列
      {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
      // 模板 - 选择器写法
      {field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'},
      // 模板 - 函数写法
      {field:'sex', width:60, title: '性别', templet: function(d){
        if(d.sex === '男'){
          return '<span style="color: blue">♂</span>';
        } else {
          return '<span style="color: pink">♀</span>';
        }
      }},
      // 模板 - 普通字符写法
      {field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>'},
      // 模板中可包含任意字段、任意内容（如表单等）
      {title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},
      {title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
    ]]
  });
  
  // 状态 - 开关操作
  form.on('switch(demo-templet-status)', function(obj){
    var id = this.value;
    var name = this.name;
    layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);
  });
});
</script>

</body>
</html>

直接按钮调用下面使用方法：

复制代码

我是在表头按钮增加的 


         switch (obj.event) {
                case 'getAddline':
                    var getTblist = layui.table.cache['表格设置的id'];   //获取当前表格中数据
                            //创建添加行 
                             newBak = {   // key字段是上面的  field 设置的名称
                            "fddesc": ""
                            , "xlh": ""
                            , "fdname": ""
                            , "fddefault": ""
                        };
                        getTblist.push(newBak);  // 创建的塞入原本的 然后重载
                        // console.log('加载一次 新增一行字段!')
                        table.reloadData('表id', {  // 我这个reloadData是只重载数据和结构无关 可去官网查看 
                            data: getTblist,
                        }, function (res) {
                            console.error(res);
                        });
                     break;
                    }；

可用直接用

layui 数据表格 新增一行

layui 数据表格新增一行