DIV CSS 佈局教程網

jqGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕松實現前端頁面與後台數據的ajax異步通信。

一、要引用的文件

要使用jqGrid，首先頁面上要引入如下css與js文件。

1、css

<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

2、js

　　<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>
　　<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
　　<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>

二、使用要點說明

1、獲取值

（1）、獲取單個id

獲取行號，有這種方式：

var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");

但是經過實際驗證，這種方式不可行，當選中行，再點擊同一行會出現獲取不到行號的情況。

最後先在js最外部定義一個變量selId，然後使用如下代碼在選中行時賦值：

onSelectRow: function (rowid, status) {
　　　　selId = rowid;　　//給最外層的selId賦值
　　}

（2）、獲取多個選中行的id

var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');

其輸出格式是逗號分隔的id，如：

1,2,3,4,5

（3）、獲得所有行的ID數組

var ids = $("jqgridtableid").jqGrid('getDataIDs');

（4）、獲取行數據

如果想獲取選擇的行的數據，只要傳入rowId即可，如下：

var rowData = $('#gridTable').jqGrid('getRowData',rowId);

而這個rowData是一個對象，如果要獲取選擇的行的這個對象的屬性值，如name的值，需如下：

var Name= rowData.name;

（5）、獲取單元格數據

var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);

（6）、設定行選中

　　//設定選中行,可設定多行選中：
　　$("jqgridtableid").jqGrid('setSelection',id1);
　　$("jqgridtableid").jqGrid('setSelection',id2);

2、自定義分頁、數據交互

何謂自定義？就是允許你用你自己喜歡的js對象與後端做數據交互。如jsonReader。

如果這個地方的Id設置錯了，那麼jqGrid就會自動以行號作為Id，這樣會影響刪除的。如果根據Id來刪，很有可能刪錯行。

jsonReader: {
　　　　id: "Id", //相當於設置主鍵
　　　　root: "JsonArray",　　　 //Json數據
　　　　total: "TotalPage",　　 //總頁數
　　　　page: "CurrentPage",　　//當前頁
　　　　records: "TotalRecord",//總記錄數
　　　　repeatitems: false
　　},

這樣一來，對於數據表格，在C#中，我可以用一個泛型類，就能夠與jqGrid表格進行交互(其中，包括了分頁信息，數據內容)。

/// <summary>
 /// 分頁ViewModel
 /// </summary>
 public class jQGrid<T> where T : class
 {
  public jQGrid()
  { }

  /// <summary>
  /// 帶4個參數的構造函數
  /// </summary>
  /// <param name="rows">每頁顯示行數</param>
  /// <param name="currentPage">當前頁</param>
  /// <param name="totalRecord">結果總記錄數</param>
  /// <param name="jsonArray">JSON數據</param>
  public jQGrid(int rows, int currentPage, int totalRecord, IList<T> jsonArray)
  {
   TotalPage = this.CalculateTotalPage(rows, totalRecord);
   CurrentPage = currentPage;
   TotalRecord = totalRecord;
   JsonArray = jsonArray;
  }

  public int TotalPage { get; set; }
  public int CurrentPage { get; set; }
  public int TotalRecord { get; set; }
  public IList<T> JsonArray { get; set; }

  /// <summary>
  /// 根據每頁顯示數與總記錄數計算出總頁數
  /// </summary>
  /// <param name="rows">每頁顯示數</param>
  /// <param name="totalRecord">結果總記錄數</param>
  /// <returns></returns>
  public int CalculateTotalPage(int rows, int totalRecord)
  {
   return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows));
  }
 }

3、搜索的實現

搜索的實現主要通過jqGrid的postData像服務器端傳遞參數。

$("#btnSearch").click(function () {
　　　　var rules = "";
　　　　$("#multipleSearchDialog").each(function (i) { 
　　　　　　$(".div-padding :input").each(function () {
　　　　　　　　if ($(this).val()) {
　　　　　　　　　　rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"';
　　　　　　　　}
　　　　　　})
　　　　});
  ParamJson = '{' + rules + '}';
  var postData = $("#grid-table").jqGrid("getGridParam", "postData");
  $.extend(postData, { Param: ParamJson });
  $("#grid-table").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{ page: 1}]); //重載JQGrid
　　});

搜索功能主要通過postData向服務器端傳遞數據。後端獲取參數從而進行處理：

