當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jqGrid 常用方法

發(fā)布時間：2023/12/2 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 jqGrid 常用方法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

jqGrid的通用方法和設(shè)置?

這些方法并不和jqGrid對象綁定，可以隨意使用：?

jQuery.jgrid.jqGridFunction( parameter1,...parameterN );

函數(shù)名	參數(shù)	返回值	說明
ajaxOptions	空對象	none	這個函數(shù)可以改變jqgrid中用到的ajax請求參數(shù)，這個函數(shù)可以覆蓋當(dāng)前所有ajax請求設(shè)置。從3.6版本開始起有3個級別的ajax設(shè)置：第一?個級別就是在模塊中設(shè)置ajax請求；第二個級別就是通過此函數(shù)設(shè)置；第三級別的設(shè)置是控制全局ajax請求的設(shè)置：jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds));?當(dāng)然我們也可以單獨(dú)設(shè)置ajax的參數(shù)
jqID	string	解析后的string	轉(zhuǎn)義字符串，把兩個反斜杠(\\)轉(zhuǎn)化為單個反斜杠(\)
jgrid.htmlDecode	string	轉(zhuǎn)換后string	把轉(zhuǎn)碼后的字符串還原
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	這個方法是用來修復(fù)在ie7里的一個bug
jgrid.stringToDoc	xmlstring	xmlDoc	把xmlstring轉(zhuǎn)換為dom對象
jgrid.stripHtml	content	new_content	去掉html標(biāo)簽返回標(biāo)簽中內(nèi)容
jgrid.parse	jsonstring	對象	把一個jsonstring轉(zhuǎn)換為json對象

其他方法

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

1.clearGridData（clearfooter）?清除表格當(dāng)前加載的數(shù)據(jù)。如果clearfooter為true時則此方法刪除表格最后一行的數(shù)據(jù)。

$('#jqgrid').clearGridData(true); //清除表格當(dāng)前加載的數(shù)據(jù) $("#searchbtn").click(function () {$('#jqgrid').clearGridData(true);//刪除表格的最后一行initTable(); });$("#jqgrid").jqGrid('clearGridData');

2.addRowData（rowid,data, position, srcrowid）?根據(jù)參數(shù)插入一行新的數(shù)據(jù)，rowid為新行的id，data為新行的數(shù)據(jù)，position為新增行的位置，srcrowid為新增行的參考位置。data數(shù)據(jù)格式：{name1:value1,name2: value2…} name為在colModel中指定的名稱

3.delRowData??根據(jù)rowid刪除行，但不會從服務(wù)器端刪除數(shù)據(jù)

jqgrid.jqGrid('delRowData', rowid);

4.getGridParam(option)? ?option為jqgrid初始化的參數(shù)如：url，colModel，rowNum，selarrrow等

grid.jqGrid('getGridParam', 'colModel')//拿到colModel的參數(shù)信息 $jqgridCached.jqGrid('getGridParam','selarrrow');//拿到j(luò)grid中所有選擇的數(shù)據(jù)的id
var ids = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow'); if (ids.length === 0) { Util.showAlert("請先選擇缺課學(xué)員", true); return false; } ?

