layui實現table新增行功能 table裡有select可選擇可編輯 並且與form表單一起提交資料儲存
阿新 • • 發佈:2018-12-16
廢話不多說 直接上程式碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/page/public/tag.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8"> <title><jsp:include page="/WEB-INF/page/public/top_title.jsp"/></title> <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"> <link rel="stylesheet" href="${contextPath}/statics/css/layui.css" media="all"/> <style> /* 防止下拉框的下拉列表被隱藏---必須設定--- */ .layui-table-cell { overflow: visible; } .layui-table-box { overflow: visible; } .layui-table-body { overflow: visible; } /* 設定下拉框的高度與表格單元相同 */ td .layui-form-select{ margin-top: -10px; margin-left: -15px; margin-right: -15px; } </style> </head> <body class="childrenBody"> <div style="padding:15px;"> <blockquote class="layui-elem-quote"> <span class="layui-breadcrumb" style="visibility: visible;"> <a href="main.html">首頁</a> <span lay-separator="">/</span> <a href="${contextPath}/storage/toList">物料入庫</a> <span lay-separator="">/</span> <a><cite>物料入庫新增</cite></a> </span> </blockquote> <form class="layui-form" id="fromId" action="#"> <fieldset class="layui-elem-field"> <div style="padding-top:25px;" class="layui-field-box"> <div class="layui-form-item"> <label class="layui-form-label">入庫單編號</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="storagecode" placeholder="請輸入" class="layui-input" lay-verify="required"> </div> <label class="layui-form-label">入庫人</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="storageuser" placeholder="請輸入" class="layui-input"> </div> <label class="layui-form-label">倉庫</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="warehouseid" placeholder="請輸入" class="layui-input"> </div> <label class="layui-form-label">金額</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="money" placeholder="請輸入" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">入庫日期</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="storagetime" placeholder="請選擇" class="layui-input" id="date"> </div> <label class="layui-form-label">制單人</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="documentmaker" placeholder="請輸入" class="layui-input"> </div> <label class="layui-form-label">供應商</label> <div class="layui-input-inline" style="width:13%"> <input type="text" name="supplier" placeholder="請輸入" class="layui-input"> </div> </div> </div> </fieldset> <script type="text/html" id="selectTool"> <select name="selectDemo" lay-filter="selectDemo" lay-search> <option value="">請選擇或輸入</option> {{# layui.each(${selectByExample}, function(index, item){ }} <option>{{ item.materialcode }}</option> {{# }); }} </select> </script> <script type="text/html" id="toolbarDemo"> <div align="right" class="layui-btn-container"> <button id="addTable" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增行</button> </div> </script> <script type="text/html" id="bar"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script> <table id="demo" lay-filter="tableFilter"></table> <div class="layui-form-item" style="margin-top: 30px;text-align: center;"> <button class="layui-btn" lay-submit="" lay-filter="*">儲存</button> <a href="${contextPath}/storage/toList" class="layui-btn layui-btn-primary">返回</a> </div> </form> </div> <script type="text/javascript" src="${contextPath}/statics/layui.js"></script> <script> layui.use(['laydate','table','form','jquery'], function(){ var table = layui.table, form = layui.form, laydate = layui.laydate, $ = layui.jquery; laydate.render({ elem: '#date' //指定元素 }); form.on('select(selectDemo)', function(data){ var elem = data.othis.parents('tr'); var dataindex = elem.attr("data-index"); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ value.materialcode = data.value; } }); if(data.value){ $.ajax({ url:"${contextPath}/storage/toSelect", async:true, type:"post", data:{"materialcode":data.value}, success:function(data){ if(typeof(data) == 'string'){ data = JSON.parse(data) } elem.find("td[data-field='materialname']").children().html(data.data.materialname); elem.find("td[data-field='specifications']").children().html(data.data.specifications); elem.find("td[data-field='warehouseid']").children().html(data.data.warehouseid); elem.find("td[data-field='warningnumber']").children().html(data.data.warningnumber); elem.find("td[data-field='topwarning']").children().html(data.data.topwarning); elem.find("td[data-field='unitprice']").children().html(data.data.unitprice); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ value.materialname = data.data.materialname; value.specifications = data.data.specifications; value.warehouseid = data.data.warehouseid value.warningnumber = data.data.warningnumber; value.topwarning = data.data.topwarning value.unitprice = data.data.unitprice; } }); } }); } }); //第一個例項 var tableIns = table.render({ elem: '#demo' ,toolbar: '#toolbarDemo' ,defaultToolbar:[] ,limit:100 ,cols: [[ //表頭 {field: 'materialcode', title: '物料編號',templet: '#selectTool'} ,{field: 'materialname', title: '物料名稱',edit: 'text'} ,{field: 'number', title: '數量',edit: 'text'} ,{field: 'specifications', title: '規格',edit: 'text'} ,{field: 'warehouseid', title: '倉庫',edit: 'text'} ,{field: 'warningnumber', title: '最低庫存',edit: 'text'} ,{field: 'topwarning', title: '最高庫存',edit: 'text'} ,{field: 'unitprice', title: '單價',edit: 'text'} ,{field: 'subtotal', title: '小計'} ,{title: '操作',align:'center', toolbar: '#bar'} ]] ,data:[{ "materialcode": "" ,"materialname": "" ,"number": "" ,"specifications": "" ,"warehouseid": "" ,"warningnumber": "" ,"topwarning": "" ,"unitprice": "" ,"subtotal": "" }] ,done: function(res, curr, count){ //如果是非同步請求資料方式,res即為你介面返回的資訊。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁資料、count為資料總長度 tabledata = res.data; $('.layui-form-select').find('input').unbind("blur"); $('tr').each(function(e){ var $cr=$(this); var dataindex = $cr.attr("data-index"); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ $cr.find('input').val(value.materialcode); } }); }); //輸入框的值改變時觸發 $('.layui-form-select').find('input').on("change",function(e){ var $cr=$(e.target); console.log($cr); var dataindex = $cr.parents('tr').attr("data-index"); var selectdata = $cr.val(); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ value.materialcode = selectdata; } }); }); var numberelem = $('.layui-table-main').find("td[data-field='number']"); var unitpriceelem = $('.layui-table-main').find("td[data-field='unitprice']"); numberelem.on("input",function(e){ var $cr=$(e.target); var dataindex = $cr.parents('tr').attr("data-index"); var unitprice = $cr.parents('tr').find("td[data-field='unitprice']").children().html(); var sub = unitprice*e.target.value; $cr.parents('tr').find("td[data-field='subtotal']").children().html(sub); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ value.subtotal = sub; } }); }); unitpriceelem.on("input",function(e){ var $cr=$(e.target); var dataindex = $cr.parents('tr').attr("data-index"); var number = $cr.parents('tr').find("td[data-field='number']").children().html(); var sub = number*e.target.value; $cr.parents('tr').find("td[data-field='subtotal']").children().html(sub); $.each(tabledata,function(index,value){ if(value.LAY_TABLE_INDEX==dataindex){ value.subtotal = sub; } }); }); } }); var tabledata; //監聽工具條 table.on('tool(tableFilter)', function(obj){ if(obj.event === 'del'){ obj.del(); }; } ); //頭工具欄事件 table.on('toolbar(tableFilter)', function(obj){ if(obj.event === 'add'){ tabledata.push({ "materialcode": "" ,"materialname": "" ,"number": "" ,"specifications": "" ,"warehouseid": "" ,"warningnumber": "" ,"topwarning": "" ,"unitprice": "" ,"subtotal": "" }) table.reload('demo', { data: tabledata }); }; }); form.on('submit(*)', function(data){ // console.log(data.elem) //被執行事件的元素DOM物件,一般為button物件 // console.log(data.form) //被執行提交的form物件,一般在存在form標籤時才會返回 // console.log(data.field) //當前容器的全部表單欄位,名值對形式:{name: value} // console.log(tabledata) //當前容器的全部表單欄位,名值對形式:{name: value} $.ajax({ url:"${contextPath}/storage/toSave", async:true, type:"post", data:$(data.form).serialize()+'&tabledata='+JSON.stringify(tabledata), success:function(data){ if(typeof(data) == 'string'){ data = JSON.parse(data) } if(data.code == 0){ layer.msg(data.msg); window.location.href="${contextPath}/storage/toList"; }else{ layer.msg(data.msg); } } }); return false; //阻止表單跳轉。如果需要表單跳轉,去掉這段即可。 }); }); </script> </body> </html>