项目本来使用的是webgrid。后台弃用改成Jqgrid插件。
首先介绍一下webgrid的用法:webgrid是mvc中HtmlHelper自带的。首先创建viewmodel用于数据的绑定,然后在页面中进行绑定一些参数的设置即可
具体如下:
@model Models.SearchPageViewModel @{ WebGrid grid = new WebGrid(null, rowsPerPage: Model.PagingInfo.ItemsPerPage, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent", canSort: false); grid.Bind(Model.modelList, autoSortAndPage: false, rowCount: Model.PagingInfo.TotalItems); } @if (grid.TotalRowCount > 0) {@grid.GetHtml( tableStyle: "GridViewTable", headerStyle: "HeaderStyle", footerStyle: "FooterStyle", rowStyle: "RowStyle", alternatingRowStyle: "AltRowStyle", selectedRowStyle: "SelectedRowStyle", mode: WebGridPagerModes.All, numericLinksCount: 10, firstText: "首页", lastText: "尾页", previousText: "<", nextText: ">", columns: grid.Columns( grid.Column("RowNum", "序号", format: (item) => item.RowNum), grid.Column("XZQDM", "行政区代码", format: (item) => item.XZQDM, style: null, canSort: false), grid.Column("XZQMC", "行政区名称", format: (item) => item.XZQMC, canSort: false), grid.Column("UPTIME", "上传时间", format: (item) => item.UPTIME, canSort: false), grid.Column(header: "选择", format: @) ))
Jqgrid用法大同小异:
需要引用
第一步:定义一个呈现数据的表格
第二部:在js里面进行相关设置
var grid = $("#gridUploadProg"); grid.jqGrid({ url: 'ResultManage/QueryData', mtype: 'post', datatype: 'json', loadonce: false, data: {}, colNames: ['项目ID', '行政区代码', '行政区名称'], colModel: [ { name: 'XMID', index: 'XMID', sortable: false, key: true, align: 'center', hidden: true }, { name: 'XZQDM', index: 'XZQDM' }, { name: 'XZQMC', index: 'XZQMC', align: 'center' }, { name: 'XMMC', index: 'XMMC', align: 'center' } ], rowNum: 10, rowList: [10, 15, 20, 30], pager: '#gridUploadProgPager', emptyrecords: "没有符合要求的数据", gridview: true, rownumbers: true, sortname: 'ProvinceCode', viewrecords: true, sortorder: 'asc', multiselect: true, caption: '任务管理列表', jsonReader: { page: 'page', total: 'total', records: 'records', root: 'rows' }, height: '100%', loadui: 'block', autoScroll: false, loadComplete: function (data) { //完成服务器请求后,回调函数 // alert(data.records); if (data.records == 0) { //如果没有记录返回,追加提示信息 $("p").appendTo($("#gridUploadProg")).addClass("nodata").html("找不到相关数据!"); } else { //否则,删除提示 $("p.nodata").remove(); } } });
第三步:在control里面进行模型的获取JSON的转换
public void QueryData(string sidx = "XZQDM", string sord = "DESC", int rows = 10, int page = 1) { SearchConditionModel searchCondition = new SearchConditionModel(); if (this.Session["SearchCondition"] != null) { searchCondition = (SearchConditionModel)this.Session["SearchCondition"]; } int totalRecord = 0; IEnumerablemodelList = this.TaskManageDataContext.GetModelList( out totalRecord, provinceCode: searchCondition.XZQ, rwlx: searchCondition.RWLX, taskResult: searchCondition.SFTG, orderField: sidx, orderType: sord, pageIndex: page, pageSize: rows ); //int index = (page - 1) * rows; // 开始记录数 int totalPage = totalRecord % rows == 0 ? totalRecord / rows : totalRecord / rows + 1; // 计算总页数 int pagesize = rows; string son = Newtonsoft.Json.JsonConvert.SerializeObject(modelList); son = "{ \"page\": " + page.ToString() + ", \"total\": " + totalPage.ToString() + ", \"records\": " + totalRecord.ToString() + ", \"rows\": " + son + "}"; Response.Write(son); }
以后每一次分页查询都会进到这个action里面,实现分页实时查询数据。JSON数据前面一定要加记录数等信息用于分页的显示。当然还有其他方法返回json数据。理想的格式应该的返回JsonResult的。像这样 return Json(modelList, JsonRequestBehavior.AllowGet);这种方法我还没有测试,不清楚能不能返回数据到界面上。这种方法看起来明显正规一点