Layui框架 表格 自动增长

在这里插入图片描述

在这里插入图片描述

<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
	<table class="layui-hide" id="demo" lay-filter="demo"></table>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
    layui.use('table', function(){
      var table = layui.table;
      table.render({
        elem: '#demo'
        ,cols: [[ //标题栏
          {field: 'id', title: 'ID', width: 80, sort: true, edit: 'text'}
          ,{field: 'username', title: '用户名', width: 120 ,edit: 'text'}
          ,{field: 'email', title: '邮箱', minWidth: 150 ,edit: 'text'}
          ,{field: 'sign', title: '签名', minWidth: 160, edit: 'text'}
          ,{field: 'sex', title: '性别', width: 80, edit: 'text'}
          ,{field: 'city', title: '城市', width: 100, edit: 'text'}
          ,{field: 'experience', title: '积分', width: 80, sort: true, edit: 'text'}
        ]]
        ,data: [{}]
        ,even: true
        ,limit: 100
      });
      table.on('edit(demo)', function(obj){
        var data = obj.data;
        console.log(table);

        if (/data-index="([0-9]+)"/.exec(""+obj.tr.selector)["1"] == table.cache.demo.length-1) {
            table.cache.demo.push({});
        }
        table.reload('demo', {data: table.cache.demo});
      });
    });
    </script>
</body>
</html>

posted @ 2021-07-06 17:12  Voca  阅读(396)  评论(1)    收藏  举报