jQgrid加载本地数据
<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>
如果差一点,那就再努力一点
