1.最初にコードをアップロードします

html インターフェイスコード
jsコード

二、コード分析

これは私の個人的なコード分析です。詳細を知りたい場合は、layui 公式 Web サイトにアクセスしてください。

最初の写真の分析

 <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>