function initTable() { EduBoss.generateTable(productInfoTable, {url:Api.getYingYeReportWebControllerSummary,colModel: colModel,nosort: true,footerrow: true,loadComplete: function () {//最底下統(tǒng)計(jì)欄var sumObj = {}; // 匯總數(shù)據(jù)var size = 0;$(productInfoTable.jqGrid('getGridParam', 'colModel')).each(function (i) {if (i == 0) {sumObj[$(this).attr('name')] = '合計(jì)'; //??怎么直接可以$(this).attr("name")?直接拿到了name對應(yīng)的字符串了呢？} //this是一個對象，$(this).attr("name")? //productInfoTable.jqGrid('getGridParam', 'colModel') 返回的是一個數(shù)組，就是colModal if ($(this).attr('sum')) { size++; sumObj[$(this).attr('name')] = parseFloat(productInfoTable.getCol($(this).attr('name'), false, 'sum')).toFixed(2); } }); if (size > 0) { productInfoTable.footerData('set', sumObj); } else { $(".footrow").remove(); } } }) } var postData = grid.jqGrid("getGridParam", "postData"); grid.jqGrid("setGridParam", {page:1}); grid.jqGrid("setGridParam",{postData:EduBoss.commonUtils.tranFormVarToJson($("#frm"))}).trigger("reloadGrid")

var text = {yyy:"yys"};
console.log($(text).attr("yyy"))=》為什么會輸出yys？

5.footerData(action,data, format)? 設(shè)置或者取得底部數(shù)據(jù)。action：“get”或者“set”，默認(rèn)為“get”，如果為“get”返回值為name:value，name為colModel中名稱。如果為“set”則值為name：value，name是colModel中的名稱。format：默認(rèn)為true，當(dāng)為?true時，在設(shè)置新值時會調(diào)用formatter格式化數(shù)值

loadComplete : function(data){ highchartsObj.loadData();var sumObj = {}; // 匯總數(shù)據(jù)var size = 0; $($("#jqgrid").jqGrid('getGridParam','colModel')).each(function(i){//遍歷每一列if(i==0){sumObj[$(this).attr('name')] = '合計(jì)';}if($(this).attr('sum')){size++;//var sumNum = ;sumObj[$(this).attr('name')] = parseFloat($("#jqgrid").getCol($(this).attr('name'),false,'sum')).toFixed(0);}});if(size > 0){$("#jqgrid").footerData('set', sumObj);}else{$(".footrow").remove();} },

6.getCol（colname, returntype, mathoperation）返回列的值。colname既可以是當(dāng)前列在colModel中的位置索引也可以是name值。returntype指定返回?cái)?shù)據(jù)的類型，默認(rèn)為false。當(dāng)為false時，返回的數(shù)組中只包含列的值，當(dāng)為true時返回?cái)?shù)組是對象數(shù)組，具體格式?{id:rowid, value:cellvalue}?，id為行的id，value為列的值。如：?[{id:1,value:1},{id:2,value:2}…]。mathoperation?可選值為'sum, 'avg', 'count'

7.getCell (rowid, iCol)?返回指定rowid，iCol的單元格內(nèi)容，iCol既可以是當(dāng)前列在colModel中的位置索引也可以是name值。注意：在編輯行或者單元格時不能使用此方法，此時返回的并不是改變的值，而是原始值

8.getDataIDs()?返回當(dāng)前grid里所有數(shù)據(jù)的id

loadComplete: function () {var ids = jqgrid.jqGrid('getDataIDs');for (var i = 0; i < ids.length; i++) {var cl = ids[i];var row = jqgrid.jqGrid('getRowData', cl); } }

9.getRowData(rowid or none)? ?返回指定行的數(shù)據(jù)，返回?cái)?shù)據(jù)類型為name:value，name為colModel中的名稱，也就是name。value為所在行的列的值，如果根據(jù)rowid找不到則返回空。在編輯模式下不能用此方法來獲取數(shù)據(jù)，它得到的并不是編輯后的值

var row = jqgrid.jqGrid('getRowData', cl);

10.setGridParam （object）?設(shè)置grid的參數(shù)。有些參數(shù)的修改必須要重新加載grid才可以生效，這個方法可以覆蓋事件

if(jqgrid.parents(".ui-corner-all").length > 0){ //要等table加載出來后再重新設(shè)置他的postData才有效jqgrid.jqGrid("setGridParam", {postData: {"studentId":studentId}}).trigger("reloadGrid");} function search(){var params = EduBoss.commonUtils.tranFormVarToJson(_form);params["id"] = schoolId;params["region.id"] = regionId;params["schoolType.id"] = schoolTypeId;jqgrid.jqGrid("setGridParam", {page : 1});jqgrid.jqGrid("setGridParam",{postData : params}).trigger("reloadGrid");}

11.getGridParam?

12.setRowData（rowid,data, cssprop）?更新行的值，rowid為行id。data值格式：{name1:value1,name2: value2…} name為colModel中對應(yīng)的每一個name對應(yīng)的值；cssprop：如果是string則會使用addClass方法將其加入到行的css中，如果是array或者對象?則會直接加到style屬性中

jqgrid.jqGrid('setRowData', ids[i], {act: actStr }); { name: 'legalPersonName', label: '法人', width: 10, sortable:false }, { name: 'blCampusName', label: '校區(qū)', fixedFlag: true, sortable: false }, $("#orgGrid").jqGrid('setRowData',ids[i],{'legalPersonName':"2008-10-01",phone:"test",'blCampusName':"note",orgName:"200.00"});//根據(jù)Id主鍵，更新對應(yīng)的數(shù)據(jù)

13.setSelection （rowid,onselectrow）?選擇或反選指定行。如果onselectrow為ture則會觸發(fā)事件onSelectRow，onselectrow默認(rèn)為ture

onSelectRow: function (rowid) {var selectId = jqgridCustomer.jqGrid('getGridParam', 'selarrrow')[0];selectId === rowid || jqgridCustomer.setSelection(selectId, false);console.log(jqgridCustomer.setSelection(selectId, false)) },

14.trigger(“reloadGrid”)?重新加載當(dāng)前表格，也會向服務(wù)器發(fā)起新的請求

轉(zhuǎn)載于:https://www.cnblogs.com/susan-home/p/8535157.html

總結(jié)

以上是生活随笔為你收集整理的jqGrid 常用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。