jqGrid是一种用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。效果如下图所示：
创新互联公司专业为企业提供泸州网站建设、泸州做网站、泸州网站设计、泸州网站制作等企业网站建设、网页设计与制作、泸州企业网站模板建站服务，10多年泸州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
js代码如下：
function initData(p) {
$("#customerMainList").jqGrid({
url: "",
datatype: "local",
colNames: ['编号', '客户姓名(跟进)', '类型', '添加人', '分配给', '期望区域', '期望小区', '期望面积', '户型', '期望装修', '期望楼层', '期望总价', '状态', '添加时间', '操作'],
colModel: [
{ name: 'Id', index: 'Id', formatter: tranCustId, width: 70, align: "center" },
{ name: 'CustName', index: 'CustName', formatter: transName, width: 98, align: "center" },
{ name: 'BusinessType', index: 'BusinessType', width: 60, align: "center" },
{ name: 'CreateUserName', index: 'CreateUserName', width: 55, align: "center" },
{ name: 'ExeUserName', index: 'ExeUserName', width: 65, align: "center" },
{ name: 'ExpArea', index: 'ExpArea', width: 70, align: "center" },
{ name: 'ExpSeqv', index: 'ExpSeqv', width: 77, align: "center" },
{ name: 'ExpAcre', index: 'ExpAcre', width: 70, align: "center" },
{ name: 'ExpShi', index: 'ExpShi', formatter: transHuX, width: 67, align: "center" },
{ name: 'ExpZhuangX', index: 'ExpZhuangX', width: 60, align: "center" },
{ name: 'ExpFloor', index: 'ExpFloor', width: 59, align: "center" },
{ name: 'ExpPriceT', index: 'ExpPriceT', formatter: transExpPrice, width: 59, align: "center" },
{ name: 'S2', index: 'S2', formatter: custStates, width: 53, align: "center" },
{ name: 'CreateDate', index: 'CreateDate', formatter: transDate, width: 65, align: "center" },
{ name: 'id', index: 'id', formatter: transOp, width: 74, align: "center" }
],
rowNum: 20,
hoverrows: true,
rowList: [15, 20, 25, 30, 35, 40, 45, 50],
pager: '#pager2',
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
height: "100%", emptyrecords: "没有记录", forceFit: true, gridview: true, pginput: true,
prmNames: { page: "page", rows: "rows", sort: "sidx", order: "sord", search: "_search", nd: "nd", npage: null },
viewsortcols: [false, 'vertical', true],
onSelectRow: function (rowid, status) {
ShowCustomerDetail(rowid, true);
}
});
$("#customerMainList").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, refresh: false, search: false });
refreshData(p);
}设置jqGrid显示的列，分页等基本信息，需要注意的是colNames和colModel对应的字段信息要一致，onSelectRow事件表示的是行选中事件，在这里可以在选中行的同时弹出该记录的详情页面。
function refreshData(p) {
cust_p = p;
$("input[type='button']").attr("disabled", true);
var where = calcWhere();
$("#customerMainList").jqGrid("setGridParam", {
url: "xxxx.aspx" + where, //设置表格的url
datatype: "json", page: p
}).trigger("reloadGrid");
$("input[type='button']").attr("disabled", false);
$(".ui-jqgrid-bdiv div").css("position", "");
}设置jqGrid请求的url，参数等信息，返回的是json格式。.net论坛：http://bbs.netluntan.com，群：121058751
