特效描述:利用jQuery實現 Layui 表格添加 行刪除 保存代碼,利用jQuery實現Layui表格添加行刪除保存代碼
代碼結構
1. 引入CSS
<link rel="stylesheet" href="layui/css/layui.css" /> <link rel="stylesheet" href="layui/css/layui.css" />
2. 引入JS
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="layui/layui.js?v=201805080202" charset="utf-8"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="layui/layui.js?v=201805080202" charset="utf-8"></script>
3. HTML代碼
?<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <title></title> <!--[if lt IE 9]> <![endif]--> <style type="text/css"> /*您可以將下列樣式寫入自己的樣式表中*/ .childBody{padding: 15px;} /*layui 元素樣式改寫*/ .layui-btn-sm{line-height: normal; font-size: 12.5px;} .layui-table-view .layui-table-body{min-height: 256px;} .layui-table-cell .layui-input.layui-unselect{height: 30px; line-height: 30px;} /*設置 layui 表格中單元格內容溢出可見樣式*/ .table-overlay .layui-table-view, .table-overlay .layui-table-box, .table-overlay .layui-table-body{overflow: visible;} .table-overlay .layui-table-cell{height: auto; overflow: visible;} /*文本對齊方式*/ .text-center{text-align: center;} </style> </head> <body class="childBody"> <section class="layui-col-md10" style="margin: 0 auto; float: none;"> <div class="layui-card"> <div class="layui-card-header">基于 layui table 添加一行并實現在編輯行記錄后保存數據的方法</div> <div class="layui-card-body layui-text"> <div id="toolbar"> <div> <button type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="添加一行"> <i class="layui-icon layui-icon-add-1"></i> 添加一行 </button> </div> </div> <div id="tableRes" class="table-overlay"> <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table> </div> <div id="action" class="text-center"> <button type="button" name="btnSave" class="layui-btn" data-type="save"><i class="layui-icon layui-icon-ok-circle"></i>保存</button> <button type="reset" name="btnReset" class="layui-btn layui-btn-primary">取消</button> </div> </div> </div> <!--保存結果輸出--> <div class="layui-card"> <div class="layui-card-header">保存結果輸出</div> <div class="layui-card-body layui-text"> <blockquote class="layui-elem-quote layui-quote-nm"> <pre id="jsonResult"><span class="layui-word-aux">請點擊“保存”后查看輸出信息……</span></pre> </blockquote> </div> </div> </section> <!--recommended script position--> <script type="text/javascript"> //準備視圖對象 window.viewObj = { tbData: [{ tempId: new Date().valueOf(), type: 2, name: '測試項名稱', state: 1 }], typeData: [ {id: 1, name: '分類一'}, {id: 2, name: '分類二'}, {id: 3, name: '分類三'}, {id: 4, name: '分類四'} ], renderSelectOptions: function(data, settings){ settings = settings || {}; var valueField = settings.valueField || 'value', textField = settings.textField || 'text', selectedValue = settings.selectedValue || ""; var html = []; for(var i=0, item; i < data.length; i++){ item = data[i]; html.push('<option value="'); html.push(item[valueField]); html.push('"'); if(selectedValue && item[valueField] == selectedValue ){ html.push(' selected="selected"'); } html.push('>'); html.push(item[textField]); html.push('</option>'); } return html.join(''); } }; //layui 模塊化引用 layui.use(['jquery', 'table', 'layer'], function(){ var $ = layui.$, table = layui.table, form = layui.form, layer = layui.layer; //數據表格實例化 var tbWidth = $("#tableRes").width(); var layTableId = "layTable"; var tableIns = table.render({ elem: '#dataTable', id: layTableId, data: viewObj.tbData, width: tbWidth, page: true, loading: true, even: false, //不開啟隔行背景 cols: [[ {title: '序號', type: 'numbers'}, {field: 'type', title: '分類(type)', templet: function(d){ var options = viewObj.renderSelectOptions(viewObj.typeData, {valueField: "id", textField: "name", selectedValue: d.type}); return '<a lay-event="type"></a><select name="type" lay-filter="type"><option value="">請選擇分類</option>' + options + '</select>'; }}, {field: 'name', title: '名稱(name)', edit: 'text'}, {field: 'state', title: '是否啟用(state)', event: 'state', templet: function(d){ var html = ['<input type="checkbox" name="state" lay-skin="switch" lay-text="是|否"']; html.push(d.state > 0 ? ' checked' : ''); html.push('>'); return html.join(''); }}, {field: 'tempId', title: '操作', templet: function(d){ return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-delete"></i>移除</a>'; }} ]], done: function(res, curr, count){ viewObj.tbData = res.data; } }); //定義事件集合 var active = { addRow: function(){ //添加一行 var oldData = table.cache[layTableId]; console.log(oldData); var newRow = {tempId: new Date().valueOf(), type: null, name: '請填寫名稱', state: 0}; oldData.push(newRow); tableIns.reload({ data : oldData }); }, updateRow: function(obj){ var oldData = table.cache[layTableId]; console.log(oldData); for(var i=0, row; i < oldData.length; i++){ row = oldData[i]; if(row.tempId == obj.tempId){ $.extend(oldData[i], obj); return; } } tableIns.reload({ data : oldData }); }, removeEmptyTableCache: function(){ var oldData = table.cache[layTableId]; for(var i=0, row; i < oldData.length; i++){ row = oldData[i]; if(!row || !row.tempId){ oldData.splice(i, 1); //刪除一項 } continue; } tableIns.reload({ data : oldData }); }, save: function(){ var oldData = table.cache[layTableId]; console.log(oldData); for(var i=0, row; i < oldData.length; i++){ row = oldData[i]; if(!row.type){ layer.msg("檢查每一行,請選擇分類!", { icon: 5 }); //提示 return; } } document.getElementById("jsonResult").innerHTML = JSON.stringify(table.cache[layTableId], null, 2); //使用JSON.stringify() 格式化輸出JSON字符串 } } //激活事件 var activeByType = function (type, arg) { if(arguments.length === 2){ active[type] ? active[type].call(this, arg) : ''; }else{ active[type] ? active[type].call(this) : ''; } } //注冊按鈕事件 $('.layui-btn[data-type]').on('click', function () { var type = $(this).data('type'); activeByType(type); }); //監聽select下拉選中事件 form.on('select(type)', function(data){ var elem = data.elem; //得到select原始DOM對象 $(elem).prev("a[lay-event='type']").trigger("click"); }); //監聽工具條 table.on('tool(dataTable)', function (obj) { var data = obj.data, event = obj.event, tr = obj.tr; //獲得當前行 tr 的DOM對象; console.log(data); switch(event){ case "type": //console.log(data); var select = tr.find("select[name='type']"); if(select){ var selectedVal = select.val(); if(!selectedVal){ layer.tips("請選擇一個分類", select.next('.layui-form-select'), { tips: [3, '#FF5722'] }); //吸附提示 } console.log(selectedVal); $.extend(obj.data, {'type': selectedVal}); activeByType('updateRow', obj.data); //更新行記錄對象 } break; case "state": var stateVal = tr.find("input[name='state']").prop('checked') ? 1 : 0; $.extend(obj.data, {'state': stateVal}) activeByType('updateRow', obj.data); //更新行記錄對象 break; case "del": layer.confirm('真的刪除行么?', function(index){ obj.del(); //刪除對應行(tr)的DOM結構,并更新緩存 layer.close(index); activeByType('removeEmptyTableCache'); }); break; } }); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>