前台页面
html
<table id="dg"> </table>
JavaScript
$("#dg").datagrid({ 500, //自适应列内容 fitColumns: true, //只允许选择一行 singleSelect: true, //显示分页栏 pagination: true, //显示行号 rownumbers:true, //初始化的页码 pageNumber: 1, //初始化的页容量 pageSize: 5, //初始化页面大小选择列表 pageList: [5, 10, 15, 20], //指明哪一个字段是标识字段 idField: 'PositionCode', //在从远程站点加载数据的时候显示提示消息 loadMsg:'正在获取数据中。。。', //获取后台json数据 url: '/Position/GetPositionJsonData', //列对象数组,该对象必须数组 columns: [[ { field: 'ck', checkbox: true, }, { field: 'PositionCode', title:'岗位编号' }, { field: 'PositionName', title: '岗位名称' }, { field: 'Remark', title: '备注' }, { field: 'IsForbid', title: '是否禁用' } ]], });
asp.net mvc后台
/// <summary> /// 获取分页数据 /// </summary> /// <returns></returns> public ActionResult GetPositionJsonData() { //初始化页码 int page = 1; //初始化页容量 int rows = 5; //根据前台请求:获取请求的页码,页容量 if (Request["page"]!=null) { page = Convert.ToInt32(Request["page"]); } if (Request["rows"] != null) { rows = Convert.ToInt32(Request["rows"]); } DAL.SYS_Position positionDAL = new DAL.SYS_Position(); DataSet ds = positionDAL.GetListByPage2("", "PositionCode desc", page, rows); List<Model.SYS_Position> list = new List<SYS_Position>(); Model.SYS_Position p = null; for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { p = new SYS_Position(); p.PositionCode = ds.Tables[0].Rows[i]["PositionCode"].ToString(); p.PositionName = ds.Tables[0].Rows[i]["PositionName"].ToString(); p.Remark = ds.Tables[0].Rows[i]["Remark"].ToString(); p.IsForbid = ds.Tables[0].Rows[i]["IsForbid"].ToString(); list.Add(p); } //由于DataGrid请求的数据必须是json对象的数据,而且格式必须是 {totoal=总数,rows=数据对象},所以下面对数据进行了加工 var result = new { total = positionDAL.GetRecordCount(""), rows = list }; //返回需要的json格式的数据 return Json(result, JsonRequestBehavior.AllowGet); }
特别要强调的是返回的json格式:{totoal=总数,rows=数据对象},并且数据对象是数组形式。
比如:
{"total":12,"rows":[{"PositionCode":"1012","PositionName":"监控中心","Remark":"","IsForbid":"1"},{"PositionCode"
:"1011","PositionName":"准运卡售卡员","Remark":"","IsForbid":"1"},{"PositionCode":"1010","PositionName":"财
务股股长","Remark":"","IsForbid":"1"},{"PositionCode":"1009","PositionName":"计量站副站长","Remark":"","IsForbid"
:"1"},{"PositionCode":"1008","PositionName":"计量站站长","Remark":"","IsForbid":"0"},{"PositionCode":"1007"
,"PositionName":"监控室主任","Remark":"","IsForbid":"1"},{"PositionCode":"1006","PositionName":"磅秤监控","Remark"
:"","IsForbid":"1"},{"PositionCode":"1005","PositionName":"计量站司磅员","Remark":"","IsForbid":"0"},{"PositionCode"
:"1004","PositionName":"监控员","Remark":"调运监控室上班人员","IsForbid":"0"},{"PositionCode":"1003","PositionName"
:"标识卡售卡员","Remark":"售卡人员","IsForbid":"1"}]}