새로운 빈 행을 추가하려면 layui 테이블 아래의 버튼을 클릭하십시오.

1. 먼저 코드를 업로드합니다.

1. HTML 인터페이스 코드
   
2. js 코드
   

둘, 코드 분석

이것은 단지 내 개인 코드 분석일 뿐이며 자세한 내용을 보려면 layui 공식 웹 사이트로 이동하십시오.

1. 첫 번째 사진 분석

 <table class="layui-hide" id="economicPersonnel-table" lay-filter="economicPersonnel-table"></table>

 <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="addTable">增加</button>
      </div>
</script>

<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 	1. table标签中的id和 lay-filter 的值是用于下面的layui中js调用的
		2.javaScript 中的id,也是要用于 下面的layui中进行js调用
		3.id为'toolbarDemo' 的 javaScript代码下的div,class中的命名规则是调用layui中的按钮组合
			详细信息去官网查看.下面的'button'按钮中class也是调用的layui样式.lay-event这个属性
			的值为自己添加填写,是需要在后面调用事件方法的.
		4.id为'barDemo'的javaScript代码是在后面表格中的样式增加单行删除按钮
-->

2. 두 번째 사진 분석

<script>
 let cols = [
          [
                {
     
     type: 'checkbox'},

                {
     
     title: '项目参与人员表id', field: 'id', align: 'center', hide: true},

                {
     
     title: '项目参与人员表requestid', field: 'requestid', align: 'center', hide: true},

                {
     
     title: '项目参与人员表nodeid', field: 'nodeid', align: 'center', hide: true},

                {
     
     title: '项目参与人员表rowindex', field: 'rowindex', align: 'center', hide: true},

                {
     
     title: '参与人员', field: 'name', align: 'center', edit: 'text'},

                {
     
     title: '联系方式', field: 'telphone', align: 'center', edit: 'text'},


                {
     
     title: '操作', toolbar: '#barDemo', align: 'center'}
            ]
        ];
   // 指定一个cols变量,后面表格样式直接进行调用,更改的话也更为方便
  // 这里只解释最后一行 操作这个点,toolbar中的,是调用第一张图片中的指定的一个id的JavaScript代码
  // 后面的其余操作去layui官网去查看
 </script>

3. 세 번째 사진 분석

<script>
 //人员明细表
        table.render({
     
     
            elem: '#economicPersonnel-table',
            // url: null,
            url: 'list',
            method: 'get',
            cols: cols,
            skin: 'line',
            toolbar: '#toolbarDemo',
        });
        //工具栏事件
        table.on('toolbar(economicPersonnel-table)', function (obj) {
     
     
            switch (obj.event) {
     
     
                case 'addTable'://添加一行
                    if (obj.event === 'addTable') {
     
     
                        var oldData = table.cache["economicPersonnel-table"];
                        var data1 = {
     
     
                            "name":"",
                            "telphone":""
                        };
                        //添加
                        oldData.push(data1);
                        console.log(oldData)
                        //刷新
                        table.reload('economicPersonnel-table', {
     
     
                            url: '',
                            data: oldData
                        });
                    }
            }
            ;
        });
         //监听行工具事件
        table.on('tool(economicPersonnel-table)', function (obj) {
     
     
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
     
     
                layer.confirm('真的删除行么', function (index) {
     
     
                    obj.del();
                    layer.close(index);
                });
            }
        });
</script>   

3. 비즈니스 로직 분석 구현

빈 행을 추가하려면 가짜 데이터를 사용해야 하며 페이지를 새로 고칠 때 이전 테이블의 데이터를 가져와서 행을 추가한 후 새로 고침해야 합니다.

4. 페이지 표시