因为我目前运维的是一个webform项目,项目中未用到分页的功能,我百度了很多文章也没有一篇是结合jqgrid + ashx + nhibernate的分页,可能是因为后台要请求ashx的原因,不像mvc直接可以请求一个方法就可以了。
那就让我们从页面到后台来一步步解析jqgrid的分页吧。
1、初始化表格的代码如下
function initGrid() { localGrid = jQuery("#tbList"); localGrid.jqGrid({ //data: localData, url:"JqgridPageHandler.ashx", datatype: "json", gridview: true, height: 300, width: '95%', rowNum: 10, rowList: [10, 100, 500, 1000], colNames: columns, autowidth: true, hoverrows: false, colModel: [ { name: 'Id', hidden: true, index: 'Id', width: 40, key: true }, { name: 'Name', index: 'Name', width: 40, align: "center" }, { name: 'ExamType', index: 'ExamType', width: 100, align: "center" }, { name: 'Score', index: 'Score', width: 30, align: "center" }, { name: 'QuerySite', index: 'QuerySite', width: 120, align: "center" }, { name: 'ExamTime', index: 'ExamTime', width: 60, formatter: "date", formatoptions: { srcformat: 'Y-m-d ', newformat: 'Y-m-d ' }, align: "center" }, { name: 'CreatedTime', index: 'CreatedTime', width: 60, formatter: "date", formatoptions: { srcformat: 'Y-m-d ', newformat: 'Y-m-d ' }, align: "center" }, { name: 'StatusText', index: 'StatusText', width: 50, align: "center" }, { name: 'Remark', index: 'Remark', width: 120, align: "center" } ], emptyrecords: "没有任何数据", pager: "#pager", viewrecords: true, rownumbers: true, //loadonce: true, caption: "外语成绩单", multiselect: false, postData: {//参数 name: $j("#name").val(), examType: $j("#examType").val(), startDate: startDate, endDate: endDate, isCreateTime: document.getElementById("<%=rbcreatedtime.ClientID %>").checked }, jsonReader: { //rows: "rows", //page: "page", //total: "total", // 很重要 定义了 后台分页参数的名字。 //records: "records", repeatitems: false, } }).navGrid('#pager', { edit: false, add: false, del: false, searchtext: "搜索" }, {}, {}, {}, { search: true, sopt: ['cn', 'eq', 'ge', 'gt', 'le', 'lt'] }); gridHelper.SetAutoResize(localGrid, -20, -265, true, true); }