MiniUi框架簡單例項
阿新 • • 發佈：2019-01-07
3.彈出框介面，在第三個介面點選修改後彈出，TabEdit.jsp<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/WEB-INF/c.tld" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; String masterId = request.getParameter("masterId"); %> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <base href="<%=basePath%>"> <title>Tab 表單編輯</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="${pageContext.request.contextPath}/scripts/boot.js" type="text/javascript"></script> </head> <body> <div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;background:#C2D3F0" bodyStyle="padding:0;border:0"> <div title="使用者管理" iconCls="icon-user"> <style type="text/css"> body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; } </style> <div style="width:100%"> <div class="mini-toolbar" style="border-bottom:0;padding:0px;"> <table style="width:100%;"> <tr> <td style="width:100%;"><a class="mini-button" iconcls="icon-add" onclick="addRow1()" plain="true">增加</a> <a class="mini-button" iconcls="icon-remove" onclick="removeRow1()" plain="true">刪除</a> <span class="separator"></span> <a class="mini-button" iconcls="icon-save" onclick="saveData1()" plain="true">儲存</a></td> <td style="white-space:nowrap;">年月 <input id="birthday" showNullItem="true" class="mini-monthpicker" style="width:120px;" showClearButton="true" onvaluechanged="search1()" /> 國家 <input id="countrys" showNullItem="true" class="mini-combobox" style="width:80px;" url="" onvaluechanged="search1()" /> <input id="key" class="mini-textbox" emptytext="請輸入姓名" style="width:150px;" onenter="search1()" /> <a class="mini-button" onclick="search1()">查詢</a></td> </tr> </table> </div> </div> <div class="mini-fit"> <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;" url="${pageContext.request.contextPath}/demo/data/AjaxService.jsp?method=SearchEmployeesByMultiSort" idfield="id" allowresize="true" pagesize="20" allowcelledit="true" allowcellselect="true" multiselect="true" editnextonenterkey="true" editnextrowcell="true"> <div property="columns"> <div type="indexcolumn"></div> <div type="checkcolumn"></div> <div field="name" width="100" allowsort="true"> 姓名 <input property="editor" class="mini-textbox" minwidth="200" /> </div> <div name="LoginName" field="loginname" headeralign="center" allowsort="true" width="150"> 員工帳號 <input property="editor" class="mini-textbox" minwidth="200" /> </div> <div field="age" width="100" allowsort="true"> 年齡 <input property="editor" class="mini-spinner" minvalue="0" maxvalue="200" value="25" /> </div> <div name="birthday" field="birthday" width="100" allowsort="true" dateformat="yyyy-MM-dd"> 出生日期 <input property="editor" class="mini-datepicker" /> </div> <div field="remarks" width="120" headeralign="center" allowsort="true"> 備註 <input property="editor" class="mini-textarea" style="width:200px;" minwidth="200" minheight="50" /> </div> <!--ComboBox：本地資料--> <div type="comboboxcolumn" autoshowpopup="true" name="gender" field="gender" width="100" allowsort="true" align="center" headeralign="center"> 性別 <input property="editor" class="mini-combobox" data="Genders" /> </div> <!--ComboBox：遠端資料--> <div type="comboboxcolumn" field="country" width="100" headeralign="center"> 國家 <input property="editor" class="mini-combobox" url="${pageContext.request.contextPath}/demo/data/countrys.txt" /> </div> <div type="checkboxcolumn" field="married" truevalue="1" falsevalue="0" width="60" headeralign="center">婚否</div> </div> </div> </div> </div> <div title="新增管理" iconCls="icon-add"> <style type="text/css"> html,body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; } </style> <div style="mini-fit" id="form1"> <div class="mini-toolbar" style="border-bottom:0;padding:0px;"> <table> <td style="width:100%;"><a class="mini-button" iconcls="icon-save" onclick="saveData2()" plain="true">儲存</a> <a class="mini-button" iconcls="icon-remove" onclick="removeRow2()" plain="true">關閉</a> </td> </table> </div> <div style="width:100%;height:100%;"> <table style="width: 800px"> <tr style="width: 800px"> <td><label style="float:right;">流水號：</label></td> <td style="width: 220px"><input type="hidden" id="JyId" name="Jyid" style="width: 220px" class="mini-textbox" /> </td> <td><label style="float:right;">控制人：</label></td> <td><input id="control" name="control" textName="control" class="mini-buttonedit" required="true" /></td> <td><label style="float:right;">歸檔：</label></td> <td><input id="archive" name="archive" textName="archive" class="mini-buttonedit" class="mini-textbox" /></td> </tr> <tr> <td><label style="float:right;">版本號：</label></td> <td><input id="version" style="width:220px" textName="version" name="version" class="mini-buttonedit" /></td> <td><label style="float:right;">編號：</label></td> <td><input id="number" name="number" class="mini-textbox" /> </td> <td><label style="float:right;">年度：</label></td> <td><input name="year" class="mini-combobox" showNullItem="true" emptytext="請選擇年份" textField="text" valueField="id" data="yearData" /></td> </tr> <tr> <td><label style="float:right;">生效日：</label></td> <td colspan="5"><input id="attachDate" style="width: 220px" name="attachDate" class="mini-datepicker" /></td> </tr> <tr style="height: 40px"> <td style="width:60px;" align="right">檢驗專案：</td> <td colspan="2"><input id="testProject" name="testProject" textName="testProject" class="mini-buttonedit" height="50" style="width: 100%" /></td> <td style="width:60px;" align="right">分析儀器：</td> <td colspan="2"><input id="analyze" name="analyze" textName="analyze" class="mini-buttonedit" height="50" style="width: 100%" /></td> </tr> <tr style="height: 40px"> <td><label style="float:right;">新批號：</label></td> <td colspan="2"><input id="newBeach" name="newBeach" class="mini-textbox" style="width: 100%" /></td> <td><label style="float:right;">舊批號：</label></td> <td colspan="2"><input id="oldBeach" name="oldBeach" class="mini-textbox" style="width: 100%" /></td> </tr> <tr style="height: 50px"> <td style="width:60px;" align="right">判斷標準：</td> <td colspan="5"><input id="judge" name="judge" textName="judge" class="mini-buttonedit" height="50" style="width: 100%" /></td> </tr> <tr style="height: 50px"> <td style="width:60px;" align="right">對比方案：</td> <td colspan="5"><input id="comparison" name="comparison" textName="comparison" class="mini-buttonedit" height="50" style="width: 100%" /></td> </tr> </table> </div> </div> <div class="mini-fit"> <div class="mini-toolbar" style="border-bottom:0;padding:0px;"> <table style="width:100%;"> <tr> <td style="width:100%;"><a class="mini-button" iconcls="icon-add" onclick="addRow2()" plain="true">新增</a></td> </tr> </table> </div> <div id="datagrid2" class="mini-datagrid" style="width:100%;height:350px;" editnextonenterkey="true" editnextrowcell="true" showPager="false" allowcellselect="true" multiselect="true" allowresize="true" fitColumns="false" allowcelledit="true"> <div property="columns"> <div type="indexcolumn">序號</div> <div type="checkcolumn"></div> <div name="Sample" field="sample" width="130px" allowsort="true" headeralign="center"> <b>樣本標識或條碼號</b> <input property="editor" class="mini-textbox" /> </div> <div field="oldx" vtype="required;float" headeralign="center" width="100px"> <b>舊(Y)(%)</b> <input property="editor" class="mini-textbox" /> </div> <div field="newx" vtype="required;float" headeralign="center" width="100px"> <b>新(X)(%)</b> <input property="editor" class="mini-textbox" /> </div> <div field="absolute" width="180px" type="required;float" headeralign="center"> <b>X-Y/Y*100%絕對值或符合性</b> <input property="editor" class="mini-textbox" /> </div> <div field="scope" headeralign="center" width="180px"> <b>可接受範圍(1/2TEa或符合率)</b> <input property="editor" class="mini-textbox" /> </div> </div> </div> <div class="mini-fit" id="form1"> <table style="width: 800px"> <tr style="width: 800px"> <td align="left" colspan="2" style="width: 120px">結論</td> <td style="width: 115px"> <div id="cbl1" class="mini-checkboxlist" repeatItems="1" repeatLayout="table" textField="text" valueField="id" multiSelect="false" data="das"></div></td> <td colspan="3" style="width:360px" valign="bottom">(描述:<input id="Conclusion" name="Conclusion" class="mini-text" style="border:0px;width: 90%" />)</td> </tr> <tr style="width: 800px"> <td align="left">分析人:</td> <td style="width: 100px"><input class="mini-buttonedit" name="analysisPeople" height="50" style="width: 100%" /></td> <td>簽名:</td> <td><input class="mini-buttonedit" name="Remark1" height="50" style="width: 100%" /></td> <td>分析日期:</td> <td><input class="mini-datepicker" name="analysisTime" height="50" style="width: 100%" format="yyyy-MM-dd" /></td> </tr> <tr style="width: 800px"> <td align="left">稽核者:</td> <td style="width: 100px"><input class="mini-buttonedit" name="audit" height="50" style="width: 100%" /></td> <td>組長:</td> <td><input class="mini-buttonedit" name="Remark1" height="50" style="width: 100%" /></td> <td>稽核日期:</td> <td><input class="mini-datepicker" name="auditTime" height="50" style="width: 100%" format="yyyy-MM-dd" /></td> </tr> </table> </div> </div> </div> <div title="查詢管理" showCloseButton="true" iconCls="icon-search"> <style type="text/css"> .New_Button,.Edit_Button,.Delete_Button,.Update_Button,.Cancel_Button { font-size: 11px; color: #1B3F91; font-family: Verdana; margin-right: 5px; } </style> <div class="mini-fit"> <div class="mini-toolbar" style="border-bottom:0;padding:0px;"> <table style="width:100%;"> <tr> <td style="white-space:nowrap;">年度 <input id="year2" showNullItem="true" align="center" data="yearData" width="100px"class="mini-combobox" onvaluechanged="search3()" /> 版本號 <input id="version" showNullItem="true" width="80px" class="mini-combobox" data="varsionData" onvaluechanged="search3()" /> <input id="key2" class="mini-textbox" emptytext="請輸入控制人" style="width:150px;" onenter="search3()" /> <a class="mini-button" onclick="search3()">查詢</a></td> <td style="width:100%;"><a class="mini-button" iconcls="icon-search" onclick="search3()" plain="true">重新整理</a></td> </tr> </table> </div> <div id="datagrid3" class="mini-datagrid" style="width:100%;height:420px;" editnextonenterkey="true" editnextrowcell="true" showPager="true" allowcellselect="true" multiselect="true" allowresize="true" pagesize="10" fitColumns="false" onselectionchanged="onSelectionChanged" selectOnLoad="true" allowcelledit="true" url="${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=SearchEmployeesByMultiSort"> <div property="columns"> <div field="JyId" width="120" visible="true" > ID </div> <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;"> <b>操作</b> </div> <div name="Number" field="Number" width="130px" allowsort="true" headeralign="center"> <b>編號</b> <input class="mini-textbox" /> </div> <div field="Version" vtype="required;float" headeralign="center" width="100px"> <b>版本號</b> <input class="mini-textbox" /> </div> <div field="Archive" vtype="required;float" headeralign="center" width="100px"> <b>歸檔</b> <input class="mini-textbox" /> </div> <div field="Control" width="180px" type="required;float" headeralign="center"> <b>控制人</b> <input class="mini-textbox" /> </div> <div field="Year" headeralign="center" width="180px"> <b>年度</b> <input class="mini-combobox" /> </div> <div name="AttachDate" field="AttachDate" width="130px" allowsort="true" headeralign="center"> <b>生效日</b> <input class="mini-datepicker" /> </div> <div field="TestProject" vtype="required;float" headeralign="center" width="100px"> <b>檢驗專案</b> <input class="mini-textbox" /> </div> <div field="Analyze" vtype="required;float" headeralign="center" width="100px"> <b>分析儀器</b> <input class="mini-textbox" /> </div> <div field="NewBeach" width="180px" type="required;float" headeralign="center"> <b>新批號</b> <input class="mini-textbox" /> </div> <div field="OldBeach" headeralign="center" width="180px"> <b>舊批號</b> <input class="mini-textbox" /> </div> <div field="Judge" width="180px" type="required;float" headeralign="center"> <b>判斷標準</b> <input class="mini-textbox" /> </div> <div field="Comparison" headeralign="center" width="180px"> <b>對比方案</b> <input class="mini-textbox" /> </div> </div> </div> <!-- <div id="editForm1" style="display:none;padding:5px;position:relative;"> --> <!-- <input class="mini-hidden" name="JyId" /> --> <!-- <table style="width:100%;"> --> <!-- <tr> --> <!-- <td style="width:80px;" align="right">編號：</td> --> <!-- <td style="width:150px;" ><input name="Number" class="mini-textbox" /> --> <!-- </td> --> <!-- <td style="width:80px;" align="right">版本號：</td> --> <!-- <td style="width:150px;" ><input name="Version" class="mini-textbox" /> --> <!-- </td> --> <!-- <td style="width:80px;" align="right">歸檔：</td> --> <!-- <td style="width:150px;" ><input name="Archive" class="mini-textbox" /> --> <!-- </td> --> <!-- <td style="width:80px;" align="right">控制人：</td> --> <!-- <td style="width:150px;" ><input name="Control" class="mini-textbox" /> --> <!-- </td> --> <!-- </tr> --> <!-- <tr> --> <!-- <td align="right">年度：</td> --> <!-- <td><input name="Year" showNullItem="true" class="mini-combobox" data="yearData"/> --> <!-- </td> --> <!-- <td align="right">檢驗專案：</td> --> <!-- <td><input name="TestProject" class="mini-textbox" /> --> <!-- </td> --> <!-- <td align="right">新批號：</td> --> <!-- <td><input name="NewBeach" class="mini-textbox" /> --> <!-- </td> --> <!-- <td align="right">舊批號：</td> --> <!-- <td ><input name="OldBeach" class="mini-textbox" /> --> <!-- </td> --> <!-- </tr> --> <!-- <tr> --> <!-- <td style="text-align:center;padding-top:5px;padding-right:20px;" colspan="6"><a class="Update_Button" href="javascript:updateRow();">確 認</a> <a class="Cancel_Button" --> <!-- href="javascript:cancelRow();">取 消</a></td> --> <!-- </tr> --> <!-- </table> --> <!-- </div> --> </div> <div class="mini-fit"> <div id="datagrid4" class="mini-datagrid" style="width:100%;height:380px;" editnextonenterkey="true" editnextrowcell="true" showPager="false" allowcellselect="true" multiselect="true" allowresize="true" idField="id" fitColumns="false" allowcelledit="true" url="${pageContext.request.contextPath}/demo/data/AjaxService3.jsp?method=GetDepartmentEmployees"> <div property="columns"> <div type="indexcolumn">序號</div> <div type="checkcolumn"></div> <div name="Sample" field="Sample" width="130px" allowsort="true" headeralign="center"> <b>樣本標識或條碼號</b> <input class="mini-textbox" /> </div> <div field="Oldx" vtype="required;float" headeralign="center" width="100px"> <b>舊(Y)(%)</b> <input class="mini-textbox" /> </div> <div field="Newx" vtype="required;float" headeralign="center" width="100px"> <b>新(X)(%)</b> <input class="mini-textbox" /> </div> <div field="Absolute" width="180px" type="required;float" headeralign="center"> <b>X-Y/Y*100%絕對值或符合性</b> <input class="mini-textbox" /> </div> <div field="Scope" headeralign="center" width="180px"> <b>可接受範圍(1/2TEa或符合率)</b> <input class="mini-textbox" /> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var Genders = [ {id : 1,text : '男'}, {id : 2,text : '女'} ]; var das = [ {id : 1,text : '可接受'}, {id : 2,text : '不可接受' } ]; var yearData = [ {id : 1,text : '2017'}, {id : 2,text : '2016'} , {id : 3,text : '2015'}, {id : 4,text : '2014'}, {id : 5,text : '2013'}]; var varsionData = [ {id : 1,text : 'Ver1.00'}, {id : 2,text : 'Ver2.00'} , {id : 3,text : 'Ver3.00'}, {id : 4,text : 'Ver4.00'}]; mini.parse(); var grid1 = mini.get("datagrid1"); var grid2 = mini.get("datagrid2"); var grid3 = mini.get("datagrid3"); var grid4 = mini.get("datagrid4"); grid1.load(); grid2.load(); grid3.load(); var editForm = document.getElementById("editForm1"); function search1() { var key = mini.get("key").getValue(); var aa = mini.get("birthday").getText(); var json = { key : key, birthday : aa, countrys : mini.get("countrys").getValue() }; grid1.load(json); } function onKeyEnter1(e) { search(); } function addRow1() { var newRow = { name : "New Row" }; grid1.addRow(newRow, 0); grid1.beginEditCell(newRow, "LoginName"); } function removeRow1() { var rows = grid1.getSelected(); var age = rows.age; if (age < 4) { $.ajax({ url : "${pageContext.request.contextPath}/demo/data/AjaxService.jsp?method=DeletePerSon&id=" + rows.id, success : function(text) { grid1.reload(); }, error : function() { alert("表單載入錯誤"); form.unmask(); } }); } } function saveData1() { var data = grid1.getChanges(); var json = mini.encode(data); grid1.loading("儲存中，請稍後......"); $.ajax({ url : "${pageContext.request.contextPath}/demo/data/AjaxService.jsp?method=SaveEmployees", data : { data : json }, type : "post", success : function(text) { grid1.reload(); }, error : function(jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); } //查詢管理中的表格聯動 function onSelectionChanged(e) { var grid3 = e.sender; var record = grid3.getSelected(); if (record) { grid4.load({JyId:record.JyId}); } } function onActionRenderer(e) { var grid = e.sender; var record = e.record; var uid = record._uid; var rowIndex = e.rowIndex; var s =' <a class="Edit_Button" href="javascript:editRow()" >修改</a>' + ' <a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">刪除</a>'; // if (grid.isEditingRow(record)) { // s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">確定</a>' // + '<a class="Cancel_Button" href="javascript:cancelRow(\'' + uid + '\')">取消</a>'; // } return s; } function editRow() { var row = grid3.getSelected(); if (row) { mini.open({ url: "${pageContext.request.contextPath}/demo/datagrid/TabEdit.jsp", title: "修改", width: 805, height: 850, onload: function () { var iframe = this.getIFrameEl(); var data = { action: "edit", id: row.JyId}; iframe.contentWindow.SetData(data); }, ondestroy: function (action) { grid3.reload(); } }); } else { alert("請選中一條記錄"); } // var row = grid3.getRowByUID(row_uid); // if (row) { //顯示行詳細 // grid3.hideAllRowDetail(); // grid3.showRowDetail(row); // 將editForm元素，加入行詳細單元格內 // var td = grid3.getRowDetailCellEl(row); // td.appendChild(editForm); // editForm.style.display = ""; //表單載入員工資訊 // var form = new mini.Form("editForm1"); // if (grid3.isNewRow(row)) { // form.reset(); // } else { // form.loading(); // $.ajax({ // url: "${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=GetEmployee&JyId=" + row.JyId, // success: function (text) { // var o = mini.decode(text); // form.setData(o); // form.unmask(); // } // }); // } // grid3.doLayout(); // } } function cancelRow() { grid3.reload(); } function delRow() { var rows = grid3.getSelected(); $.ajax({ url : "${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=DeletePerSon&JyId=" + rows.JyId, success : function(text) { if (text == "ok") { grid3.reload(); } else { grid3.reload(); } }, error : function() { alert("表單載入錯誤"); form.unmask(); } }); } function updateRow() { var data = grid3.getChanges(); var json = mini.encode(data); grid3.loading("儲存中，請稍後......"); $.ajax({ url: "${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=SaveEmployees", data: { data: json }, type: "post", success: function (text) { grid3.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); //對樣本表內容進行儲存 // var form = new mini.Form("editForm1"); //對專案表內容進行儲存 // var data = form.getChanges(); //獲取表單多個控制元件的資料 // var json = mini.encode(data); //序列化成JSON // var da = { // submitData : json, // }; // $.ajax({ // url : "${pageContext.request.contextPath}/demo/data/FormService.jsp?method=SaveData", // type : "post", // data : da, // success : function(text) { // grid3.reload(); // } // }); // var form = new mini.Form("editForm1"); // var o = form.getData(); // grid3.loading("儲存中，請稍後......"); // var json = mini.encode([o]); // $.ajax({ // url: "${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=SaveEmployees", // data: { data: json }, // success: function (text) { // grid3.reload(); // }, // error: function (jqXHR, textStatus, errorThrown) { // alert(jqXHR.responseText); // } // }); } function addRow2() { var newRow = { name : "New Row" }; grid2.addRow(newRow, 0); grid2.beginEditCell(newRow, "Sample"); } function removeRow2() { var rows = grid2.getSelected(); $.ajax({ url : "${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=DeletePerSon&JyId=" + rows.JyId, success : function(text) { if (text == "ok") { search(); } else { search(); } }, error : function() { alert("表單載入錯誤"); form.unmask(); } }); } function saveData2() { //校驗 form1.validate(); if (form1.isValid() == false) return; //對樣本表內容進行儲存 var datamx = grid2.getData(); var jsonmx = mini.encode(datamx); //對專案表內容進行儲存 var data = form1.getData(); //獲取表單多個控制元件的資料 var json = mini.encode(data); //序列化成JSON var da = { submitData : json, submitDataMx : jsonmx }; $.ajax({ url : "${pageContext.request.contextPath}/demo/data/FormService.jsp?method=SaveData", type : "post", data : da, success : function(text) { alert(text); } }); } function search3() { var key2 = mini.get("key2").getValue(); var year2 = mini.get("year2").getText(); var version = mini.get("version").getValue(); var json = { key : key2, year:year2, version:version }; grid3.load(json); } grid1.on("celleditenter", function(e) { var index = grid1.indexOf(e.record); if (index == grid1.getData().length - 1) { var row = {}; grid1.addRow(row); } }); grid1.on("beforeload", function(e) { if (grid1.getChanges().length > 0) { if (confirm("有增刪改的資料未儲存，是否取消本次操作？")) { e.cancel = true; } } }); </script> </body> </html>