前臺miniui ajax 增刪改查例子 ssh
阿新 • • 發佈：2019-01-09
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 相容性 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- 快取 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="<%=request.getContextPath()%>/gjres/htwyRes/miniui/scripts/boot.js"type="text/javascript"></script>
<title>銀行專戶資訊</title>
</HEAD>
<BODY style="height: 100%;width:100%;">
<div style="margin: 10px;">
<a class="mini-button" iconCls="icon-search" id="searchButton" onclick="Search()">查詢</a>
<a class="mini-button" iconCls="icon-add" id="addButton" onclick="add()">增加</a>
<a class="mini-button" iconCls="icon-remove" id="delButton" onclick="remove()">刪除</a>
<!-- <a class="mini-button" iconCls="icon-upload" id="exportButton" onclick="ExportExcelminiUI()">匯出</a>
--><input id="panelIndex" class="mini-hidden"/>
</div>
<div id="datagrid1" class="mini-datagrid"
style="width: 100%; height: 90%;" url="<%=request.getContextPath()%>/miniui/loadDataAction.do"
idField="ID" allowResize="true" pageSize="15" sizeList="[15,25,50,100]"
allowCellSelect="true" multiSelect="true" allowCellEdit="true" sortField="SUBJECT_NO" sortOrder="DESC" >
<div property="columns">
<div type="checkcolumn" name="checkcolumn"></div>
<div type="indexcolumn" width="50" headerAlign="center" allowSort="true">序號</div>
<div field="ID" visible="false"></div>
<div name="action" width="80" headerAlign="left" align="left" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
<div field="SUBJECT_NO" width="60" headerAlign="left" renderer="onGenderRenderer">科目編號</div>
<div field="BANK_ACCOUNT_NUMBER" width="60" headerAlign="left" allowSort="true">銀行專戶號碼</div>
<div field="BANK_ACCOUNT_NAME" width="60" headerAlign="left" allowSort="true">銀行專戶名稱</div>
<!-- <div field="BANK_CODE" width="60" headerAlign="left" allowSort="true">銀行程式碼</div>
--> <div field="BANK_NAME" width="60" headerAlign="left" allowSort="true" renderer="onAccountBank">銀行名稱</div>
<div field="OPEN_DATE" width="60" headerAlign="left" allowSort="true" dateFormat="yyyy-MM-dd">開戶日期</div>
<div field="ACCOUNT_NATURE" width="60" headerAlign="left" renderer="onAccountNature">專戶性質 </div>
<div field="CANCELLATION_DATE" width="60" headerAlign="left" allowSort="true" dateFormat="yyyy-MM-dd">銷戶日期 </div>
</div>
</div>
<div id="editWindow" class="mini-window" title="銀行專戶資訊" style="width:1000px;"showModal="true" allowResize="true" allowDrag="true" >
<div id="editform" class="form" >
<input class="mini-hidden" name="id"/>
<input class="mini-hidden" name="pid" />
<input class="mini-hidden" name="status" value="0"/>
<table style="width:100%;">
<tr>
<td style="width:80px;">科目編號：</td>
<td style="width:150px;"><input name="subjectNo" class="mini-combobox"
url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=no" textField="text" valueField="id" /></td>
<td style="width:100px;">銀行專戶號碼：</td>
<td style="width:150px;"><input name="bankAccountNumber" class="mini-textbox" /></td>
<td style="width:100px;">銀行專戶名稱：</td>
<td style="width:150px;"><input name="bankAccountName" class="mini-textbox" /></td>
</tr>
<tr>
<!-- <td>銀行程式碼：</td>
<td><input name="bankCode" class="mini-textbox"/></td> -->
<td>銀行名稱：</td>
<td><input name="bankName" class="mini-combobox" url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=bank" textField="text" valueField="id"/></td>
<td>開戶日期：</td>
<td><input id="openDate" name="openDate" class="mini-datepicker" showTime="true" /></td>
</tr>
<tr>
<td>專戶性質：</td>
<td><input name="accountNature" class="mini-combobox"
url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=nature" textField="text" valueField="id" />
</td>
<td>銷戶日期：</td>
<td><input id="cancellationDate" name="cancellationDate" class="mini-datepicker" /> </td>
<td colspan="2"></td>
</tr>
<tr>
<td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
<a class="mini-button" onclick="updateRow()" style="width:60px;margin-right:20px;">確定</a>
<a class="mini-button" onclick="cancelRow()" style="width:60px;">取消</a>
</td>
</tr>
</table>
</div>
</div>
<%@ include file="/WEB-INF/gj_page/jsp/include/searchmini/control.jsp"%>
<%@ include file="/WEB-INF/gj_page/jsp/include/searchmini/exportExcel.jsp"%>
<script type="text/javascript">
//載入下拉框
var parten = /^\s*$/;
mini.parse();
var grid = mini.get("datagrid1");
grid.load({
data: "${data}"
});
//載入下拉框
var comboxList=${jsonString};
var no=comboxList.noList;
var nature=comboxList.natureList;
var bank=comboxList.bankList;
$(function (){
var isShow="<s:property value='isShow'/>"; //是否顯示查詢模式
if(isShow=="true"){
grid.hideColumn("action");
grid.hideColumn("checkcolumn");
$("#addButton").hide(); //隱藏新增刪除匯出按鈕
$("#delButton").hide();
}
});
/**
* 查詢
*/
var fields = [
{name: '科目編號', field: 'SUBJECT_NO', type: 'select', table: '', fastQueryId: "a", fastQuery: true, queryArgs: true, defaultVal:no, notNull: false, defOperator: "等於"},
{name: '銀行專戶號碼', field: 'BANK_ACCOUNT_NUMBER', type: 'string', table: '', fastQueryId: "b", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"},
{name: '銀行專戶名稱', field: 'BANK_ACCOUNT_NAME', type: 'string', table: '', fastQueryId: "b", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "包含"},
{name: '銀行程式碼', field: 'BANK_CODE', type: 'string', table: '', fastQueryId: "d", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "包含"},
{name: '銀行名稱', field: 'BANK_NAME', type: 'select', table: '', fastQueryId: "e", fastQuery: true, queryArgs: true, defaultVal:bank , notNull: false, defOperator: "包含"},
{name: '開戶日期', field: 'OPEN_DATE', type: 'date', table: '', fastQueryId: "f", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"},
{name: '專戶性質', field: 'ACCOUNT_NATURE', type: 'select', table: '', fastQueryId: "g", fastQuery: true, queryArgs: true, defaultVal:nature , notNull: false, defOperator: "等於"},
{name: '銷戶日期 ', field: 'CANCELLATION_DATE', type: 'date', table: '', fastQueryId: "h", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"}
];
top["test"] = window;
function Search(){
mini.open({
url: '<%=request.getContextPath()%>/gjres/htwyRes/miniui/scripts/searchbox/page/filterwindow.jsp?id=datagrid1&win=test',
maskOnLoad: false,
width: 800,
height: 450,
onload: function () {
var iframe = this.getIFrameEl();
var data = fields;
iframe.contentWindow.SetData(data);
}
});
}
//序列化下拉框資料
var NO =mini.decode(no);
var NATURE=mini.decode(nature);
var BANK=mini.decode(bank);
//列表下拉框賦值
function onGenderRenderer(e) {
for (var i = 0, l = NO.length; i < l; i++) {
var g = NO[i];
if (g.id == e.value) return g.text;
}
return "";
}
function onAccountNature(e) {
for (var i = 0, l = NATURE.length; i < l; i++) {
var a = NATURE[i];
if (a.id == e.value) return a.text;
}
return "";
}
function onAccountBank(e) {
for (var i = 0, l = BANK.length; i < l; i++) {
var a = BANK[i];
if (a.id == e.value) return a.text;
}
return "";
}
function cancelRow() {
grid.reload();
editWindow.hide();
}
var editWindow = mini.get("editWindow");
function onActionRenderer(e) {
var grid = e.sender;
var record = e.record;
var uid = record.ID;
var rowIndex = e.rowIndex;
var s = '<button onclick="javascript:editRow(\'' + uid + '\') ">明細</button>';
return s;
}
/**
* 通過id查詢並顯示在編輯框
*/
function editRow(row_uid) {
if (row_uid !=null && row_uid !="") {
editWindow.show();
var form = new mini.Form("#editform");
form.clear();
if(row_uid!="0"){
form.loading();
$.ajax({
url: "<%=request.getContextPath()%>/bankInfo/bankInfoAction!listData.do",
type: 'post',
dataType:'json',
data: {"id": row_uid},
success: function (data) {
form.unmask();
var o = mini.decode(data);
form.setData(o);
var openDate=o.openDate.timeInMillis;
mini.get("openDate").setValue(new Date(openDate));
var cancellationDate=o.openDate.timeInMillis;
mini.get("cancellationDate").setValue(new Date(cancellationDate));
},
error: function () {
alert("表單載入錯誤");
form.unmask();
}
});
}
}
}
/**
* 非同步刪除資料
*/
function remove() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
if (confirm("確定刪除選中記錄？")) {
var ids = [];
for (var i = 0, l = rows.length; i < l; i++) {
var r = rows[i];
ids.push(r.ID);
}
var id = ids.join(',');
grid.loading("操作中，請稍後......");
$.ajax({
url:"<%=request.getContextPath()%>/bankInfo/bankInfoAction!delete.do",
type:'post',
dateType:'json',
data:{"id":id},
success: function (text) {
grid.reload();
},
error: function () {
}
});
}
} else {
alert("請選中一條記錄");
}
}
/**
* 非同步更新資料
*/
function updateRow() {
var form = new mini.Form("#editform");
var o = form.getData();
grid.loading("儲存中，請稍後......");
var json = mini.encode([o]);
$.ajax({
url: "<%=request.getContextPath()%>/bankInfo/bankInfoAction!save.do",
data: {data: json },
type:'post',
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
editWindow.hide();
}
function add() {
editRow("0");
}
</script>
</body>
</html>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 相容性 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- 快取 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="<%=request.getContextPath()%>/gjres/htwyRes/miniui/scripts/boot.js"type="text/javascript"></script>
<title>銀行專戶資訊</title>
</HEAD>
<BODY style="height: 100%;width:100%;">
<div style="margin: 10px;">
<a class="mini-button" iconCls="icon-search" id="searchButton" onclick="Search()">查詢</a>
<a class="mini-button" iconCls="icon-add" id="addButton" onclick="add()">增加</a>
<a class="mini-button" iconCls="icon-remove" id="delButton" onclick="remove()">刪除</a>
<!-- <a class="mini-button" iconCls="icon-upload" id="exportButton" onclick="ExportExcelminiUI()">匯出</a>
--><input id="panelIndex" class="mini-hidden"/>
</div>
<div id="datagrid1" class="mini-datagrid"
style="width: 100%; height: 90%;" url="<%=request.getContextPath()%>/miniui/loadDataAction.do"
idField="ID" allowResize="true" pageSize="15" sizeList="[15,25,50,100]"
allowCellSelect="true" multiSelect="true" allowCellEdit="true" sortField="SUBJECT_NO" sortOrder="DESC" >
<div property="columns">
<div type="checkcolumn" name="checkcolumn"></div>
<div type="indexcolumn" width="50" headerAlign="center" allowSort="true">序號</div>
<div field="ID" visible="false"></div>
<div name="action" width="80" headerAlign="left" align="left" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
<div field="SUBJECT_NO" width="60" headerAlign="left" renderer="onGenderRenderer">科目編號</div>
<div field="BANK_ACCOUNT_NUMBER" width="60" headerAlign="left" allowSort="true">銀行專戶號碼</div>
<div field="BANK_ACCOUNT_NAME" width="60" headerAlign="left" allowSort="true">銀行專戶名稱</div>
<!-- <div field="BANK_CODE" width="60" headerAlign="left" allowSort="true">銀行程式碼</div>
--> <div field="BANK_NAME" width="60" headerAlign="left" allowSort="true" renderer="onAccountBank">銀行名稱</div>
<div field="OPEN_DATE" width="60" headerAlign="left" allowSort="true" dateFormat="yyyy-MM-dd">開戶日期</div>
<div field="ACCOUNT_NATURE" width="60" headerAlign="left" renderer="onAccountNature">專戶性質 </div>
<div field="CANCELLATION_DATE" width="60" headerAlign="left" allowSort="true" dateFormat="yyyy-MM-dd">銷戶日期 </div>
</div>
</div>
<div id="editWindow" class="mini-window" title="銀行專戶資訊" style="width:1000px;"showModal="true" allowResize="true" allowDrag="true" >
<div id="editform" class="form" >
<input class="mini-hidden" name="id"/>
<input class="mini-hidden" name="pid" />
<input class="mini-hidden" name="status" value="0"/>
<table style="width:100%;">
<tr>
<td style="width:80px;">科目編號：</td>
<td style="width:150px;"><input name="subjectNo" class="mini-combobox"
url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=no" textField="text" valueField="id" /></td>
<td style="width:100px;">銀行專戶號碼：</td>
<td style="width:150px;"><input name="bankAccountNumber" class="mini-textbox" /></td>
<td style="width:100px;">銀行專戶名稱：</td>
<td style="width:150px;"><input name="bankAccountName" class="mini-textbox" /></td>
</tr>
<tr>
<!-- <td>銀行程式碼：</td>
<td><input name="bankCode" class="mini-textbox"/></td> -->
<td>銀行名稱：</td>
<td><input name="bankName" class="mini-combobox" url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=bank" textField="text" valueField="id"/></td>
<td>開戶日期：</td>
<td><input id="openDate" name="openDate" class="mini-datepicker" showTime="true" /></td>
</tr>
<tr>
<td>專戶性質：</td>
<td><input name="accountNature" class="mini-combobox"
url="<%=request.getContextPath()%>/bankInfo/bankInfoAction!ListComboBox.do?type=nature" textField="text" valueField="id" />
</td>
<td>銷戶日期：</td>
<td><input id="cancellationDate" name="cancellationDate" class="mini-datepicker" /> </td>
<td colspan="2"></td>
</tr>
<tr>
<td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
<a class="mini-button" onclick="updateRow()" style="width:60px;margin-right:20px;">確定</a>
<a class="mini-button" onclick="cancelRow()" style="width:60px;">取消</a>
</td>
</tr>
</table>
</div>
</div>
<%@ include file="/WEB-INF/gj_page/jsp/include/searchmini/control.jsp"%>
<%@ include file="/WEB-INF/gj_page/jsp/include/searchmini/exportExcel.jsp"%>
<script type="text/javascript">
//載入下拉框
var parten = /^\s*$/;
mini.parse();
var grid = mini.get("datagrid1");
grid.load({
data: "${data}"
});
//載入下拉框
var comboxList=${jsonString};
var no=comboxList.noList;
var nature=comboxList.natureList;
var bank=comboxList.bankList;
$(function (){
var isShow="<s:property value='isShow'/>"; //是否顯示查詢模式
if(isShow=="true"){
grid.hideColumn("action");
grid.hideColumn("checkcolumn");
$("#addButton").hide(); //隱藏新增刪除匯出按鈕
$("#delButton").hide();
}
});
/**
* 查詢
*/
var fields = [
{name: '科目編號', field: 'SUBJECT_NO', type: 'select', table: '', fastQueryId: "a", fastQuery: true, queryArgs: true, defaultVal:no, notNull: false, defOperator: "等於"},
{name: '銀行專戶號碼', field: 'BANK_ACCOUNT_NUMBER', type: 'string', table: '', fastQueryId: "b", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"},
{name: '銀行專戶名稱', field: 'BANK_ACCOUNT_NAME', type: 'string', table: '', fastQueryId: "b", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "包含"},
{name: '銀行程式碼', field: 'BANK_CODE', type: 'string', table: '', fastQueryId: "d", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "包含"},
{name: '銀行名稱', field: 'BANK_NAME', type: 'select', table: '', fastQueryId: "e", fastQuery: true, queryArgs: true, defaultVal:bank , notNull: false, defOperator: "包含"},
{name: '開戶日期', field: 'OPEN_DATE', type: 'date', table: '', fastQueryId: "f", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"},
{name: '專戶性質', field: 'ACCOUNT_NATURE', type: 'select', table: '', fastQueryId: "g", fastQuery: true, queryArgs: true, defaultVal:nature , notNull: false, defOperator: "等於"},
{name: '銷戶日期 ', field: 'CANCELLATION_DATE', type: 'date', table: '', fastQueryId: "h", fastQuery: true, queryArgs: true, defaultVal: "", notNull: false, defOperator: "等於"}
];
top["test"] = window;
function Search(){
mini.open({
url: '<%=request.getContextPath()%>/gjres/htwyRes/miniui/scripts/searchbox/page/filterwindow.jsp?id=datagrid1&win=test',
maskOnLoad: false,
width: 800,
height: 450,
onload: function () {
var iframe = this.getIFrameEl();
var data = fields;
iframe.contentWindow.SetData(data);
}
});
}
//序列化下拉框資料
var NO =mini.decode(no);
var NATURE=mini.decode(nature);
var BANK=mini.decode(bank);
//列表下拉框賦值
function onGenderRenderer(e) {
for (var i = 0, l = NO.length; i < l; i++) {
var g = NO[i];
if (g.id == e.value) return g.text;
}
return "";
}
function onAccountNature(e) {
for (var i = 0, l = NATURE.length; i < l; i++) {
var a = NATURE[i];
if (a.id == e.value) return a.text;
}
return "";
}
function onAccountBank(e) {
for (var i = 0, l = BANK.length; i < l; i++) {
var a = BANK[i];
if (a.id == e.value) return a.text;
}
return "";
}
function cancelRow() {
grid.reload();
editWindow.hide();
}
var editWindow = mini.get("editWindow");
function onActionRenderer(e) {
var grid = e.sender;
var record = e.record;
var uid = record.ID;
var rowIndex = e.rowIndex;
var s = '<button onclick="javascript:editRow(\'' + uid + '\') ">明細</button>';
return s;
}
/**
* 通過id查詢並顯示在編輯框
*/
function editRow(row_uid) {
if (row_uid !=null && row_uid !="") {
editWindow.show();
var form = new mini.Form("#editform");
form.clear();
if(row_uid!="0"){
form.loading();
$.ajax({
url: "<%=request.getContextPath()%>/bankInfo/bankInfoAction!listData.do",
type: 'post',
dataType:'json',
data: {"id": row_uid},
success: function (data) {
form.unmask();
var o = mini.decode(data);
form.setData(o);
var openDate=o.openDate.timeInMillis;
mini.get("openDate").setValue(new Date(openDate));
var cancellationDate=o.openDate.timeInMillis;
mini.get("cancellationDate").setValue(new Date(cancellationDate));
},
error: function () {
alert("表單載入錯誤");
form.unmask();
}
});
}
}
}
/**
* 非同步刪除資料
*/
function remove() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
if (confirm("確定刪除選中記錄？")) {
var ids = [];
for (var i = 0, l = rows.length; i < l; i++) {
var r = rows[i];
ids.push(r.ID);
}
var id = ids.join(',');
grid.loading("操作中，請稍後......");
$.ajax({
url:"<%=request.getContextPath()%>/bankInfo/bankInfoAction!delete.do",
type:'post',
dateType:'json',
data:{"id":id},
success: function (text) {
grid.reload();
},
error: function () {
}
});
}
} else {
alert("請選中一條記錄");
}
}
/**
* 非同步更新資料
*/
function updateRow() {
var form = new mini.Form("#editform");
var o = form.getData();
grid.loading("儲存中，請稍後......");
var json = mini.encode([o]);
$.ajax({
url: "<%=request.getContextPath()%>/bankInfo/bankInfoAction!save.do",
data: {data: json },
type:'post',
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
editWindow.hide();
}
function add() {
editRow("0");
}
</script>
</body>
</html>