jqgrid 基本架构

最近项目中展示列表信息全部用的是jqgrid插件，但在刚开始使用的时候，遇到了很多细节的问题，所以在这里总结一下。先给出所需要导入的js文件。

<script src="<s:url value='/js/jquery/jquery-ui-1.8.11.custom.min.js'/>"></script>
<script src="<s:url value='/js/jquery/jquery.ui.spinner.min.js'/>"></script>
<script src="<s:url value='/js/jqgrid/grid.locale-cn.js'/>"></script>
<script src="<s:url value='/js/jqgrid/jquery.jqGrid.min.js'/>"></script>
<script src="<s:url value='/js/jqgrid/ui.multiselect.js'/>"></script>

1.html页面要放入一个div和table

<table id="itemsGrid1"></table>
<div id="itemsPager1"></div>

2. jqgrid的核心方法

$(function(){

// 加载jqgrid宝贝评分列表
loadGridTable("itemsGrid1","itemsPager1");

});

function loadGridTable(gridName,pagerName) {
$("#"+gridName).jqGrid({
url: "items.action",
postData: {
  approveStatus : function() {return $('#approveStatus1').val();},
  grade:function() {
  var gd = $('#gradeFirst').val();
  if(gd=="null"){
  return "allgrade";
  }
  return $('#gradeFirst').val();
  },
               sellerCids : function() {return $('#sellerCids1').val();},
               searchKey : function() {return $('#searchKey1').val();},
               startScore : function() {return $('#startScore').val();},
               endScore: function() {return $('#endScore').val();}
              },
datatype: "json",
mtype: 'POST',
height: 400,
width: 778,
colNames: ["宝贝图片","标题","价格","得分","操作"],
rownumbers: true,
colModel: [{
name: "PIC_URL",
index: "PIC_URL",
formatter:formatItemPic,
valign:"middle",
width: "30",
hidden: false
},{
name: "TITLE",
index: "TITLE",
formatter:formatItemTitle,
hidden: false
},{
name: "PRICE",
index: "PRICE",
align:"center",
valign:"middle",
width: "80"
},{
name: "titleScore",
index: "titleScore",
align:"center",
valign:"middle",
width: "50"
},{
name: "action",
index: "action",
formatter:optimize,
align:"center",
valign:"middle",
width: "40"
}],
rowNum: 5,
viewrecords: true,
rowList: [5, 10, 20],
   loadComplete: function () {
      var gd = $('#gradeFirst').val();
  if(gd=="null"){
  $("#grade").val("allgrade");
  }else{
  $("#grade").val($('#gradeFirst').val());
  } 
   },
   jsonReader: {
     root: "dataset",
     page: "pager.curPageNo",
     total: "pager.totalPages",
     records: "pager.totalCount",
     repeatitems: false
   },
   prmNames: {
     rows: "pager.pageSize",
     page: "pager.curPageNo",
     sort: "pager.orderBy",
     order: "pager.order"
   },
   pager: pagerName,
   caption: "商品列表"
});
}