jqGrid是一种用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。效果如下图所示：

js代码如下：

functioninitData(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事件表示的是行选中事件，在这里可以在选中行的同时弹出该记录的详情页面。

functionrefreshData(p){cust_p=p;$("input[type='button']").attr("disabled",true);varwhere=calcWhere();$("#customerMainList").jqGrid("setGridParam",{url:"xxxx.aspx"+where,//设置表格的urldatatype:"json",page:p}).trigger("reloadGrid");$("input[type='button']").attr("disabled",false);$(".ui-jqgrid-bdivdiv").css("position","");}

设置jqGrid请求的url，参数等信息，返回的是json格式。.net论坛：http://bbs.netluntan.com，群：121058751