欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery學習筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能)

 更新時間:2016年11月09日 15:31:39   作者:逆心  
這篇文章主要介紹了jQuery學習筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能),想要學習jQuery的可以了解一下。

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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論