layui基礎2------layui實現表格編輯功能
阿新 • • 發佈：2018-12-23
頁面展示如下：
程式碼展示如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layui</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/common/layui/css/layui.css"> </head> <body> <table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">檢視</a> <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script> <script src="<%= request.getContextPath() %>/common/layui/layui.all.js"></script> <script> layui.config({ version: '1542630986934' //為了更新 js 快取，可忽略 }); layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分頁 ,layer = layui.layer //彈層 ,table = layui.table //表格 ,carousel = layui.carousel //輪播 ,upload = layui.upload //上傳 ,element = layui.element //元素操作 ,slider = layui.slider //滑塊 //監聽Tab切換 element.on('tab(demo)', function(data){ layer.tips('切換了 '+ data.index +'：'+ this.innerHTML, this, { tips: 1 }); }); //執行一個 table 例項 table.render({ elem: '#demo' ,height: 420 ,url: 'cn.chinatowercom.statistics.tenant.wfmultitenancybiz.queryWfmultitenancys.biz.ext' //資料介面 ,title: '使用者表' ,page: true //開啟分頁 ,limit:5 ,limits: [3,5,10,15,20] ,toolbar: true //開啟工具欄，此處顯示預設圖示，可以自定義模板，詳見文件 ,defaultToolbar:['exports','print'] ,cols: [[ //表頭 {type: 'checkbox', fixed: 'left'} ,{field: 'tenantId', title: '應用ID', sort: true, fixed: 'left'} ,{field: 'tenantname', title: '應用名稱', edit: 'text'} ,{field: 'organizationclass', title: '組織機構實現類', sort: true,edit: 'text'} ,{field: 'permissionclass', title: '許可權實現類', sort: true,edit: 'text'} ,{field: 'adminname', title: '使用者名稱', sort: true,edit: 'text'} ,{field: 'createtime', title: '建立時間',edit: 'text'} ,{field: 'updatetime', title: '更新時間', edit: 'text'} ,{field: 'binddatasourceflag', title:'是否繫結資料來源', edit: 'text'} ,{field: 'datasource', title:'資料來源', edit: 'text'} ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo',edit: 'text'} ]] }); //監聽表格複選框選擇 table.on('checkbox(test)', function(obj){ console.log(obj); }); //監聽工具條 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的檢視操作'); } else if(obj.event === 'del'){ layer.confirm('真的刪除行麼', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ //layer.alert('編輯行：<br>'+ JSON.stringify(data)) layer.open({ type: 2, //title: title, //不顯示標題欄 closeBtn: 2, area: ['680px', '90%'], shade: 0.8, id: (new Date()).valueOf(), //設定一個id，防止重複彈出 時間戳1280977330748 //btn: ['儲存', '取消'], btnAlign: 'r', moveType: 1, //拖拽模式，0或者1 content: 'edit.jsp?tenantId=' + data.tenantId+"&tenantname="+ data.tenantname +"&createtime="+ data.createtime+ "&updatetime=" + data.updatetime + "&binddatasourceflag=" + data.binddatasourceflag + "&datasource=" + data.datasource }); } }); }); </script> </body> </html>
編輯功能程式碼：
edit.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>layui</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"> <link rel="stylesheet" href="${pageContext.request.contextPath}/common/layui/css/layui.css"> <script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"> </script> </head> <body> <br/><br/><br/> <form class="layui-form" action="" method="post"> <% String tenantId =request.getParameter("tenantId"); %> <div class="layui-form-item"> <label class="layui-form-label">應用ID</label> <div class="layui-input-block"> <input type="text" name="tenantid" style="width:200px;" autocomplete="off" value="<%=tenantId%>" class="layui-input"> </div> </div> <% String tenantname=request.getParameter("tenantname"); %> <div class="layui-form-item"> <label class="layui-form-label">應用名稱</label> <div class="layui-input-block"> <input type="text" name="tenantname" style="width:200px;" autocomplete="off" value="<%=tenantname%>" class="layui-input"> </div> </div> <% String createtime=request.getParameter("createtime"); %> <div class="layui-form-item"> <label class="layui-form-label">建立時間</label> <div class="layui-input-block"> <input type="text" name="createtime" style="width:200px;" autocomplete="off" value="<%=createtime%>" class="layui-input"> </div> </div> <% String updatetime=request.getParameter("updatetime"); %> <div class="layui-form-item"> <label class="layui-form-label">更新時間</label> <div class="layui-input-block"> <input type="text" name="updatetime" style="width:200px;" autocomplete="off" value="<%=updatetime%>" class="layui-input"> </div> </div> <% String binddatasourceflag=request.getParameter("binddatasourceflag"); %> <div class="layui-form-item"> <label class="layui-form-label">是否繫結資料來源</label> <div class="layui-input-block"> <input type="text" name="binddatasourceflag" style="width:200px;" autocomplete="off" value="<%=binddatasourceflag%>" class="layui-input"> </div> </div> <% String datasource=request.getParameter("datasource"); %> <div class="layui-form-item"> <label class="layui-form-label">資料來源</label> <div class="layui-input-block"> <input type="text" name="datasource" style="width:200px;" autocomplete="off" value="<%=datasource%>" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="<%= request.getContextPath() %>/common/layui/layui.all.js"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use(['form', 'layedit', 'laydate'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; //自定義驗證規則 /* form.verify({ title: function(value){ if(value.length < 5){ return '標題至少得5個字元啊'; } } ,pass: [/(.+){6,12}$/, '密碼必須6到12位'] ,content: function(value){ layedit.sync(editIndex); } }); */ //監聽提交 form.on('submit(demo1)', function(data){ console.info(data); var json = JSON.stringify(data.field); console.info(json); $.ajax({ url:'cn.chinatowercom.statistics.tenant.wfmultitenancybiz.updateWfmultitenancy.biz.ext', type:'POST', data:'{wfmultitenancy:'+json+'}', contentType:'text/json', success:function (msg) { } }); return false; }); }); </script> </body> </html>