Dictionary<string, string> DicParam = new Dictionary<string, string>();
　　string Param = Convert.ToString(Request["Param"]);
　　if (!string.IsNullOrEmpty(Param))
　　{
　　　　System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer();
　　　　DicParam = sr.Deserialize(Param, typeof(Dictionary<string, string>)) as Dictionary<string, string>;
　　}

這樣就獲取到了查詢參數的鍵值對，至於參數怎麼用，一般都是用於sql的where子句。

三、更多jqGrid配置屬性說明

1、屬性

參數名稱 類型 描述 默認值 是否可以被修改 ajaxGridOptions object 對ajax參數進行全局設置，可以覆蓋ajax事件：error，complete 和 beforeSend 空值 是 ajaxGridOptions object 對ajax參數進行全局設置 空值 是 ajaxSelectOptions object 對ajax的select參數進行全局設置，設置editoptions跟searchoptions 參數的select屬性值 空值 是 altclass String 用於表格行交替變色的class屬性。你可以定義自己的class來替代默認值。只有當altRows屬性設置為true時，該屬性才起作用 ui-priority-secondary 是，但需要重新加載 altRows boolean 設置表格是否允許行交替變色值 false 是，需重新加載 autoencode boolean 當為 ture 時對url進行編碼 false 是 autowidth boolean 如果為ture時，則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函數：setGridWidth false 否 caption String 定義表格名稱 空值 否，但是可以用api修改 cellLayout integer 定義了單元格padding + border 寬度。通常不必修改此值。初始值為5，paddingLef?2+paddingRight?2+borderLeft?1=5 5 否 cellEdit boolean 啟用或者禁用單元格編輯功能 false 是 cellsubmit String 定義了單元格內容保存位置：“remote”，“clientArray” ‘remote' 是 cellurl String 單元格提交的url 空值 是 colModel array 對顯示列屬性的設置，是一個數組對象。常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序 空值 否 colNames array[] 放置列名稱的數組，必須與colModel大小相同 空數組 否 datastr String xmlstring或者jsonstring 空值 是 datatype string 從服務器端返回的數據類型，（表格期望接收的數據類型）。可選類型：xml，xmlstring，json，local，function xml 是 deselectAfterSort boolean 只有當datatype為local時起作用。當排序時不選擇當前行 true 是 direction string 表格中文字的顯示方向，從左向右（ltr）或者從右向左（rtr）。 ltr 否 editurl string 定義對form編輯時的url 空值 是 emptyrecords string 當返回的數據行數為0時顯示的信息。只有當屬性 viewrecords 設置為ture時起作用 在語言包中 是 ExpandColClick boolean 當為true時，點擊展開行的文本時，treeGrid就能展開或者收縮，不僅僅是點擊圖片 true 否 ExpandColumn string 指定那列來展開tree grid，默認為第一列，只有在treeGrid為true時起作用 空值 否 footerrow boolean 當為true時，會在翻頁欄之上增加一行 false 否 forceFit boolean 當為ture時，調整列寬度不會改變表格的寬度。當shrinkToFit 為false時，此屬性會被忽略 false 否 gridstate string 定義當前表格的狀態：'visible' or 'hidden' visible 否 gridview boolean 構造一行數據後添加到grid中，如果設為true則是將整個表格的數據都構造完成後再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用 false 是 height mixed 表格高度，可以是數字，像素值或者百分比 150 否 hiddengrid boolean 當為ture時，表格不會被顯示，只顯示表格的標題。只有當點擊顯示表格的那個按鈕時才會去初始化表格數據。只有當caption 屬性不為空而且hidegrid為ture時才起作用 false 否 hidegrid boolean 啟用或者禁用控制表格顯示、隱藏的按鈕，只有當caption 屬性不為空時起效 true 否 hoverrows boolean 當為false時mouse hovering會被禁用 false 是 jsonReader array 描述json期望數據格式的數組。   否 lastpage integer 只讀屬性，定義了總頁數 0 否 lastsort integer 只讀屬性，定義了最後排序列的索引，從0開始 0 否 loadonce boolean 如果為ture則數據只從服務器端抓取一次，之後所有操作都是在客戶端執行，翻頁功能會被禁用 false 否 loadtext string 當請求或者排序時所顯示的文字內容 Loading.... 否 loadui string 當執行ajax請求時要干什麼。disable禁用ajax執行提示；enable默認，當執行ajax請求時的提示； block啟用Loading提示，但是阻止其他操作 enable 是 mtype string 請求的類型：(“POST” or “GET”) GET 是 multikey string 只有在multiselect設置為ture時起作用，定義使用那個key來做多選。shiftKey，altKey，ctrlKey 空值 是 multiboxonly boolean 只有當multiselect = true.起作用，當multiboxonly 為ture時只有選擇checkbox才會起作用， false 是 multiselect boolean 定義是否可以多選 false 否 multiselectWidth integer 當multiselect為true時設置multiselect列寬度 20 否 page integer 設置初始的頁碼 1 是 pager mixed 指定分頁欄對象，必須為一個有效的html元素。可以是'pager', '#pager', jQuery('#pager').推薦用'#pager' 空值 否 pagerpos string 指定分頁欄的位置 center 否 pgbuttons boolean 是否顯示翻頁按鈕 true 否 pginput boolean 是否顯示跳轉頁面的輸入框 true 否 pgtext string 當前頁信息 語言包中設置 是 prmNames array Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 當參數為null時不會被發到服務器端 none 是 postData array 此數組內容直接賦值到url上，參數類型：{name1:value1…} 空array 是 reccount integer 只讀屬性，定義了grid中確切的行數。通常情況下與records屬性相同，但有一種情況例外，假如rowNum=15，但是從服務器端返回的記錄數是20，那麼records值是20，但reccount值仍然為15，而且表格中也只顯示15條記錄。 0 否 recordpos string 定義了記錄信息的位置： left, center, right right 否 records integer 只讀屬性，定義了返回的記錄數 none 否 recordtext string 顯示記錄數信息。{0} 為記錄數開始，{1}為記錄數結束。 viewrecords為ture時才能起效，且總記錄數大於0時才會顯示此信息 語言包 是 resizeclass string 定義一個class到一個列上用來顯示列寬度調整時的效果 空值 否 rowList array[] 一個數組用來調整表格顯示的記錄數，此參數值會替代rowNum參數值傳給服務器端。如果為空則不顯示，設置格式：[10,20,30]。 [] 否 rownumbers boolean 如果為ture則會在表格左邊新增一列，顯示行順序號，從1開始遞增。此列名為'rn'. false 否 rowNum integer 設置表格中顯示的記錄數，參數會被自動傳到後台。如果此參數設為10，但是從服務器端返回15條記錄，那麼在表格中只會顯示10條記錄。如果設為-1則禁用此檢查 20 是 rownumWidth integer 如果rownumbers為true，則可以設置column的寬度 25 否 savedRow array 只讀屬性，只用在編輯模式下保存數據 空值 否 scroll boolean or integer 創建一個動態滾動的表格，當為true時，翻頁欄被禁用，使用垂直滾動條加載數據，且在首次訪問服務器端時將加載所有數據到客戶端。當此參數為數字時，表格只控制可見的幾行，所有數據都在這幾行中加載 false 否 scrollOffset integer 設置垂直滾動條寬度 18 否 scrollrows boolean 當為true時讓所選擇的行可見 false 是 selarrrow array-[] 只讀屬性，用來存放當前選擇的行 empty array [] 否 selrow string 只讀屬性，最後選擇行的id null 否 shrinkToFit boolean 此屬性用來說明當初始化列寬度時候的計算類型，如果為ture，則按比例初始化列寬度。如果為false，則列寬度使用colModel指定的寬度 true 否 sortable boolean 是否可排序 false 否 sortname string 排序列的名稱，此參數會被傳到後台 空字符串 是 sortorder string 排序順序，升序或者降序（asc or desc） asc 是 subGrid boolean 是否使用suggrid false 否 subGridModel array-[] subgrid模型 empty array 否 subGridType mixed 如果為空則使用表格的dataType null 是 subGridUrl string 加載subgrid數據的url，jqGrid會把每行的id值加到url中 空值 是 subGridWidth integer subgrid列的寬度 20 否 toolbar array 表 格的工具欄。數組中有兩個值，第一個為是否啟用，第二個指定工具欄位置（相對於body layer），如：[true,”both”] 。工具欄位置可選值：“top”,”bottom”, “both”. 如果工具欄在上面，則工具欄id為“t_”+表格id；如果在下面則為 “tb_”+表格id；如果只有一個工具欄則為 “t_”+表格id [false,''] 否 totaltime integer 只讀屬性，計算加載數據的時間。目前支持xml跟json數據 0 否 treedatatype mixed 數據類型，通常情況下與datatype相同，不會變 null 否 treeGrid boolean 啟用或者禁用treegrid模式 false 否 treeGridModel string treeGrid所使用的方法 nested 否 treeIcons array 樹的圖標，默認值：{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}   否 treeReader array 擴展表格的colModel且加在colModel定義的後面   否 tree_root_level numeric root元素的級別， 0 否 url string url null 是 userData array 從request中取得的一些用戶信息 empty array 否 userDataOnFooter boolean 當為true時把userData放到底部，用法：如果userData的值與colModel的值相同，那麼此列就顯示正確的值，如果不等那麼此列就為空 false 是 viewrecords boolean 是否要顯示總記錄數 false 否 viewsortcols array 定 義排序列的外觀跟行為。數據格式：[false,'vertical',true].第一個參數是說，是否都要顯示排序列的圖標，false就是只顯示當 前排序列的圖標；第二個參數是指圖標如何顯示，vertical：排序圖標垂直放置，horizontal：排序圖標水平放置；第三個參數指單擊功 能，true：單擊列可排序，false：單擊圖標排序。說明：如果第三個參數為false則第一個參數必須為ture否則不能排序   否 width number 如果設置則按此設置為主，如果沒有設置則按colModel中定義的寬度計算 none 否 xmlReader array 對xml數據結構的描述   否

