亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2016年11月09日 15:31:39   作者:逆心  
這篇文章主要介紹了jQuery學(xué)習(xí)筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能),想要學(xué)習(xí)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>

二、使用要點(diǎn)說明

1、獲取值

(1)、獲取單個id

獲取行號,有這種方式:

var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");

但是經(jīng)過實際驗證,這種方式不可行,當(dāng)選中行,再點(diǎn)擊同一行會出現(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", //相當(dāng)于設(shè)置主鍵
    root: "JsonArray",    //Json數(shù)據(jù)
    total: "TotalPage",   //總頁數(shù)
    page: "CurrentPage",  //當(dāng)前頁
    records: "TotalRecord",//總記錄數(shù)
    repeatitems: false
  },

這樣一來,對于數(shù)據(jù)表格,在C#中,我可以用一個泛型類,就能夠與jqGrid表格進(jìn)行交互(其中,包括了分頁信息,數(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">當(dāng)前頁</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ù)從而進(jìn)行處理:

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ù)名稱
類型
描述
默認(rèn)值
是否可以被修改
ajaxGridOptions
object
對ajax參數(shù)進(jìn)行全局設(shè)置,可以覆蓋ajax事件:error,complete 和 beforeSend
空值
ajaxGridOptions
object
對ajax參數(shù)進(jìn)行全局設(shè)置
空值
ajaxSelectOptions
object
對ajax的select參數(shù)進(jìn)行全局設(shè)置,設(shè)置editoptions跟searchoptions 參數(shù)的select屬性值
空值
altclass
String
用于表格行交替變色的class屬性。你可以定義自己的class來替代默認(rèn)值。只有當(dāng)altRows屬性設(shè)置為true時,該屬性才起作用
ui-priority-secondary
是,但需要重新加載
altRows
boolean
設(shè)置表格是否允許行交替變色值
false
是,需重新加載
autoencode
boolean
當(dāng)為 ture 時對url進(jìn)行編碼
false
autowidth
boolean
如果為ture時,則當(dāng)表格在首次被創(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
只有當(dāng)datatype為local時起作用。當(dāng)排序時不選擇當(dāng)前行
true
direction
string
表格中文字的顯示方向,從左向右(ltr)或者從右向左(rtr)。
ltr
editurl
string
定義對form編輯時的url
空值
emptyrecords
string
當(dāng)返回的數(shù)據(jù)行數(shù)為0時顯示的信息。只有當(dāng)屬性 viewrecords 設(shè)置為ture時起作用
在語言包中
ExpandColClick
boolean
當(dāng)為true時,點(diǎn)擊展開行的文本時,treeGrid就能展開或者收縮,不僅僅是點(diǎn)擊圖片
true
ExpandColumn
string
指定那列來展開tree grid,默認(rèn)為第一列,只有在treeGrid為true時起作用
空值
footerrow
boolean
當(dāng)為true時,會在翻頁欄之上增加一行
false
forceFit
boolean
當(dāng)為ture時,調(diào)整列寬度不會改變表格的寬度。當(dāng)shrinkToFit 為false時,此屬性會被忽略
false
gridstate
string
定義當(dāng)前表格的狀態(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
當(dāng)為ture時,表格不會被顯示,只顯示表格的標(biāo)題。只有當(dāng)點(diǎn)擊顯示表格的那個按鈕時才會去初始化表格數(shù)據(jù)。只有當(dāng)caption 屬性不為空而且hidegrid為ture時才起作用
false
hidegrid
boolean
啟用或者禁用控制表格顯示、隱藏的按鈕,只有當(dāng)caption 屬性不為空時起效
true
hoverrows
boolean
當(dāng)為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
當(dāng)請求或者排序時所顯示的文字內(nèi)容
Loading....
loadui
string
當(dāng)執(zhí)行ajax請求時要干什么。disable禁用ajax執(zhí)行提示;enable默認(rèn),當(dāng)執(zhí)行ajax請求時的提示; block啟用Loading提示,但是阻止其他操作
enable
mtype
string
請求的類型:(“POST” or “GET”)
GET
multikey
string
只有在multiselect設(shè)置為ture時起作用,定義使用那個key來做多選。shiftKey,altKey,ctrlKey
空值
multiboxonly
boolean
只有當(dāng)multiselect = true.起作用,當(dāng)multiboxonly 為ture時只有選擇checkbox才會起作用,
false
multiselect
boolean
定義是否可以多選
false
multiselectWidth
integer
當(dāng)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
當(dāng)前頁信息
語言包中設(shè)置
prmNames
array
Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 當(dāng)參數(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)滾動的表格,當(dāng)為true時,翻頁欄被禁用,使用垂直滾動條加載數(shù)據(jù),且在首次訪問服務(wù)器端時將加載所有數(shù)據(jù)到客戶端。當(dāng)此參數(shù)為數(shù)字時,表格只控制可見的幾行,所有數(shù)據(jù)都在這幾行中加載
false
scrollOffset
integer
設(shè)置垂直滾動條寬度
18
scrollrows
boolean
當(dāng)為true時讓所選擇的行可見
false
selarrrow
array-[]
只讀屬性,用來存放當(dāng)前選擇的行
empty array []
selrow
string
只讀屬性,最后選擇行的id
null
shrinkToFit
boolean
此屬性用來說明當(dāng)初始化列寬度時候的計算類型,如果為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
樹的圖標(biāo),默認(rèn)值:{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
 
treeReader
array
擴(kuò)展表格的colModel且加在colModel定義的后面
 
tree_root_level
numeric
root元素的級別,
0
url
string
url
null
userData
array
從request中取得的一些用戶信息
empty array
userDataOnFooter
boolean
當(dāng)為true時把userData放到底部,用法:如果userData的值與colModel的值相同,那么此列就顯示正確的值,如果不等那么此列就為空
false
viewrecords
boolean
是否要顯示總記錄數(shù)
false
viewsortcols
array
定 義排序列的外觀跟行為。數(shù)據(jù)格式:[false,'vertical',true].第一個參數(shù)是說,是否都要顯示排序列的圖標(biāo),false就是只顯示當(dāng) 前排序列的圖標(biāo);第二個參數(shù)是指圖標(biāo)如何顯示,vertical:排序圖標(biāo)垂直放置,horizontal:排序圖標(biāo)水平放置;第三個參數(shù)指單擊功 能,true:單擊列可排序,false:單擊圖標(biāo)排序。說明:如果第三個參數(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ù)類型,默認(rèn)xml。可選類型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside
mtype
ajax提交方式。POST或者GET,默認(rèn)GET
colNames
列顯示名稱,是一個數(shù)組對象。
colModel
對顯示列屬性的設(shè)置,是一個數(shù)組對象。常用到的屬性:name 列顯示的名稱;index 傳到服務(wù)器端用來排序用的列名稱;width 列寬度;align 對齊方式;sortable 是否可以排序
pager
定義翻頁用的導(dǎo)航欄,必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置
rowNum
在grid上顯示記錄條數(shù),這個參數(shù)是要被傳遞到后臺
rowList
一個下拉選擇框,用來改變顯示記錄數(shù),當(dāng)選擇時會覆蓋rowNum參數(shù)傳遞到后臺
sortname
默認(rèn)的排序列??梢允橇忻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ù)請求前,但當(dāng)datatype為function時不發(fā)生。
beforeSelectRow rowid, e 此事件發(fā)生在用戶點(diǎn)擊行,選中該行前。
rowid 為行的ID,e為事件對象
該事件將返回布爾值true(行被選中)或false(行未被選中)。
gridComplete none 此事件發(fā)生在表格所有數(shù)據(jù)裝入和進(jìn)程完成后。與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
此事件在點(diǎn)擊表格特定單元格時發(fā)生。
rowid 為行ID;iCol 為列索引;
cellcontent 為單元格中內(nèi)容;
e 點(diǎn)擊事件對象。
ondblClickRow rowid, 
iRow, 
iCol, 
e
此事件發(fā)生在行雙擊后發(fā)生。
rowid為行ID;iRow 為行索引(勿與rowid混淆);
iCol為列索引;
e 為事件對象。
onHeaderClick gridstate 此事件發(fā)生在點(diǎn)擊顯示或隱藏表格后發(fā)生(hidegrid為true) gridstate為表格狀態(tài),有visible和hidden兩個值
onPaging pgButton 此事件發(fā)生在點(diǎn)擊page button后,填充數(shù)據(jù)前,及用戶輸入一個與當(dāng)前頁頁碼不同的新頁碼并回車時。
onRightClickRow rowid, 
iRow, 
iCol, 
e
此事件發(fā)生在右擊行后。(此事件在Opera瀏覽器中無效)
rowid為行ID;iRow為行索引(勿與rowid混淆)
iCol為列索引;
e為事件對象
onSelectAll aRowids,
status
此事件發(fā)生在點(diǎn)擊標(biāo)題的復(fù)選框時發(fā)生(multiselect為true)
aRowids 選定行ID的數(shù)組(哪些行的復(fù)選框與頭復(fù)選框相同)
status 頭復(fù)選框的選定的布爾值,true為選中,false為
onSelectRow rowid,
status
此事件發(fā)生在行點(diǎn)擊后
rowid 為行ID;
status  為選擇狀態(tài)。當(dāng)multiselect為true時使用,當(dāng)行被選中時返回true;為選中時返回false。
onSortCol index,
iCol,
sortorder
此事件發(fā)生在列排序被點(diǎn)擊之后,數(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)格。當(dā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)格。當(dāng)然,xmlresponse中的數(shù)據(jù)在傳遞到addXmlData之前可以被操作。
clearGridData clearfooter jqGrid object 清除網(wǎng)格中當(dā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中定義的名稱。在編輯行或列時不能使用該方法,此時返回的不是當(dāng)前值,而是原始值。
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ù)進(jìn)行了有效設(shè)置,則返回計算后的值,若無效,則返回空數(shù)組。
getDataIDs none array[] 返回當(dāng)前網(wǎng)格顯示數(shù)據(jù)的ID數(shù)組。無數(shù)據(jù)時返回空數(shù)組。
getGridParam name mixed value 返回請求的參數(shù)的值。name 是options 數(shù)組中的名稱,若為設(shè)置則options被返回。
getInd rowid,
rowcontent
mixed 當(dāng)rowcontent 設(shè)置為false(缺?。r,返回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ù)組。在行或列編輯時此方法不可用,此時返回的不是當(dāng)前值,而是原始值。
若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)格高度。只能對單元格的高度進(jìn)行設(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è)置指定列標(biāo)題文字、屬性和類:
colname 為列名,可以是從0開始的列索引;
data 為標(biāo)題文字,為空則不修改;
class 若為字符串,則為類名,若為數(shù)組,則直接寫入CSS;
properties 為標(biāo)題文字的屬性。
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 按當(dāng)前設(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

此時當(dāng)頁面縮放擺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' });

當(dāng)然你也可以直接修改樣式.ui-jqgrid-bdiv增加overflow-x:hidden;

2、自定義操作列。

jqGrid默認(rèn)的自定義編輯列,只能設(shè)置編輯按鈕與刪除按鈕。并且圖標(biāo)基本上都很難控制,如果想自己實現(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論