jqGrid -- 方法

原文:http://blog.whiledo.com/archives/351

jqGrid的方法,從3.6開始已經完全兼容jQuery UI庫。
用法:
<script>
...
jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
...
</script>

grid_id:表格的id;jqGridMethod:用到表格上的方法;parameter1,…parameterN :參數列表
此方法並不是返回請求的數據值而是返回一個jqGrid對象。

<script>
...
jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");
...
</script>

如果使用新的API:

<script>
...
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
...
</script>

grid_id:表格id;jqGrid:表格實例;method:表格支持的方法名;parameter1,...parameterN :參數列表

具體實例:

<script>
...
jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
...
</script>

jqGrid配置使用新的api

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery.jgrid.no_legacy_api = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
...
</body>
</html>

要注意

<script type="text/javascript">
	jQuery.jgrid.no_legacy_api = true;
</script>

這段代碼必須放在語言包之後jqGrid.js文件之前。

jqGrid方法

方法名 參數 返回值 說明
addJSONData data none 使用傳來的data數據填充表格。使用方法:var mygrid = jQuery(”#”+grid_id)[0];var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null;
addRowData rowid,data, position, srcrowid 成功爲true, 否則爲false 根據參數插入一行新的數據,rowid爲新行的id,data爲新行的數據,position爲新增行的位置,srcrowid爲新增行的參考位置。data數據格式:{name1:value1,name2: value2…} name爲在colModel中指定的名稱
addXMLData data none 根據傳來的數據填充表格。用法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML);
clearGridData clearfooter jqGrid對象 清除表格當前加載的數據。如果clearfooter爲true時則此方法刪除表格最後一行的數據
delRowData rowid 成功爲true否則爲false 根據rowid刪除行,但不會從服務器端刪除數據
footerData action,data, format jgGrid對象 設置或者取得底部數據。action:“get”或者“set”,默認爲“get”,如果爲“get”返回值爲name:value,name爲colModel中名稱。如果爲“set”則值爲name:value,name是colModel中的名稱。format:默認爲true,當爲true時,在設置新值時會調用formatter格式化數值
getCell rowid, iCol 單元格內容 返回指定rowid,iCol的單元格內容,iCol既可以是當前列在colModel中的位置索引也可以是name值。注意:在編輯行或者單元格時不能使用此方法,此時返回的並不是改變的值,而是原始值
getCol colname, returntype, mathoperation array[] or value 返回列的值。colname既可以是當前列在colModel中的位置索引也可以是name值。returntype指定返回數據的類型,默認爲false。當爲false時,返回的數組中只包含列的值,當爲true時返回數組是對象數組,具體格式 {id:rowid, value:cellvalue} ,id爲行的id,value爲列的值。如: [{id:1,value:1},{id:2,value:2}…]。mathoperation 可選值爲'sum, 'avg', 'count'
getDataIDs none array[] 返回當前grid裏所有數據的id
getGridParam name mixed value 返回請求的參數信息
getInd rowid,rowcontent mixed 如果rowcontent爲false,返回行所在的索引位置,id爲行id。rowcontent默認爲false。如果rowconent爲ture則返回的爲行對象,如果找不到行則返回false
getRowData rowid or none array{} 返回指定行的數據,返回數據類型爲name:value,name爲colModel中的名稱,value爲所在行的列的值,如果根據rowid找不到則返回空。在編輯模式下不能用此方法來獲取數據,它得到的並不是編輯後的值
hideCol colnameor[colnames] jqGrid對象 如果參數爲一個列名則隱藏此列,如果給定的是數組則隱藏指定的所有列。格式: [“name1”,”name2”]
remapColumns permutation, updateCells, keepHeader none 調整表格列的顯示順序,permutation爲當前列的順序,假如值是[1,0,2],那麼第一列就會在第二位顯示。如果updateCells爲ture則是對單元格數據進行重新排序,如果keepHeader爲true則對header數據顯示位置進行調整
resetSelection none jqGrid對象 選擇或者反選行數據,在多選模式下也同樣起作用
setCaption caption jqGrid對象 設置表格的標題
setCell rowid,colname, data, class, properties jqGrid對象 改變單元格的值。rowid:當前行id;colname:列名稱,也可以是列的位置索引,從0開始;data:改變單元格的內容,如果爲空則不更新;class:如果是string則會使用addClass方法將其加入到單元格的css中,如果是array則會直接加到style屬性中;properties:設置單元格屬性
setGridParam object jqGrid對象 設置grid的參數。有些參數的修改必須要重新加載grid纔可以生效,這個方法可以覆蓋事件
setGridHeight new_height jqGrid對象 動態改變grid的高度,只能對單元格的高度進行設置而不能對錶格的高度進行動態修改。new_height:可以是象素值,百分比或者"auto"
setGridWidth new_width,shrink jqGrid對象 動態改變表格的寬度。new_width:表格寬度,象素值;shrink:true或者false,作用同shrinkToFit
setLabel colname, data, class, properties jqGrid對象 給指定列設置一個新的顯示名稱。colname:列名稱,也可以是列的位置索引,從0開始;data:列顯示名稱,如果爲空則不修改;class:如果是string則會使用addClass方法將其加入到單元格的css中,如果是array則會直接加到style屬性中;properties:設置label的屬性
setRowData rowid,data, cssprop 成功true否則false 更新行的值,rowid爲行id。data值格式:{name1:value1,name2: value2…} name爲colModel中名稱;cssprop:如果是string則會使用addClass方法將其加入到行的css中,如果是array或者對象則會直接加到style屬性中
setSelection rowid,onselectrow jqGrid對象 選擇或反選指定行。如果onselectrow爲ture則會觸發事件onSelectRow,onselectrow默認爲ture
showCol colname jqGrid 顯示列。colname可以是數組[“name1”,”name2”],但是name1或者name2必須是colModel中的name
trigger(“reloadGrid”) none jqGrid對象 重新加載當前表格,也會向服務器發起新的請求
updateColumns none none 同步表格的寬度,用在表格拖拽時,用法:var mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns();