url 獲取數據的地址 datatype 從服務器端返回的數據類型，默認xml。可選類型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside mtype ajax提交方式。POST或者GET，默認GET colNames 列顯示名稱，是一個數組對象。 colModel 對顯示列屬性的設置，是一個數組對象。常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序 pager 定義翻頁用的導航欄，必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置 rowNum 在grid上顯示記錄條數，這個參數是要被傳遞到後台 rowList 一個下拉選擇框，用來改變顯示記錄數，當選擇時會覆蓋rowNum參數傳遞到後台 sortname 默認的排序列。可以是列名稱或者是一個數字，這個參數會被提交到後台 viewrecords 定義是否要顯示總記錄數 caption 表格名稱

2、事件

事件 參數 描述 afterInsertRow rowid 
rowdata 
rowelem 此事件發生在每次插入行後
rowid 為插入的行ID
rowdata 是被插入行的數據數組。格式為name:value對，name在colModel定義
rowelem 是應答元素。xml為xml行，json為所有行數據。
注意：若gridview 為true，此事件不會發生 beforeRequest none 此事件發生在任何數據請求前，但當datatype為function時不發生。 beforeSelectRow rowid, e 此事件發生在用戶點擊行，選中該行前。
rowid 為行的ID，e為事件對象
該事件將返回布爾值true（行被選中）或false（行未被選中）。 gridComplete none 此事件發生在表格所有數據裝入和進程完成後。與datatype參數及排序分頁等無關。 loadBeforeSend xhr,
settings 此事件發生在XMLHttpRequest被發送前，用於修改對象屬性（如headers）。 xhr 為XMLHttpRequest對象。 loadComplete data 此事件發生在每個服務器請求後。xhr 為XMLHttpRequest對象。 loadError xhr,
status,
error 此事件在請求失敗時發生。事件有3個參數：
xhr 為XMLHttpRequest對象；
Satus 為錯誤類型描述；error 為錯誤對象。 onCellSelect rowid,
iCol, 
cellcontent,
e 此事件在點擊表格特定單元格時發生。
rowid 為行ID；iCol 為列索引；
cellcontent 為單元格中內容；
e 點擊事件對象。 ondblClickRow rowid, 
iRow, 
iCol, 
e 此事件發生在行雙擊後發生。
rowid為行ID；iRow 為行索引（勿與rowid混淆）；
iCol為列索引；
e 為事件對象。 onHeaderClick gridstate 此事件發生在點擊顯示或隱藏表格後發生（hidegrid為true） gridstate為表格狀態，有visible和hidden兩個值 onPaging pgButton 此事件發生在點擊page button後，填充數據前，及用戶輸入一個與當前頁頁碼不同的新頁碼並回車時。 onRightClickRow rowid, 
iRow, 
iCol, 
e 此事件發生在右擊行後。（此事件在Opera浏覽器中無效）
rowid為行ID；iRow為行索引（勿與rowid混淆）
iCol為列索引；
e為事件對象 onSelectAll aRowids,
status 此事件發生在點擊標題的復選框時發生（multiselect為true）
aRowids 選定行ID的數組（哪些行的復選框與頭復選框相同）
status 頭復選框的選定的布爾值，true為選中，false為 onSelectRow rowid,
status 此事件發生在行點擊後
rowid 為行ID；
status  為選擇狀態。當multiselect為true時使用，當行被選中時返回true；為選中時返回false。 onSortCol index,
iCol,
sortorder 此事件發生在列排序被點擊之後，數據排序前
index 為colModel 中定義的索引名iCol 為列的索引號
sortorder 為新的排序方式，asc或desc resizeStart event, index 此事件發生在列被重新定義寬度時。 event 為事件對象；index 為在colModel 中定義的列索引。 resizeStop newwidth, index 此事件發生在列被重新定義寬度後。
newwidth 為新的列寬度；index 為在colModel 中定義的列索引。 serializeGridData postData 通過此事件可以序列化傳遞給ajax請求的的數據。此事件將返回一個以序列化的數據。若有自定義的數據（如JSON字符串、XML字符串）要發給服務器時，可使用該事件。

