layui基礎2------查詢與檢視功能的實現
阿新 • • 發佈：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> <!-- - Author(s): LiChunSheng - Date: 2018-12-15 20:10:13 - Description: --> <head> <title>介面日誌管理</title> <meta http-equiv="content-type" content="text/html; 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"> <link rel="stylesheet" href="<%= request.getContextPath() %>/common/layui/css/layui.css" media="all"> <script src="<%= request.getContextPath() %>/common/layui/layui.js" charset="utf-8"></script> </head> <body> <div class="layui-fluid" > <div class="layui-card" > <div class="layui-form layui-card-header layuiadmin-card-header-auto" > <div class="layui-form-item" style="margin:2% 14% 0;"> <div class="layui-inline" > <label class="layui-form-label">定義ID</label> <div class="layui-input-inline"> <input type="text" name="processdefid" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">顯示名稱</label> <div class="layui-input-inline"> <input type="text" name="processdefname" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">系統名稱</label> <div class="layui-input-inline"> <input type="text" name="tenantId" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> </div> <div class="layui-card-body"> <div style="padding-bottom: 10px;"> <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">刪除</button> </div> <table class="layui-hide" id="intfData" lay-filter="intfData"></table> </div> </div> </div> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="detail">檢視</a> </script> <script> layui.use('table', function(){ var table = layui.table ,form = layui.form; table.render({ elem: '#intfData' ,url:'cn.chinatowercom.statistics.wflibrary.wflibrary.queryWfprocessdefine.biz.ext' ,toolbar: '#toolbarDemo' ,title: '介面日誌資料' ,defaultToolbar:['exports','print'] ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', fixed: 'left',width:90,unresize: true, sort: true,hide:true} ,{field:'processdefid', title:'程定義ID',width:90,hide:true} ,{field:'processchname', title:'中文名稱',width:200} ,{field:'processdefname', title:'顯示名稱',width:500} ,{field:'description', title:'流程描述',hide:true} ,{field:'currentstate', title:'當前狀態',width:120,hide:true} ,{field:'versionsign', title:'版本標記',width:120,hide:true} ,{field:'versiondesc', title:'版本描述',hide:true} ,{field:'currentflag', title:'業務流程是否為當前版本的標誌',hide:true} ,{field:'processdefContent', title:'業務流程定義內容',hide:true} ,{field: 'createtime', title:'建立時間'} ,{field:'updatetime', title:'更新時間'} ,{field:'tenantId', title:'系統名稱'} ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo',edit: 'text'} ]] ,page: true }); //監聽搜尋 form.on('submit(LAY-app-contlist-search)', function(data){ var field = data.field; //執行過載 table.reload('intfData', { where: field }); }); table.on('tool(intfData)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ //layer.alert('編輯行：<br>'+ JSON.stringify(data)) layer.open({ type: 2, //title: title, //不顯示標題欄 closeBtn: 2, area: ['90%', '90%'], shade: 0.8, id: (new Date()).valueOf(), //設定一個id，防止重複彈出 時間戳1280977330748 //btn: ['儲存', '取消'], btnAlign: 'r', moveType: 1, //拖拽模式，0或者1 content: 'detail.jsp?processdefid=' + data.processdefid, success: function(layero, index){ var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的視窗物件，執行iframe頁的方法： iframeWin.method(data); } }); } }); }); </script> </body> </html>
檢視頁面
（1）流程圖
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <%@include file="/workflow/wfcomponent/web/common/common.jsp"%> <html> <head> <meta charset="utf-8"> <title>layui</title> <link rel="stylesheet" href="<%= request.getContextPath() %>/common/layui/css/layui.css" media="all"> <script src="<%= request.getContextPath() %>/common/layui/layui.js" charset="utf-8"></script> </head> <body > <% String processdefid = request.getParameter("processdefid"); %> <wfBase:processGraph processID="<%=processdefid%>"/> </body> </html>
（2）表單
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <html> <head> <meta charset="utf-8"> <title>layui</title> <link rel="stylesheet" href="<%= request.getContextPath() %>/common/layui/css/layui.css" media="all"> <script src="<%= request.getContextPath() %>/common/layui/layui.js" charset="utf-8"></script> </head> <body > <% String processdefid = request.getParameter("processdefid"); %> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;"> <legend>流程圖</legend> <iframe src="newFile.jsp?processdefid=<%=processdefid%>" frameborder="0" class="layadmin-iframe" style="width:100%;height:50%"></iframe> </fieldset> <br/><br/> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;"> <legend>詳細資訊</legend> <br/><br/> <div style="border:0px solid #F00;margin:0 10% 0;"> <form class="layui-form" action="" method="post"> <table > <tr> <td width="70%"> <div class="layui-form-item" > <label class="layui-form-label">定義ID</label> <div class="layui-input-block" > <input type="text" id="processdefid" name="processdefid" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">顯示名稱</label> <div class="layui-input-block"> <input type="text" id="processdefname" name="processdefname" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> </tr> <tr> <td> <div class="layui-form-item"> <label class="layui-form-label">流程描述</label> <div class="layui-input-block"> <input type="text" id="description" name="description" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">版本標記</label> <div class="layui-input-block"> <input type="text" id="versionsign" name="versionsign" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> <td> </tr> <tr> <td> <div class="layui-form-item"> <label class="layui-form-label">中文名稱</label> <div class="layui-input-block"> <input type="text" id="processchname" name="processchname" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">當前狀態</label> <div class="layui-input-block"> <input type="text" id="currentstate" name="currentstate" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> </tr> <tr> <td> <div class="layui-form-item"> <label class="layui-form-label">版本描述</label> <div class="layui-input-block"> <input type="text" id="versiondesc" name="versiondesc" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">否為當前版本的標誌</label> <div class="layui-input-block"> <input type="text" id="currentflag" name="currentflag" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> </tr> <tr> <td> <div class="layui-form-item"> <label class="layui-form-label">定義內容</label> <div class="layui-input-block"> <input type="text" id="processdefContent" name="processdefContent" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">建立時間</label> <div class="layui-input-block"> <input type="text" id="createtime" name="createtime" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> </tr> <tr> <td> <div class="layui-form-item"> <label class="layui-form-label">更新時間</label> <div class="layui-input-block"> <input type="text" id="updatetime" name="updatetime" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> <td> <div class="layui-form-item"> <label class="layui-form-label">系統名稱</label> <div class="layui-input-block"> <input type="text" id="tenantId" name="tenantId" style="width:350px;" autocomplete="off" value="" class="layui-input" disabled="disabled"> </div> </div> </td> </tr> </table> </form> </div> </fieldset> <script> function method(data){ //alert(JSON.stringify(data)); //alert(document.getElementById('processdefid').value); document.getElementById('processdefid').value=data.processdefid; document.getElementById('processdefname').value=data.processdefname; document.getElementById('description').value=data.description; document.getElementById('versionsign').value=data.versionsign; document.getElementById('processchname').value=data.processchname; document.getElementById('currentstate').value=data.currentstate; document.getElementById('versiondesc').value=data.versiondesc; document.getElementById('currentflag').value=data.currentflag; document.getElementById('processdefContent').value=data.processdefContent; document.getElementById('createtime').value=data.createtime; document.getElementById('updatetime').value=data.updatetime; document.getElementById('tenantId').value=data.tenantId; } </script> </body> </html>