jqGrid的通用方法和設置
這些方法並不和jqGrid對象綁定,可以隨意使用:

<script>
...
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
...
</script>

jgrid.jqGridFunction 是函數名
parameter1,…parameterN 參數列表

函數名 參數 返回值 說明
ajaxOptions 空對象 none 這個函數可以改變jqgrid中用到的ajax請求參數,這個函數可以覆蓋當前所有ajax請求設置。從3.6版本開始起有3個級別的ajax設置:第一個級別就是在模塊中設置ajax請求;第二個級別就是通過此函數設置;第三級別的設置是控制全局ajax請求的設置:jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 當然我們也可以單獨設置ajax的參數
jqID string 解析後的string 轉義字符串,把兩個反斜槓(\\)轉化爲單個反斜槓(\)
jgrid.htmlDecode string 轉換後string 把轉碼後的字符串還原
jgrid.htmlEncode string 編碼後的string 把字符串編碼
jgrid.format string 格式化後string

簡單字符串模板。用法:Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4

result : “Please enter a value between 4 and 8.”

jgrid.getCellIndex cell index 這個方法是用來修復在ie7裏的一個bug
jgrid.stringToDoc xmlstring xmlDoc 把xmlstring轉換爲dom對象
jgrid.stripHtml content new_content 去掉html標籤返回標籤中內容
jgrid.parse jsonstring 對象 把一個jsonstring轉換爲json對象,

jqGrid的方法

方法名 參數 返回值 說明
filterGrid grid_id,params HTML對象 構造jqGrid的查詢界面。grid_id:表格id;params:參數
filterToolbar params jqGrid對象 同上。不同的是搜索輸入框在header層下方
getColProp colname array{} 返回指定列的屬性集合。name爲colModel中名稱
GridDestroy grid_id 成功true否則false 從dom上刪除此grid
GridUnload grid_id 成功true否則false 跟GridDestroy不同的是table對象跟pager對象並不會被刪除,以便下次使用
setGridState state jqGrid對象 設置grid的狀態,顯示或者隱藏。這個方法不會觸發onHeaderClick 事件。
setColProp colname, properties jqGrid對象 設置新的屬性,對於動態改變列屬性是非常有用的,但是有些屬性的修改並不會起效。用法:jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}});
sortGrid colname, reload jqGrid對象 按指定列進行排序。效果同setGridParam({sortname:'myname'}).trigger('reloadGrid'). 如果reload爲true則會重新加載數據
updateGridRows data,rowidname,jsonreader 成功true否則爲false 修改表格中某行的數據,data數據格式:[{name:value,name1:value1…}, {name:value,name2:value2…}],name爲colModel中的名稱;rowidname某行的名稱。jsonreader:boolean值,默認false。如果爲true則是定義數據的格式,data的值並不是name:value形式而只是value

發佈了33 篇原創文章 · 獲贊 8 · 訪問量 47萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章