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。效果

?

轉載于:https://www.cnblogs.com/tangbang/p/10685031.html

總結

以上是生活随笔為你收集整理的layui 表格新增删除一行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。