3、方法

方法 參數 返回值 描述 addJSONData data none 用傳遞的data（數組）填充網格。用法：假如我們從web服務器獲得的數據（jsonresponse），則
var mygrid = jQuery(”#”+grid_id)[0];
var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); 
mygrid.addJSONData(myjsongrid); 
myjsongrid = null; 
jsonresponse =null; 
將填充網格。當然，myjsongrid中的數據在傳遞到addJSONData之前可以被操作。 addRowData rowid,
data, 
position, 
srcrowid true on success, 
false otherwise 插入一新行，rowid 為新行的ID，data（數組）為新行數據，position為新行插入的位置（first為表頭，last為表尾，srcrowid指定偏移位置）。Data數組的格式為：{name1:value1,name2: value2…} ，name為colModel指定的名稱。 addXmlData data none 用傳入的data填充網格。用法：假如我們從web服務器獲得數據
(xmlresponse)，則 var mygrid = jQuery(”#”+grid_id)[0]; 
mygrid.addXmlData(xmlresponse.responseXML); 
將填充網格。當然，xmlresponse中的數據在傳遞到addXmlData之前可以被操作。 clearGridData clearfooter jqGrid object 清除網格中當前裝入的數據，如果clearfooter 參數為true，則清除網格最後一行數據。 delRowData rowid true on success, 
false otherwise 刪除id = rowid的行。但不會刪除服務器上的數據。 footerData action,
data, 
format jqGrid object 此方法獲得或設置網格底部數據。
action – 可設置為get（缺省）或set。 Get從底部返回name:value對象（name為colModel中的名稱）。此時其他兩個參數無效。 
Set將data數組（對象）設置到底部。Data為colName中的名稱和值對。
format – 缺省為true，表示設置時使用formatter (如果colModel中已定義)。false表示不使用formatter getCell rowid, 
iCol cell content 返回id = rowid行，column = iCol列的內容。 iCol可以是列的索引或colName中定義的名稱。在編輯行或列時不能使用該方法，此時返回的不是當前值，而是原始值。 getCol colname, returntype, mathoperation array[] or value 返回列值數組。
colname 可以是列的索引值或colModel中的名稱。returntype 確定返回數組的類型，為false(缺省)時，數組只包含值。為true時為對象數組，格式為{id:rowid, value:cellvalue}，id為行的id， cellvalue為單元格的值。如 [{id:1,value:1},{id:2,value:2}…] 
mathoperation為可選參數，可以是sum、avg和count。若此參數進行了有效設置，則返回計算後的值，若無效，則返回空數組。 getDataIDs none array[] 返回當前網格顯示數據的ID數組。無數據時返回空數組。 getGridParam name mixed value 返回請求的參數的值。name 是options 數組中的名稱，若為設置則options被返回。 getInd rowid,
rowcontent mixed 當rowcontent 設置為false（缺省）時，返回id= rowid行的索引值。若rowcontent設置為true，則返回整行。若為找到rowid則返回false。 getLocalRow rowid row object Return the row data from the local array stored in data parameter when the datatype is local getRowData rowid or none array{} 返回id = rowid行的數據數組。格式為name:value對，name為colModel中的名稱，value為該行的值。未找到返回空數組。在行或列編輯時此方法不可用，此時返回的不是當前值，而是原始值。
若rowid為設置，則返回網格中所有數據數組。 hideCol colname
or
[colnames] jqGrid object 根據colname或colnames數組給定的列名隱藏相應的列，列名必須是colModel中定義的名稱。表格的寬度不會改變。 remapColumns permutation, updateCells, keepHeader none 調整列的顯示順序。permutation指定調整後的順序，如 [1,0,2] 表示第一列在第二位顯示。若updateCells 設置為true，列數據將重新排序。若keepHeader 設置為true，header單元格將重新排序。 resetSelection none jqGrid object 選擇（反選）行。多選擇模式下同樣可用。 setCaption caption jqGrid object 設置新的表頭文字。若表頭為隱藏，將顯示。 setCell rowid,
colname, 
data, 
class, 
properties, 
forceup jqGrid object 修改單元格的值、類或樣式。其中：
rowid為行ID；colname為列名（可以是從0開始的列的索引值）；
data 設置的內容，若為空，class若為字符串，將使用addClass為列加入一個類，若為數組，將直接加入CSS中；properties 設置單元格屬性。 setGridParam object jqGrid object 設置一個特定的參數。
有些參數需trigger(“reloadGrid”)才能生效。注意這個方法可以覆蓋事件。名稱（name:value對）為選項數組中的名稱。  setGridHeight new_height jqGrid object 動態設置網格高度。只能對單元格的高度進行設置而不是網格。new_height 可以是像素、百分比或auto。 setGridWidth new_width,
shrink jqGrid object 動態設置網格寬度。new_width 為新寬度的像素值；
shrink（true或false）作用同shrinkToFit。若不設置，則使用shrinkToFit設置。 setLabel colname, 
data, 
class, 
properties jqGrid object 設置指定列標題文字、屬性和類：
colname 為列名，可以是從0開始的列索引；
data 為標題文字，為空則不修改；
class 若為字符串，則為類名，若為數組，則直接寫入CSS；
properties 為標題文字的屬性。 setRowData rowid,
data, 
cssprop true on success, 
false otherwise 更新rowid指定行的數據（使用數組）。
Data數組的格式為: {name1:value1,name2: value2…} 。name為colModel中描述的名稱，value為新值。cssprop若為字符串，將使用addClass為行添加類；若為數組對象，則直接加入CSS中。將data設置為false的情況下，可設置屬性和類名 setSelection rowid,
onselectrow jqGrid object 選擇或反選id = rowid指定的行。若onselectrow設置為true (缺省) 則觸發onSelectRow事件，否則不觸發。 showCol colname jqGrid object 顯示colname 指定的列。若colname為字符串，只顯示指定的列，若colname為數組 [“name1”,”name2”] 則顯示name1和name2列， name必須是colModel中的名稱。寬度不變。 trigger(“reloadGrid”) none none 按當前設置重新加載網格。若datatype為xml或json，將從服務器重新請求數據。此方法適用於一個已建立的網格。注意不會改變表頭，也就是說改變colModel將沒有作用。你可用gridUnload，使用新colModel來重新加載。 updateColumns none none 在拖拽表格時，同步網格寬度。用法：
var mygrid=jQuery(”#grid_id”)[0];
mygrid.updateColumns();

四、問題記錄

1、IE9下jQgrid一直出現水平滾動條的問題。

解決：是因為jqGrid會在IE下出現border與padding造成寬度過大引起的，增加此屬性可解決：

cellLayout:0

此時當頁面縮放擺100%時，已經不顯示滾動條，但是縮放比例不為100%時，依然會顯示水平滾動條，終極解決方案為更改ui.jqgrid.css樣式：

.ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; }

如果還是不行，還有一個方法：

 $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x': 'hidden' });

當然你也可以直接修改樣式.ui-jqgrid-bdiv增加overflow-x:hidden;

2、自定義操作列。

jqGrid默認的自定義編輯列，只能設置編輯按鈕與刪除按鈕。並且圖標基本上都很難控制，如果想自己實現自己的自定義編輯列，可以如下操作:

在actions列的formatoptions項，增加此行：

name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
 　　　　formatter: 'actions',
 　　　　formatoptions: {
 　　　　keys: true,
 　　　　delbutton:false,
 　　　　delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
 　　　　formatter:"actionFormatter"
 　　},

然後在頁面開始處增加如下代碼：

 $.extend($.fn.fmatter, {
  actionFormatter: function(cellvalue, options, rowObject) {
   var retVal = "顯示在原來編輯按鈕的按個地方的代碼";
   return retVal;
  }
 } );

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。