jqGrid 使用案例及筆記

jqGrid 是一個用來顯示網格資料的jQuery插件，通過使用jqGrid可以輕松實作前端頁面與背景資料的ajax異步通信。

一、要引用的檔案

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

1、css

<link href="/css/ui.jqgrid.css" target="_blank" rel="external nofollow"  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

其輸出格式是逗号分隔的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	隻讀屬性，定義了總頁數	否
lastsort	integer	隻讀屬性，定義了最後排序列的索引，從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條記錄。	否
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資料	否
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元素的級别，	否
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;
 }
} );
           

一些常用方法的案例

jqGrid有很多方法函數，用來操作資料或者操作Grid表格本身。jqGrid的方法有兩種調用方式：

          $(“#grid_id”).jqGridMethod( parameter1,…,parameterN );

或者

        $(“#grid_id”).jqGrid(‘method’, parameter1,…,parameterN );

        首先介紹一下Jqgrid的幾個最常用的方法函數，具體的方法API也可以參考文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods） 。

1. getGridParam

        這個方法用來獲得jqGrid的選項值。它具有一個可選參數name，name即代表着jqGrid的選項名，如果不傳入name參數，則會傳回 Jqgrid整個選項options。例如：

var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //獲得選中行的ID
var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //獲得排序的字段
var page = $("#gridTable").jqGrid("getGridParam", "page");      //獲得目前的頁數
var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //獲得目前頁的行數
var count = $("#gridTable").jqGrid("getGridParam", "records");  //獲得總記錄數
var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多選時，傳回選中行的ID
           

　　

2. getRowData

這個方法用來獲得某行的資料。它具有一個rowid參數，Jqgrid會根據這個rowid傳回對應行的資料，傳回的是name:value類型的數組。如果rowid未能被找到，則傳回一個空數組；如果未設定rowid參數，則以數組的形式傳回Grid的所有行資料。例如：

var getRowdata = function() {
    var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
    var rowData = $("#gridTable").jqGrid("getRowData", selectedId);
           

3. addRowData

        這個方法用于向Grid中插入新的一行。執行成功傳回true，否則傳回false。它具有4個參數：

• rowid：新行的id号；
• data：新行的資料對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；
• position：插入的位置（first：表格頂端；last：表格底端；before：srcrowid之前；after：srcrowid之後）；
• srcrowid：新行将插入到srcrowid指定行的前面或後面。

        這個方法可以一次性插入多行，data參數必須是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]這樣的數組形式。例如:

var addStudent= function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
id : 99,
lastName : "Zhang",
firstName : "San",
email : "<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >[email protected]</a>",
telNo : "0086-12345678"
};
if (selectedId) {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
}
};
           

　　

         4. setRowData                  這個方法用于為某行資料設定資料值。執行成功傳回true，否則傳回false。它具有3個參數：

• rowid：更新資料的行id；
• data：更新的資料對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個資料對象，不必設定完全，需要更新哪列，就設定哪列的name:value對；
• cssprop：如果cssprop為String類型，則會使用jQuery的addClass為行增加相應名稱的CSS類；如果為object類型，則會使用html的css屬性，為行添加樣式。如果隻想增加css樣式而不更新資料，可以将data參數設為false。

例如：

var updateStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >[email protected]</a>"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};
           

　　

5. delRowData

        這個方法用于删除某行資料。執行成功傳回true，否則傳回false。具有一個參數rowid，代表要删除的行id。例如：

var deleteStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
};
           

6. trigger(“reloadGrid”)

        根據目前設定，重新載入Grid表格，即意味着向服務端重新發送一個新的請求。此方法隻能用于已經建構好的Grid。此外，此方法不會使對colModel所做出的改變生效。應該使用gridUnload來重新載入對colModel的新設定。例如:

$("#gridTable").jqGrid("setGridParam", {
datatype : "json",
search : true,
mtype : "post"
}).trigger("reloadGrid");
           

轉載于:https://www.cnblogs.com/jiangxifanzhouyudu/p/7411308.html