jqGrid：案例

一、简介

jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。 

jqGrid是用ajax来实现对请求与响应的处理。

二、案例

$(function () {
    $("#jqGrid").jqGrid({
        //没有指名请求方式默认是get请求
        url: baseURL + 'user/list',
        datatype: "json",
        //设置表格列的属性。
        colModel: [
			{ label: '创建人', name: 'creater', index: 'creater', width: 80 },
			{ label: '活动名称', name: 'activityName', index: 'activity_name', width: 80 },
        ],
        //是否显示数据总条数
        viewrecords: true,
        //表格高度，可以是数字，像素值或者百分比
        height: 385,

        //在grid上显示记录条数，这个参数是要被传递到后台
        rowNum: 10,
        //用来调整表格每页显示的数据条数，此参数值会替代rowNum参数值传给服务器端。
		rowList : [10,30,50],
 
        //是否排序（如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'）
        rownumbers: true,
        //设置列宽（如果rownumbers为true，则可以设置column的宽度）
        rownumWidth: 25,

        //宽度自适应（一般改为false，否则右侧可能填不满）
        autowidth:true,
        //是否按比例初始化列宽（如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度）
		shrinkToFit:false,
        //选择框
        multiselect: true,
        //表格底部的翻页器
        pager: "#jqGridPager",
        //将后端返回的数据进行渲染到页面。
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        //请求参数。
        prmNames: {
			page:"page",
			rows:"limit",
			order: "order"
		}
    });


});

请求参数

返回参数