<body>
<div>
<form>
<input type="hidden" name="method" value="toFinProtRedeemList">
<table width="100%" class="table">
<tr>
<td>單位名稱</td>
<td>
<select id="productName" name="productName"></select>
</td>
<td>轉讓單號</td>
<td>
<input id="numbers">
</td>
</tr>
<tr>
<td>產品代碼</td>
<td>
<input id="productCode">
</td>
<td>是否定向</td>
<td>
<select id="corpId">
<option>是</option>
<option>否</option>}
option
</select>
</td>
</tr>
</table>
</form>
</div>
<div>
<button type="button" onclick="doQuery()">查詢</button>
<button type="button" onclick="reset()">重置</button>
</div>
</body>
<script>
function initJqGrid() {
var postData = getPostData(); // 這個變量接收的傳給后台的參數 (可以復制粘貼搜索這個函數位置)
// var url = '這里寫你要請求的地址'; //因為本地加載所以不需要這個
$('#jqGrid').jqGrid({
// url: url,
datatype: 'local', // 獲取本地數據必須將datatype值改為 local
mtype: 'post',
// width: 'auto',
sortOrder: 'asc', // 默認排序
styleUI: 'bootstrap', // 設置jqGrid的全局樣式為bootstrap樣式
colModel: [{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{label: '產品代碼', name: 'productCode', align: 'center', width: 170, sortable: false},
{
label: '操作', name: 'operator', align: 'center', width: 130, sortable: false,
formatter: function (cellvalue, options, rowObject) {
var html = '';
html += '<a href="javascript:;" onclick= "getDetail()">'查看詳情</a>;
html += ' '
html += '<a href="javascript:;" onclick= "invest()">'投資</a>;
return html
},
},
],
colMenu: false, // 是否開啟表格快捷菜單
viewrecords: true, // 是否在瀏覽導航欄顯示記錄總數
multiselect: true, // 復選框
autowidth: true, // 自定義調整寬帶
// shrinkToFit: false, // 表格字段寬度
height: ($(window).height() - $('.row:first').height() - 230), //Grid的高度,可以接受數字, %值, auto, 默認值為150
caption: '理財產品(單位: 元)', // 表格type頭
postData: postData, // 參數
subGrid: false, // 是否啟用子表格
pager: '#jqGridPager', // 分頁控件的id
rowNum: 20, // 分頁 每頁顯示多少條數據
rowList: [10, 20, 30, 50, 100], // 改變分頁顯示的數據條數
rownumWidth: 35, // 控制序號欄的寬度
prmNames: {
page: 'pageControlData.currentPage', // 請求頁碼的參數名稱
rows: 'pageControlData.pageSize', // 請求行數的參數名稱
order: 'desc' // 采用的排列方式的參數名稱
},
jsonReader: {
root: 'rows', // 返回的數組集合
page: 'pageControlData.currentPage', // 當前頁數
total: 'pageCount', // 總的頁數
records: 'resultCount', // 代表數據總行數
repeatitems: false // 每行的數據不可重復 , 並且返回的數據中按名字來搜索元素
},
loadComplete: function (data) {
// 設置輸入框 文字居中 (.ui-pg-input 是jqGrid表格中的類名)
$('.ui-pg-input').css('text-align', 'center');
// rows 里面寫的是模擬后台傳的json數據
var rows = [
{
'id': 1, 'productCode': '呵呵噠'
},
{
'id': 2, 'productCode': '....'
}
{
'id': 3, 'productCode': '代碼'
}];
for (var i = 0; i < rows.length; i++) {
$('#jqGrid').jqGrid("addRowData", i + 1, rows[i]);
}
},
onPaging: function (pgButton) {
var total = $('#jqGrid').getGridParam('lastpage'); // 獲取總頁數
var pageInput = $('.ui-pg-input').val(); // 獲取分頁輸入框的頁碼
var rowNum = $('.ui-pg-selbox').val(); // 獲取選中的每頁數
var newUrl = url + '&pageControlData.currentPage=' + pageInput + '&pageControlData.pageSize=' + rowNum;
if (pageInput > total) {
$('.ui-pg-input').val(total);
newUrl = url + '&pageControlData.currentPage=' + total + '&pageControlData.pageSize=' + rowNum;
$('#jqGrid').jqGrid("setGridParam", { url: newUrl});
}
if (pageInput > 1) {
$('.ui-pg-input').val('1');
newUrl = url + '&pageControlData.currentPage=1&pageControlData.pageSize=' + rowNum;
$('#jqGrid').jqGrid("setGridParam", {url: newUrl });
}
$('#jqGrid').jqGrid("setGridParam", { url: newUrl });
}
hidegrid: false, // 禁用控制表格顯示,隱藏按鈕
})
}
// 獲取查詢條件的方法 (先理解 並 按自己的需求進行修改)
function getPostData() {
var param = {};
param['productCode'] = $('#productCode').val();
param['productName'] = $('#productName').val();
param['numbers'] = $('#numbers').val();
param['corpId'] = $('#corpId').val();
return param;
}
// 查詢方法(點擊查詢按鈕的時候觸發的事件)
function doQuery() {
var postData = getPostData();
$('#jqGrid').jqGrid('setGridParam',{
postData: postData
}).trigger('reloadGrid');
}
// 重置方法 (點擊重置按鈕的時候觸發的事件)
function reset() {
var corpIdOption = $('#corpId option:first').val();
$('#corpId').selectpicker('val', corpIdOption);
$('#productCode').val('');
var corpIdOption = $('#productName option:first').val()
$('#productName').selectpicker('val', corpIdOption);
$('#numbers').val('');
}
</script>
