layui 表格新增刪除一行

1.html 代碼

<div class="layui-row layui-col-space5">

            <div>
                <span style="padding-right: 10px;font-size: 1.17em;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;">成本中心</span>
                <button class="layui-btn layui-btn-sm js_table_edit_customer_add">添加</button>
                <button class="layui-btn layui-btn-sm js_table_edit_customer_del">刪除</button>
            </div>
            <div class="layui-form-item">
                <table class="layui-hide" id="js_table_goodsCustomers_edit_table"></table>
            </div>
        </div>

　　

2.js代碼

<script>

    layui.use(['table', 'util', 'form', 'element', 'upload', 'layer', 'laydate'], function () {
        var $ = layui.$
            , table = layui.table
            , element = layui.element
            , form = layui.form
            , upload = layui.upload
            , laydate = layui.laydate;

        element.init();
        form.render();

        //方法級渲染
        table.render({
            elem: '#js_table_goodsCustomers_edit_table',
            data: [],
            even: true,
            method: 'POST',
            cols: [
                [
                    {type: 'checkbox', width: 50},
                    {field: 'customer_num', edit: "text", align: "center", title: '成本中心編號', width: "300"},
                    {field: 'customer_name', edit: "text", align: "center", title: '成本中心名稱', width: "300"},
                    {field: 'budget_price', edit: "text", align: "center", title: '預算額度（按成本中心控制時有效）', width: "400"}
                ]]
        });
        laydate.render({
            elem: '.js_form_customer_comDate'
            , value: new Date()
            , type: 'datetime'
        });

        form.on('select(isAutoDuiZhang)', function (data) {
            if (data.value == '1') {
                $(".js_dui_zhang_day").removeClass("hide");
            } else {
                $(".js_dui_zhang_day").addClass("hide");
            }
        });

        //預算控制
        form.on('select(isBudget)', function (data) {
            if (data.value == '1') {
                $(".js_customer_budget_type").attr("lay-verify", "required");
                $(".js_customer_budget_way").attr("lay-verify", "required");
                form.render();
            } else {
                $(".js_customer_budget_type").removeAttr("lay-verify");
                $(".js_customer_budget_way").removeAttr("lay-verify");
                form.render();
            }
        });

        var cbList = [];
        var layRowNum = 0;
        //添加成本中心
        $(".js_table_edit_customer_add").click(function () {
            var obj = {
                "customer_num": "",
                "customer_name": "",
                "budget_price": 0,
                "id": layRowNum
            };
            cbList = table.cache.js_table_goodsCustomers_edit_table;
            cbList.push(obj);
            layRowNum = layRowNum + 1;
            table.reload("js_table_goodsCustomers_edit_table", {
                data: cbList,
            })

        });

        //刪除成本中心
        $(".js_table_edit_customer_del").click(function () {
            var checkStatus = table.checkStatus('js_table_goodsCustomers_edit_table');
            if (checkStatus.data.length < 1) {
                layer.alert("請選擇一條數據操作");
                return false;
            } else {
                cbList = table.cache.js_table_goodsCustomers_edit_table;
                for (var k = 0; k < checkStatus.data.length; k++) {
                    var _delId = checkStatus.data[k].id;
                    for (var i = 0; i < cbList.length; i++) {
                        var _id = cbList[i].id;
                        if (_id == _delId) {
                            cbList.splice(i, 1);
                            break;
                        }
                    }
                }
                table.reload("js_table_goodsCustomers_edit_table", {
                    data: cbList,
                })
            }

        });


        form.verify({
            phone: [/^1[3|4|5|7|8]\d{9}$/, '手機必須11位，只能是數字！'],
//            wei: function (value) {
//                if (value.length!=18) {
//                    return "三證合一必須18位";
//                }
//            }
        });

        //監聽提交
        form.on('submit(js_form_goods_goodsCustomers_submit)', function (data) {
            if ("" != data.field.comNumber) {
                if (data.field.comNumber.length != 18) {
                    layer.alert("三證合一必須18位");
                    return false
                }
            }

            var isAutoDuiZhang = data.field.isAutoDuiZhang;
            if (isAutoDuiZhang == "1") {
                var duiZhangDay = data.field.duiZhangDay;
                if (duiZhangDay <= 0) {
                    layer.alert("自動對賬天數必須大於0");
                    return false
                }
            } else {
                data.field.duiZhangDay = 0;
            }

            // save(data.field);


        });

        function save(field) {
            $.ajax({
                url: gContextPath + "/a/goods/customers/saveOrUpdate",
                type: "POST",
                dataType: 'json',
                data: field,
                success: function (response) {
                    var returnCode = response.returnCode;
                    if ("1" == returnCode) {
                        var index = layer.alert("提交成功", function () {
                            layer.close(index);
                            dataRefresh('baseCustomers');//刷新數據
                        });
                    } else {
                        layer.alert("提交失敗：" + response.msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.readyState == 0) {
                        layer.alert("提交失敗");
                        return false;
                    }
                }
            });
        }


        //省市區三級聯動-注冊地址
        form.on('select(js_region_level1)', function (data) {
            var regionId = data.value;
            $.ajax({
                url: gContextPath + "/a/goods/customers/city",
                type: "POST",
                dataType: 'json',
                data: {"parentId": regionId},
                success: function (response) {
                    var str = ' <option value="">請選擇</option>';
                    $(".js_region_level2").html(str);
                    $(".js_region_level3").html(str);
                    var returnCode = response.returnCode;
                    if ("1" == returnCode) {
                        var data = response.data;
                        for (var i = 0; i < data.length; i++) {
                            str += '    <option value="' + data[i].region_id + '" >' + data[i].region_name + '</option>';
                        }
                        $(".js_region_level2").html(str);
                        form.render();
                    } else {
                        layer.alert("獲取失敗：" + response.msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.readyState == 0) {
                        layer.alert("獲取失敗");
                        return false;
                    }
                }
            });
        });
        form.on('select(js_region_level2)', function (data) {
            var regionId = data.value;
            $.ajax({
                url: gContextPath + "/a/goods/customers/city",
                type: "POST",
                dataType: 'json',
                data: {"parentId": regionId},
                success: function (response) {
                    var str = ' <option value="">請選擇</option>';
                    $(".js_region_level3").html(str);
                    var returnCode = response.returnCode;
                    if ("1" == returnCode) {
                        var data = response.data;
                        for (var i = 0; i < data.length; i++) {
                            str += '    <option value="' + data[i].region_id + '" >' + data[i].region_name + '</option>';
                        }
                        $(".js_region_level3").html(str);
                        form.render();
                    } else {
                        layer.alert("獲取失敗：" + response.msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.readyState == 0) {
                        layer.alert("獲取失敗");
                        return false;
                    }
                }
            });
        });


        //省市區三級聯動
        form.on('select(js_region_level4)', function (data) {
            var regionId = data.value;
            $.ajax({
                url: gContextPath + "/a/goods/customers/city",
                type: "POST",
                dataType: 'json',
                data: {"parentId": regionId},
                success: function (response) {
                    var str = ' <option value="">請選擇</option>';
                    $(".js_region_level5").html(str);
                    $(".js_region_level6").html(str);
                    var returnCode = response.returnCode;
                    if ("1" == returnCode) {
                        var data = response.data;
                        for (var i = 0; i < data.length; i++) {
                            str += '    <option value="' + data[i].region_id + '" >' + data[i].region_name + '</option>';
                        }
                        $(".js_region_level5").html(str);
                        form.render();
                    } else {
                        layer.alert("獲取失敗：" + response.msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.readyState == 0) {
                        layer.alert("獲取失敗");
                        return false;
                    }
                }
            });
        });
        form.on('select(js_region_level5)', function (data) {
            var regionId = data.value;
            $.ajax({
                url: gContextPath + "/a/goods/customers/city",
                type: "POST",
                dataType: 'json',
                data: {"parentId": regionId},
                success: function (response) {
                    var str = ' <option value="">請選擇</option>';
                    $(".js_region_level6").html(str);
                    var returnCode = response.returnCode;
                    if ("1" == returnCode) {
                        var data = response.data;
                        for (var i = 0; i < data.length; i++) {
                            str += '    <option value="' + data[i].region_id + '" >' + data[i].region_name + '</option>';
                        }
                        $(".js_region_level6").html(str);
                        form.render();
                    } else {
                        layer.alert("獲取失敗：" + response.msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.readyState == 0) {
                        layer.alert("獲取失敗");
                        return false;
                    }
                }
            });
        });
    });

    //校驗手機號
    function checkPhone(phone) {
        var flag = $(phone).val().search(/^\d{0,11}$/);
        if ($(phone).val() && flag == -1) {
            $(phone).val("");
        }
    }
</script>

 

3。效果