jQuery學習筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能)
jqGrid 是一個用來顯示網(wǎng)格數(shù)據(jù)的jQuery插件,通過使用jqGrid可以輕松實現(xiàn)前端頁面與后臺數(shù)據(jù)的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");
但是經(jīng)過實際驗證,這種方式不可行,當選中行,再點擊同一行會出現(xiàn)獲取不到行號的情況。
最后先在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數(shù)組
var ids = $("jqgridtableid").jqGrid('getDataIDs');
(4)、獲取行數(shù)據(jù)
如果想獲取選擇的行的數(shù)據(jù),只要傳入rowId即可,如下:
var rowData = $('#gridTable').jqGrid('getRowData',rowId);
而這個rowData是一個對象,如果要獲取選擇的行的這個對象的屬性值,如name的值,需如下:
var Name= rowData.name;
(5)、獲取單元格數(shù)據(jù)
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
(6)、設(shè)定行選中
//設(shè)定選中行,可設(shè)定多行選中: $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);
2、自定義分頁、數(shù)據(jù)交互
何謂自定義?就是允許你用你自己喜歡的js對象與后端做數(shù)據(jù)交互。如jsonReader。
如果這個地方的Id設(shè)置錯了,那么jqGrid就會自動以行號作為Id,這樣會影響刪除的。如果根據(jù)Id來刪,很有可能刪錯行。
jsonReader: { id: "Id", //相當于設(shè)置主鍵 root: "JsonArray", //Json數(shù)據(jù) total: "TotalPage", //總頁數(shù) page: "CurrentPage", //當前頁 records: "TotalRecord",//總記錄數(shù) repeatitems: false },
這樣一來,對于數(shù)據(jù)表格,在C#中,我可以用一個泛型類,就能夠與jqGrid表格進行交互(其中,包括了分頁信息,數(shù)據(jù)內(nèi)容)。
/// <summary> /// 分頁ViewModel /// </summary> public class jQGrid<T> where T : class { public jQGrid() { } /// <summary> /// 帶4個參數(shù)的構(gòu)造函數(shù) /// </summary> /// <param name="rows">每頁顯示行數(shù)</param> /// <param name="currentPage">當前頁</param> /// <param name="totalRecord">結(jié)果總記錄數(shù)</param> /// <param name="jsonArray">JSON數(shù)據(jù)</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> /// 根據(jù)每頁顯示數(shù)與總記錄數(shù)計算出總頁數(shù) /// </summary> /// <param name="rows">每頁顯示數(shù)</param> /// <param name="totalRecord">結(jié)果總記錄數(shù)</param> /// <returns></returns> public int CalculateTotalPage(int rows, int totalRecord) { return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows)); } }
3、搜索的實現(xiàn)
搜索的實現(xiàn)主要通過jqGrid的postData像服務(wù)器端傳遞參數(shù)。
$("#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向服務(wù)器端傳遞數(shù)據(jù)。后端獲取參數(shù)從而進行處理:
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>; }
這樣就獲取到了查詢參數(shù)的鍵值對,至于參數(shù)怎么用,一般都是用于sql的where子句。
三、更多jqGrid配置屬性說明
1、屬性
參數(shù)名稱
|
類型
|
描述
|
默認值
|
是否可以被修改
|
ajaxGridOptions
|
object
|
對ajax參數(shù)進行全局設(shè)置,可以覆蓋ajax事件:error,complete 和 beforeSend
|
空值
|
是
|
ajaxGridOptions
|
object
|
對ajax參數(shù)進行全局設(shè)置
|
空值
|
是
|
ajaxSelectOptions
|
object
|
對ajax的select參數(shù)進行全局設(shè)置,設(shè)置editoptions跟searchoptions 參數(shù)的select屬性值
|
空值
|
是
|
altclass
|
String
|
用于表格行交替變色的class屬性。你可以定義自己的class來替代默認值。只有當altRows屬性設(shè)置為true時,該屬性才起作用
|
ui-priority-secondary
|
是,但需要重新加載
|
altRows
|
boolean
|
設(shè)置表格是否允許行交替變色值
|
false
|
是,需重新加載
|
autoencode
|
boolean
|
當為 ture 時對url進行編碼
|
false
|
是
|
autowidth
|
boolean
|
如果為ture時,則當表格在首次被創(chuàng)建時會根據(jù)父元素比例重新調(diào)整表格寬度。如果父元素寬度改變,為了使表格寬度能夠自動調(diào)整則需要實現(xiàn)函數(shù):setGridWidth
|
false
|
否
|
caption
|
String
|
定義表格名稱
|
空值
|
否,但是可以用api修改
|
cellLayout
|
integer
|
定義了單元格padding + border 寬度。通常不必修改此值。初始值為5,paddingLef?2+paddingRight?2+borderLeft?1=5
|
5
|
否
|
cellEdit
|
boolean
|
啟用或者禁用單元格編輯功能
|
false
|
是
|
cellsubmit
|
String
|
定義了單元格內(nèi)容保存位置:“remote”,“clientArray”
|
‘remote'
|
是
|
cellurl
|
String
|
單元格提交的url
|
空值
|
是
|
colModel
|
array
|
對顯示列屬性的設(shè)置,是一個數(shù)組對象。常用到的屬性:name 列顯示的名稱;index 傳到服務(wù)器端用來排序用的列名稱;width 列寬度;align 對齊方式;sortable 是否可以排序
|
空值
|
否
|
colNames
|
array[]
|
放置列名稱的數(shù)組,必須與colModel大小相同
|
空數(shù)組
|
否
|
datastr
|
String
|
xmlstring或者jsonstring
|
空值
|
是
|
datatype
|
string
|
從服務(wù)器端返回的數(shù)據(jù)類型,(表格期望接收的數(shù)據(jù)類型)??蛇x類型:xml,xmlstring,json,local,function
|
xml
|
是
|
deselectAfterSort
|
boolean
|
只有當datatype為local時起作用。當排序時不選擇當前行
|
true
|
是
|
direction
|
string
|
表格中文字的顯示方向,從左向右(ltr)或者從右向左(rtr)。
|
ltr
|
否
|
editurl
|
string
|
定義對form編輯時的url
|
空值
|
是
|
emptyrecords
|
string
|
當返回的數(shù)據(jù)行數(shù)為0時顯示的信息。只有當屬性 viewrecords 設(shè)置為ture時起作用
|
在語言包中
|
是
|
ExpandColClick
|
boolean
|
當為true時,點擊展開行的文本時,treeGrid就能展開或者收縮,不僅僅是點擊圖片
|
true
|
否
|
ExpandColumn
|
string
|
指定那列來展開tree grid,默認為第一列,只有在treeGrid為true時起作用
|
空值
|
否
|
footerrow
|
boolean
|
當為true時,會在翻頁欄之上增加一行
|
false
|
否
|
forceFit
|
boolean
|
當為ture時,調(diào)整列寬度不會改變表格的寬度。當shrinkToFit 為false時,此屬性會被忽略
|
false
|
否
|
gridstate
|
string
|
定義當前表格的狀態(tài):'visible' or 'hidden'
|
visible
|
否
|
gridview
|
boolean
|
構(gòu)造一行數(shù)據(jù)后添加到grid中,如果設(shè)為true則是將整個表格的數(shù)據(jù)都構(gòu)造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用
|
false
|
是
|
height
|
mixed
|
表格高度,可以是數(shù)字,像素值或者百分比
|
150
|
否
|
hiddengrid
|
boolean
|
當為ture時,表格不會被顯示,只顯示表格的標題。只有當點擊顯示表格的那個按鈕時才會去初始化表格數(shù)據(jù)。只有當caption 屬性不為空而且hidegrid為ture時才起作用
|
false
|
否
|
hidegrid
|
boolean
|
啟用或者禁用控制表格顯示、隱藏的按鈕,只有當caption 屬性不為空時起效
|
true
|
否
|
hoverrows
|
boolean
|
當為false時mouse hovering會被禁用
|
false
|
是
|
jsonReader
|
array
|
描述json期望數(shù)據(jù)格式的數(shù)組。
|
否
|
|
lastpage
|
integer
|
只讀屬性,定義了總頁數(shù)
|
0
|
否
|
lastsort
|
integer
|
只讀屬性,定義了最后排序列的索引,從0開始
|
0
|
否
|
loadonce
|
boolean
|
如果為ture則數(shù)據(jù)只從服務(wù)器端抓取一次,之后所有操作都是在客戶端執(zhí)行,翻頁功能會被禁用
|
false
|
否
|
loadtext
|
string
|
當請求或者排序時所顯示的文字內(nèi)容
|
Loading....
|
否
|
loadui
|
string
|
當執(zhí)行ajax請求時要干什么。disable禁用ajax執(zhí)行提示;enable默認,當執(zhí)行ajax請求時的提示; block啟用Loading提示,但是阻止其他操作
|
enable
|
是
|
mtype
|
string
|
請求的類型:(“POST” or “GET”)
|
GET
|
是
|
multikey
|
string
|
只有在multiselect設(shè)置為ture時起作用,定義使用那個key來做多選。shiftKey,altKey,ctrlKey
|
空值
|
是
|
multiboxonly
|
boolean
|
只有當multiselect = true.起作用,當multiboxonly 為ture時只有選擇checkbox才會起作用,
|
false
|
是
|
multiselect
|
boolean
|
定義是否可以多選
|
false
|
否
|
multiselectWidth
|
integer
|
當multiselect為true時設(shè)置multiselect列寬度
|
20
|
否
|
page
|
integer
|
設(shè)置初始的頁碼
|
1
|
是
|
pager
|
mixed
|
指定分頁欄對象,必須為一個有效的html元素??梢允?pager', '#pager', jQuery('#pager').推薦用'#pager'
|
空值
|
否
|
pagerpos
|
string
|
指定分頁欄的位置
|
center
|
否
|
pgbuttons
|
boolean
|
是否顯示翻頁按鈕
|
true
|
否
|
pginput
|
boolean
|
是否顯示跳轉(zhuǎn)頁面的輸入框
|
true
|
否
|
pgtext
|
string
|
當前頁信息
|
語言包中設(shè)置
|
是
|
prmNames
|
array
|
Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 當參數(shù)為null時不會被發(fā)到服務(wù)器端
|
none
|
是
|
postData
|
array
|
此數(shù)組內(nèi)容直接賦值到url上,參數(shù)類型:{name1:value1…}
|
空array
|
是
|
reccount
|
integer
|
只讀屬性,定義了grid中確切的行數(shù)。通常情況下與records屬性相同,但有一種情況例外,假如rowNum=15,但是從服務(wù)器端返回的記錄數(shù)是20,那么records值是20,但reccount值仍然為15,而且表格中也只顯示15條記錄。
|
0
|
否
|
recordpos
|
string
|
定義了記錄信息的位置: left, center, right
|
right
|
否
|
records
|
integer
|
只讀屬性,定義了返回的記錄數(shù)
|
none
|
否
|
recordtext
|
string
|
顯示記錄數(shù)信息。{0} 為記錄數(shù)開始,{1}為記錄數(shù)結(jié)束。 viewrecords為ture時才能起效,且總記錄數(shù)大于0時才會顯示此信息
|
語言包
|
是
|
resizeclass
|
string
|
定義一個class到一個列上用來顯示列寬度調(diào)整時的效果
|
空值
|
否
|
rowList
|
array[]
|
一個數(shù)組用來調(diào)整表格顯示的記錄數(shù),此參數(shù)值會替代rowNum參數(shù)值傳給服務(wù)器端。如果為空則不顯示,設(shè)置格式:[10,20,30]。
|
[]
|
否
|
rownumbers
|
boolean
|
如果為ture則會在表格左邊新增一列,顯示行順序號,從1開始遞增。此列名為'rn'.
|
false
|
否
|
rowNum
|
integer
|
設(shè)置表格中顯示的記錄數(shù),參數(shù)會被自動傳到后臺。如果此參數(shù)設(shè)為10,但是從服務(wù)器端返回15條記錄,那么在表格中只會顯示10條記錄。如果設(shè)為-1則禁用此檢查
|
20
|
是
|
rownumWidth
|
integer
|
如果rownumbers為true,則可以設(shè)置column的寬度
|
25
|
否
|
savedRow
|
array
|
只讀屬性,只用在編輯模式下保存數(shù)據(jù)
|
空值
|
否
|
scroll
|
boolean or integer
|
創(chuàng)建一個動態(tài)滾動的表格,當為true時,翻頁欄被禁用,使用垂直滾動條加載數(shù)據(jù),且在首次訪問服務(wù)器端時將加載所有數(shù)據(jù)到客戶端。當此參數(shù)為數(shù)字時,表格只控制可見的幾行,所有數(shù)據(jù)都在這幾行中加載
|
false
|
否
|
scrollOffset
|
integer
|
設(shè)置垂直滾動條寬度
|
18
|
否
|
scrollrows
|
boolean
|
當為true時讓所選擇的行可見
|
false
|
是
|
selarrrow
|
array-[]
|
只讀屬性,用來存放當前選擇的行
|
empty array []
|
否
|
selrow
|
string
|
只讀屬性,最后選擇行的id
|
null
|
否
|
shrinkToFit
|
boolean
|
此屬性用來說明當初始化列寬度時候的計算類型,如果為ture,則按比例初始化列寬度。如果為false,則列寬度使用colModel指定的寬度
|
true
|
否
|
sortable
|
boolean
|
是否可排序
|
false
|
否
|
sortname
|
string
|
排序列的名稱,此參數(shù)會被傳到后臺
|
空字符串
|
是
|
sortorder
|
string
|
排序順序,升序或者降序(asc or desc)
|
asc
|
是
|
subGrid
|
boolean
|
是否使用suggrid
|
false
|
否
|
subGridModel
|
array-[]
|
subgrid模型
|
empty array
|
否
|
subGridType
|
mixed
|
如果為空則使用表格的dataType
|
null
|
是
|
subGridUrl
|
string
|
加載subgrid數(shù)據(jù)的url,jqGrid會把每行的id值加到url中
|
空值
|
是
|
subGridWidth
|
integer
|
subgrid列的寬度
|
20
|
否
|
toolbar
|
array
|
表 格的工具欄。數(shù)組中有兩個值,第一個為是否啟用,第二個指定工具欄位置(相對于body layer),如:[true,”both”] 。工具欄位置可選值:“top”,”bottom”, “both”. 如果工具欄在上面,則工具欄id為“t_”+表格id;如果在下面則為 “tb_”+表格id;如果只有一個工具欄則為 “t_”+表格id
|
[false,'']
|
否
|
totaltime
|
integer
|
只讀屬性,計算加載數(shù)據(jù)的時間。目前支持xml跟json數(shù)據(jù)
|
0
|
否
|
treedatatype
|
mixed
|
數(shù)據(jù)類型,通常情況下與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
|
是否要顯示總記錄數(shù)
|
false
|
否
|
viewsortcols
|
array
|
定 義排序列的外觀跟行為。數(shù)據(jù)格式:[false,'vertical',true].第一個參數(shù)是說,是否都要顯示排序列的圖標,false就是只顯示當 前排序列的圖標;第二個參數(shù)是指圖標如何顯示,vertical:排序圖標垂直放置,horizontal:排序圖標水平放置;第三個參數(shù)指單擊功 能,true:單擊列可排序,false:單擊圖標排序。說明:如果第三個參數(shù)為false則第一個參數(shù)必須為ture否則不能排序
|
否
|
|
width
|
number
|
如果設(shè)置則按此設(shè)置為主,如果沒有設(shè)置則按colModel中定義的寬度計算
|
none
|
否
|
xmlReader
|
array
|
對xml數(shù)據(jù)結(jié)構(gòu)的描述
|
否
|
url
|
獲取數(shù)據(jù)的地址
|
datatype
|
從服務(wù)器端返回的數(shù)據(jù)類型,默認xml??蛇x類型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside
|
mtype
|
ajax提交方式。POST或者GET,默認GET
|
colNames
|
列顯示名稱,是一個數(shù)組對象。
|
colModel
|
對顯示列屬性的設(shè)置,是一個數(shù)組對象。常用到的屬性:name 列顯示的名稱;index 傳到服務(wù)器端用來排序用的列名稱;width 列寬度;align 對齊方式;sortable 是否可以排序
|
pager
|
定義翻頁用的導(dǎo)航欄,必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置
|
rowNum
|
在grid上顯示記錄條數(shù),這個參數(shù)是要被傳遞到后臺
|
rowList
|
一個下拉選擇框,用來改變顯示記錄數(shù),當選擇時會覆蓋rowNum參數(shù)傳遞到后臺
|
sortname
|
默認的排序列??梢允橇忻Q或者是一個數(shù)字,這個參數(shù)會被提交到后臺
|
viewrecords
|
定義是否要顯示總記錄數(shù)
|
caption
|
表格名稱
|
2、事件
事件 | 參數(shù) | 描述 |
afterInsertRow | rowid rowdata rowelem |
此事件發(fā)生在每次插入行后 rowid 為插入的行ID rowdata 是被插入行的數(shù)據(jù)數(shù)組。格式為name:value對,name在colModel定義 rowelem 是應(yīng)答元素。xml為xml行,json為所有行數(shù)據(jù)。 注意:若gridview 為true,此事件不會發(fā)生 |
beforeRequest | none | 此事件發(fā)生在任何數(shù)據(jù)請求前,但當datatype為function時不發(fā)生。 |
beforeSelectRow | rowid, e | 此事件發(fā)生在用戶點擊行,選中該行前。 rowid 為行的ID,e為事件對象 該事件將返回布爾值true(行被選中)或false(行未被選中)。 |
gridComplete | none | 此事件發(fā)生在表格所有數(shù)據(jù)裝入和進程完成后。與datatype參數(shù)及排序分頁等無關(guān)。 |
loadBeforeSend | xhr, settings |
此事件發(fā)生在XMLHttpRequest被發(fā)送前,用于修改對象屬性(如headers)。 xhr 為XMLHttpRequest對象。 |
loadComplete | data | 此事件發(fā)生在每個服務(wù)器請求后。xhr 為XMLHttpRequest對象。 |
loadError | xhr, status, error |
此事件在請求失敗時發(fā)生。事件有3個參數(shù): xhr 為XMLHttpRequest對象; Satus 為錯誤類型描述;error 為錯誤對象。 |
onCellSelect | rowid, iCol, cellcontent, e |
此事件在點擊表格特定單元格時發(fā)生。 rowid 為行ID;iCol 為列索引; cellcontent 為單元格中內(nèi)容; e 點擊事件對象。 |
ondblClickRow | rowid, iRow, iCol, e |
此事件發(fā)生在行雙擊后發(fā)生。 rowid為行ID;iRow 為行索引(勿與rowid混淆); iCol為列索引; e 為事件對象。 |
onHeaderClick | gridstate | 此事件發(fā)生在點擊顯示或隱藏表格后發(fā)生(hidegrid為true) gridstate為表格狀態(tài),有visible和hidden兩個值 |
onPaging | pgButton | 此事件發(fā)生在點擊page button后,填充數(shù)據(jù)前,及用戶輸入一個與當前頁頁碼不同的新頁碼并回車時。 |
onRightClickRow | rowid, iRow, iCol, e |
此事件發(fā)生在右擊行后。(此事件在Opera瀏覽器中無效) rowid為行ID;iRow為行索引(勿與rowid混淆) iCol為列索引; e為事件對象 |
onSelectAll | aRowids, status |
此事件發(fā)生在點擊標題的復(fù)選框時發(fā)生(multiselect為true) aRowids 選定行ID的數(shù)組(哪些行的復(fù)選框與頭復(fù)選框相同) status 頭復(fù)選框的選定的布爾值,true為選中,false為 |
onSelectRow | rowid, status |
此事件發(fā)生在行點擊后 rowid 為行ID; status 為選擇狀態(tài)。當multiselect為true時使用,當行被選中時返回true;為選中時返回false。 |
onSortCol | index, iCol, sortorder |
此事件發(fā)生在列排序被點擊之后,數(shù)據(jù)排序前 index 為colModel 中定義的索引名iCol 為列的索引號 sortorder 為新的排序方式,asc或desc |
resizeStart | event, index | 此事件發(fā)生在列被重新定義寬度時。 event 為事件對象;index 為在colModel 中定義的列索引。 |
resizeStop | newwidth, index | 此事件發(fā)生在列被重新定義寬度后。 newwidth 為新的列寬度;index 為在colModel 中定義的列索引。 |
serializeGridData | postData | 通過此事件可以序列化傳遞給ajax請求的的數(shù)據(jù)。此事件將返回一個以序列化的數(shù)據(jù)。若有自定義的數(shù)據(jù)(如JSON字符串、XML字符串)要發(fā)給服務(wù)器時,可使用該事件。 |
3、方法
方法 | 參數(shù) | 返回值 | 描述 |
addJSONData | data | none | 用傳遞的data(數(shù)組)填充網(wǎng)格。用法:假如我們從web服務(wù)器獲得的數(shù)據(jù)(jsonresponse),則 var mygrid = jQuery(”#”+grid_id)[0]; var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; 將填充網(wǎng)格。當然,myjsongrid中的數(shù)據(jù)在傳遞到addJSONData之前可以被操作。 |
addRowData | rowid, data, position, srcrowid |
true on success, false otherwise |
插入一新行,rowid 為新行的ID,data(數(shù)組)為新行數(shù)據(jù),position為新行插入的位置(first為表頭,last為表尾,srcrowid指定偏移位置)。Data數(shù)組的格式為:{name1:value1,name2: value2…} ,name為colModel指定的名稱。 |
addXmlData | data | none | 用傳入的data填充網(wǎng)格。用法:假如我們從web服務(wù)器獲得數(shù)據(jù) (xmlresponse),則 var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); 將填充網(wǎng)格。當然,xmlresponse中的數(shù)據(jù)在傳遞到addXmlData之前可以被操作。 |
clearGridData | clearfooter | jqGrid object | 清除網(wǎng)格中當前裝入的數(shù)據(jù),如果clearfooter 參數(shù)為true,則清除網(wǎng)格最后一行數(shù)據(jù)。 |
delRowData | rowid | true on success, false otherwise |
刪除id = rowid的行。但不會刪除服務(wù)器上的數(shù)據(jù)。 |
footerData | action, data, format |
jqGrid object | 此方法獲得或設(shè)置網(wǎng)格底部數(shù)據(jù)。 action – 可設(shè)置為get(缺?。┗騭et。 Get從底部返回name:value對象(name為colModel中的名稱)。此時其他兩個參數(shù)無效。 Set將data數(shù)組(對象)設(shè)置到底部。Data為colName中的名稱和值對。 format – 缺省為true,表示設(shè)置時使用formatter (如果colModel中已定義)。false表示不使用formatter |
getCell | rowid, iCol |
cell content | 返回id = rowid行,column = iCol列的內(nèi)容。 iCol可以是列的索引或colName中定義的名稱。在編輯行或列時不能使用該方法,此時返回的不是當前值,而是原始值。 |
getCol | colname, returntype, mathoperation | array[] or value | 返回列值數(shù)組。 colname 可以是列的索引值或colModel中的名稱。returntype 確定返回數(shù)組的類型,為false(缺省)時,數(shù)組只包含值。為true時為對象數(shù)組,格式為{id:rowid, value:cellvalue},id為行的id, cellvalue為單元格的值。如 [{id:1,value:1},{id:2,value:2}…] mathoperation為可選參數(shù),可以是sum、avg和count。若此參數(shù)進行了有效設(shè)置,則返回計算后的值,若無效,則返回空數(shù)組。 |
getDataIDs | none | array[] | 返回當前網(wǎng)格顯示數(shù)據(jù)的ID數(shù)組。無數(shù)據(jù)時返回空數(shù)組。 |
getGridParam | name | mixed value | 返回請求的參數(shù)的值。name 是options 數(shù)組中的名稱,若為設(shè)置則options被返回。 |
getInd | rowid, rowcontent |
mixed | 當rowcontent 設(shè)置為false(缺省)時,返回id= rowid行的索引值。若rowcontent設(shè)置為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行的數(shù)據(jù)數(shù)組。格式為name:value對,name為colModel中的名稱,value為該行的值。未找到返回空數(shù)組。在行或列編輯時此方法不可用,此時返回的不是當前值,而是原始值。 若rowid為設(shè)置,則返回網(wǎng)格中所有數(shù)據(jù)數(shù)組。 |
hideCol | colname or [colnames] |
jqGrid object | 根據(jù)colname或colnames數(shù)組給定的列名隱藏相應(yīng)的列,列名必須是colModel中定義的名稱。表格的寬度不會改變。 |
remapColumns | permutation, updateCells, keepHeader | none | 調(diào)整列的顯示順序。permutation指定調(diào)整后的順序,如 [1,0,2] 表示第一列在第二位顯示。若updateCells 設(shè)置為true,列數(shù)據(jù)將重新排序。若keepHeader 設(shè)置為true,header單元格將重新排序。 |
resetSelection | none | jqGrid object | 選擇(反選)行。多選擇模式下同樣可用。 |
setCaption | caption | jqGrid object | 設(shè)置新的表頭文字。若表頭為隱藏,將顯示。 |
setCell | rowid, colname, data, class, properties, forceup |
jqGrid object | 修改單元格的值、類或樣式。其中: rowid為行ID;colname為列名(可以是從0開始的列的索引值); data 設(shè)置的內(nèi)容,若為空,class若為字符串,將使用addClass為列加入一個類,若為數(shù)組,將直接加入CSS中;properties 設(shè)置單元格屬性。 |
setGridParam | object | jqGrid object | 設(shè)置一個特定的參數(shù)。 有些參數(shù)需trigger(“reloadGrid”)才能生效。注意這個方法可以覆蓋事件。名稱(name:value對)為選項數(shù)組中的名稱。 |
setGridHeight | new_height | jqGrid object | 動態(tài)設(shè)置網(wǎng)格高度。只能對單元格的高度進行設(shè)置而不是網(wǎng)格。new_height 可以是像素、百分比或auto。 |
setGridWidth | new_width, shrink |
jqGrid object | 動態(tài)設(shè)置網(wǎng)格寬度。new_width 為新寬度的像素值; shrink(true或false)作用同shrinkToFit。若不設(shè)置,則使用shrinkToFit設(shè)置。 |
setLabel | colname, data, class, properties |
jqGrid object | 設(shè)置指定列標題文字、屬性和類: colname 為列名,可以是從0開始的列索引; data 為標題文字,為空則不修改; class 若為字符串,則為類名,若為數(shù)組,則直接寫入CSS; properties 為標題文字的屬性。 |
setRowData | rowid, data, cssprop |
true on success, false otherwise |
更新rowid指定行的數(shù)據(jù)(使用數(shù)組)。 Data數(shù)組的格式為: {name1:value1,name2: value2…} 。name為colModel中描述的名稱,value為新值。cssprop若為字符串,將使用addClass為行添加類;若為數(shù)組對象,則直接加入CSS中。將data設(shè)置為false的情況下,可設(shè)置屬性和類名 |
setSelection | rowid, onselectrow |
jqGrid object | 選擇或反選id = rowid指定的行。若onselectrow設(shè)置為true (缺省) 則觸發(fā)onSelectRow事件,否則不觸發(fā)。 |
showCol | colname | jqGrid object | 顯示colname 指定的列。若colname為字符串,只顯示指定的列,若colname為數(shù)組 [“name1”,”name2”] 則顯示name1和name2列, name必須是colModel中的名稱。寬度不變。 |
trigger(“reloadGrid”) | none | none | 按當前設(shè)置重新加載網(wǎng)格。若datatype為xml或json,將從服務(wù)器重新請求數(shù)據(jù)。此方法適用于一個已建立的網(wǎng)格。注意不會改變表頭,也就是說改變colModel將沒有作用。你可用gridUnload,使用新colModel來重新加載。 |
updateColumns | none | none | 在拖拽表格時,同步網(wǎng)格寬度。用法: var mygrid=jQuery(”#grid_id”)[0]; mygrid.updateColumns(); |
四、問題記錄
1、IE9下jQgrid一直出現(xiàn)水平滾動條的問題。
解決:是因為jqGrid會在IE下出現(xiàn)border與padding造成寬度過大引起的,增加此屬性可解決:
cellLayout:0
此時當頁面縮放擺100%時,已經(jīng)不顯示滾動條,但是縮放比例不為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默認的自定義編輯列,只能設(shè)置編輯按鈕與刪除按鈕。并且圖標基本上都很難控制,如果想自己實現(xiàn)自己的自定義編輯列,可以如下操作:
在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; } } );
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- 基于jQuery封裝的分頁組件
- jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- 基于jQuery的實現(xiàn)簡單的分頁控件
- jQuery中jqGrid分頁實現(xiàn)代碼
- 基于JQuery的Pager分頁器實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery DataTables插件自定義Ajax分頁實例解析
- jQuery從零開始做一個分頁組件功能示例
相關(guān)文章
得到j(luò)Query detach()后節(jié)點中的某個值實現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個值,如何獲取到呢?一直困惑著我們,不過本文將為大家解開疑惑,感興趣的朋友可以了解下,或許本文對你有所幫助2013-02-02jQuery移動端日期(datedropper)和時間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時間選擇器,它分為日期選擇器datedropper以及時間選擇器timedropper,他們倆尤其適合在移動端上應(yīng)用。感興趣的小伙伴一起學習吧2016-04-04基于JavaScript如何實現(xiàn)ajax調(diào)用后臺定義的方法
由于ajax的獨特優(yōu)勢,使得它在當前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺定義的函數(shù),對ajax調(diào)用后臺方法相關(guān)知識感興趣的朋友一起學習吧2015-12-12jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法,涉及jQuery響應(yīng)鼠標事件及針對頁面元素的樣式與字符串正則操作相關(guān)技巧,需要的朋友可以參考下2016-07-07jQuery的3種請求方式$.post,$.get,$.getJSON
這篇文章主要介紹了jQuery的3種請求方式$.post,$.get,$.getJSON,需要的朋友可以參考下2014-03-03