jqgrid入門

JQGrid是一個在jquery基礎上做的一個表格控件,以ajax的方式和服務器端通信。
JQGrid Demo 是一個在線的演示項目。在這裡,可以知道jqgrid可以做什麼事情。

下面是轉自其他人blog的一個學習資料,與其說是學習資料,說成查詢幫助文檔更加合適。
jqGrid學習之 ————- 安裝
jqGrid安裝很簡單,隻需把相應的css、js文件加入到頁面中即可。
按照官網文檔:

/myproject/css/
            ui.jqgrid.css
            /ui-lightness/
                  /images/
                  jquery-ui-1.7.2.custom.css

/myproject/js/
            /i18n/
                  grid.locale-bg.js
list of all language files
                  ….
            Changes.txt
            jquery-1.3.2.min.js
            jquery.jqGrid.min.js

在頁面中寫法:

Java代碼

<!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="js/src/css/ui.jqgrid.css" />

<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />

<style>

html, body {

   margin: 0;

    padding: 0;

    font-size: 75%;

}

</style>

 

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/src/grid.loader.js" type="text/javascript"></script>

 

</head>

<body>

</body>

</html>

需要說明的是,jquery-ui的字體大小與jqgrid字體大小不一致,故需要在頁面上在加上一段
style來指定頁面上文字大小。

 

jqGrid皮膚
從3.5版本開始,jqGrid完全支持jquery UI的theme。我們可以從http://jqueryui.com/themeroller/下載我們所需要的theme。當然,你也可以編輯自己的theme。jqGrid
也並不需要把所有的css文件都引入進來,隻需導入核心css文件“ui.theme.css ” 以及“ui.core.css”即可,文件位於目錄development-bundle/themes下。

jqGrid原理
jqGrid是典型的B/S架構,服務器端隻是提供數據管理,客戶端隻提供數據顯示。換句話說,jqGrid可以以一種更加簡單的方式來展現你數據庫的信息,而且也可以把客戶端數據傳回給服務器端。
對於jqGrid我們所關心的就是:必須有一段代碼把一些頁面信息保存到數據庫中,而且也能夠把響應信息返回給客戶端。jqGrid是用ajax來實現對請求與響應的處理。

jqGrid參數
名稱

類型

描述

默認值

可修改

url

string

獲取數據的地址

 

datatype

string

從服務器端返回的數據類型,默認xml。可選類型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside

 

mtype

string

ajax提交方式。POST或者GET,默認GET

 

colNames

Array

列顯示名稱,是一個數組對象

 

colModel

Array

常用到的屬性:name 列顯示的名稱;index 傳到服務器端用來排序用的列名稱;width 列寬度;align 對齊方式;sortable 是否可以排序

 

pager

string

定義翻頁用的導航欄,必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置

 

rowNum

int

在grid上顯示記錄條數,這個參數是要被傳遞到後臺

 

rowList

array

一個下拉選擇框,用來改變顯示記錄數,當選擇時會覆蓋rowNum參數傳遞到後臺

 

sortname

string

默認的排序列。可以是列名稱或者是一個數字,這個參數會被提交到後臺

 

viewrecords

boolean

定義是否要顯示總記錄數

 

caption

string

表格名稱

 

ajaxGridOptions[a1]

object

對ajax參數進行全局設置,可以覆蓋ajax事件

null

ajaxSelectOptions[a2]

object

對ajax的select參數進行全局設置

null

altclass

String

用來指定行顯示的css,可以編輯自己的css文件,隻有當altRows設為 ture時起作用

ui-priority-secondary

altRows

boolean

設置表格 zebra-striped 值

 

autoencode

boolean

對url進行編碼

false

autowidth

boolean

如果為ture時,則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變,為瞭使表格寬度能夠自動調整則需要實現函數:setGridWidth

false

cellLayout

integer

定義瞭單元格padding + border 寬度。通常不必修改此值。初始值為

5

cellEdit

boolean

啟用或者禁用單元格編輯功能

false

cellsubmit

String

定義瞭單元格內容保存位置

‘remote’

cellurl

String

單元格提交的url

空值

datastr

String

xmlstring或者jsonstring

空值

deselectAfterSort

boolean

隻有當datatype為local時起作用。當排序時不選擇當前行

true

direction

string

表格中文字的顯示方向,從左向右(ltr)或者從右向左(rtr)

ltr

editurl

string

定義對form編輯時的url

空值

emptyrecords

string

當返回的數據行數為0時顯示的信息。隻有當屬性 viewrecords 設置為ture時起作用

ExpandColClick

boolean

當為true時,點擊展開行的文本時,treeGrid就能展開或者收縮,不僅僅是點擊圖片

true

ExpandColumn

string

指定那列來展開tree grid,默認為第一列,隻有在treeGrid為true時起作用

空值

footerrow[a3]

boolean

當為true時,會在翻頁欄之上增加一行

false

forceFit

boolean

當為ture時,調整列寬度不會改變表格的寬度。當shrinkToFit 為false時,此屬性會被忽略

false

gridstate

string

定義當前表格的狀態:'visible' or 'hidden'

visible

gridview

boolean

構造一行數據後添加到grid中,如果設為true則是將整個表格的數據都構造完成後再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用

false

height

mixed

表格高度,可以是數字,像素值或者百分比

150

hiddengrid

boolean

當為ture時,表格不會被顯示,隻顯示表格的標題。隻有當點擊顯示表格的那個按鈕時才會去初始化表格數據。

false

hidegrid

boolean

啟用或者禁用控制表格顯示、隱藏的按鈕,隻有當caption 屬性不為空時起效

true

hoverrows

boolean

當為false時mouse hovering會被禁用

false

jsonReader

array

描述json 數據格式的數組

lastpage

integer

隻讀屬性,定義瞭總頁數

0

lastsort

integer

隻讀屬性,定義瞭最後排序列的索引,從0開始

0

loadonce

boolean

如果為ture則數據隻從服務器端抓取一次,之後所有操作都是在客戶端執行,翻頁功能會被禁用

false

loadtext

string

當請求或者排序時所顯示的文字內容

Loading….

loadui

string

當執行ajax請求時要幹什麼。disable禁用ajax執行提示;enable默認,當執行ajax請求時的提示; block啟用Loading提示,但是阻止其他操作

enable

multikey

string

隻有在multiselect設置為ture時起作用,定義使用那個key來做多選。shiftKey,altKey,ctrlKey

空值

multiboxonly

boolean

隻有當multiselect = true.起作用,當multiboxonly 為ture時隻有選擇checkbox才會起作用

false

multiselect

boolean

定義是否可以多選

false

multiselectWidth

integer

當multiselect為true時設置multiselect列寬度

20

page

integer

設置初始的頁碼

1

pagerpos

string

指定分頁欄的位置

center

pgbuttons

boolean

是否顯示翻頁按鈕

true

pginput

boolean

是否顯示跳轉頁面的輸入框

true

pgtext

string

當前頁信息

prmNames

array

Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 當參數為null時不會被發到服務器端

none

postData

array

此數組內容直接賦值到url上,參數類型:{name1:value1…}

空array

reccount

integer

隻讀屬性,定義瞭grid中確切的行數。通常情況下與records屬性相同,但有一種情況例外,假如rowNum=15,但是從服務器端返回的記錄數是20,那麼records值是20,但reccount值仍然為15,而且表格中也隻顯示15條記錄。

0

recordpos

string

定義瞭記錄信息的位置: left, center, right

right

records

integer

隻讀屬性,定義瞭返回的記錄數

none

recordtext

string

顯示記錄數信息。{0} 為記錄數開始,{1}為記錄數結束。viewrecords為ture時才能起效,且總記錄數大於0時才會顯示此信息

 

resizeclass

string

定義一個class到一個列上用來顯示列寬度調整時的效果

空值

rowList

array

一個數組用來調整表格顯示的記錄數,此參數值會替代rowNum參數值傳給服務器端。

[]

rownumbers

boolean

如果為ture則會在表格左邊新增一列,顯示行順序號,從1開始遞增。此列名為'rn'.

false

rownumWidth

integer

如果rownumbers為true,則可以設置column的寬度

25

savedRow

array

隻讀屬性,隻用在編輯模式下保存數據

空值

scroll

boolean

創建一個動態滾動的表格,當為true時,翻頁欄被禁用,使用垂直滾動條加載數據,且在首次訪問服務器端時將加載所有數據到客戶端。當此參數為數字時,表格隻控制可見的幾行,所有數據都在這幾行中加載

false

scrollOffset

integer

設置垂直滾動條寬度

18

scrollrows

boolean

當為true時讓所選擇的行可見

false

selarrrow

array

隻讀屬性,用來存放當前選擇的行

array

selrow

string

隻讀屬性,最後選擇行的id

null

shrinkToFit

boolean

此屬性用來說明當初始化列寬度時候的計算類型,如果為ture,則按比例初始化列寬度。如果為false,則列寬度使用colModel指定的寬度

true

sortable

boolean

是否可排序

false

sortname

string

排序列的名稱,此參數會被傳到後臺

空字符串

sortorder

string

排序順序,升序或者降序(asc or desc)

asc

subGrid

boolean

是否使用suggrid

false

subGridModel

array

subgrid模型

array

subGridType

mixed

如果為空則使用表格的dataType

null

subGridUrl

string

加載subgrid數據的url,jqGrid會把每行的id值加到url中

空值

subGridWidth

integer

subgrid列的寬度

20

toolbar

array

表格的工具欄。數組中有兩個值,第一個為是否啟用,第二個指定工具欄位置(相對於body layer),如:[true,”both”] 。工具欄位置可選值:“top”,”bottom”, “both”. 如果工具欄在上面,則工具欄id為“t_”+表格id;如果在下面則為 “tb_”+表格id;如果隻有一個工具欄則為 “t_”+表格id

[false,'']

totaltime

integer

隻讀屬性,計算加載數據的時間。目前支持xml跟json數據

0

treedatatype

mixed

數據類型,通常情況下與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

r oot元素的級別,

0

userData

array

從request中取得的一些用戶信息

array

userDataOnFooter

boolean

當為true時把userData放到底部,用法:如果userData的值與colModel的值相同,那麼此列就顯示正確的值,如果不等那麼此列就為空

false

viewrecords

boolean

是否要顯示總記錄數

false

viewsortcols

array

定義排序列的外觀跟行為。數據格式:[false,'vertical',true].第一個參數是說,是否都要顯示排序列的圖標,false就是隻顯示 當前排序列的圖標;第二個參數是指圖標如何顯示,vertical:排序圖標垂直放置,horizontal:排序圖標水平放置;第三個參數指單擊功 能,true:單擊列可排序,false:單擊圖標排序。說明:如果第三個參數為false則第一個參數必須為ture否則不能排序

width

number

如果設置則按此設置為主,如果沒有設置則按colModel中定義的寬度計算

none

xmlReader

array

對xml數據結構的描述

Jqgrid學習 ——-ColModel API
ColModel 是jqGrid裡最重要的一個屬性,設置表格列的屬性。

屬性

數據類型

備註

默認值

align

string

left, center, right.

left

classes

string

設置列的css。多個class之間用空格分隔,如:'class1 class2' 。表格默認的css屬性是ui-ellipsis

empty string

datefmt

string

”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.

ISO Date (Y-m-d)

defval

string

查詢字段的默認值

editable

boolean

單元格是否可編輯

false

editoptions

array

編輯的一系列選項。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},這個是演示動態從服務器端獲取數據。

empty

editrules

array

編輯的規則{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},設定 年齡的最大值為100,最小值為10,而且為數字類型,並且為必輸字段。

empty

edittype

string

可以編輯的類型。可選值:text, textarea, select, checkbox, password, button, image and file.

text

fixed

boolean

列寬度是否要固定不可變

false

formoptions

array

對於form進行編輯時的屬性設置

empty

formatoptions

array

對某些列進行格式化的設置

none

formatter

mixed

對列進行格式化時設置的函數名或者類型

{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0′ />”
return temp;
}},//返回性別的圖標。

none

hidedlg

boolean

是否顯示或者隱藏此列

false

hidden

boolean

在初始化表格時是否要隱藏此列

false

index

string

索引。其和後臺交互的參數為sidx

empty

jsonmap

string

定義瞭返回的json數據映射

none

key

boolean

當從服務器端返回的數據中沒有id時,將此作為唯一rowid使用隻有一個列可以做這項設置。如果設置多於一個,那麼隻選取第一個,其他被忽略

false

label

string

如果colNames為空則用此值來作為列的顯示名稱,如果都沒有設置則使用name 值

none

name

string

表格列的名稱,所有關鍵字,保留字都不能作為名稱使用包括subgrid, cb and rn.

Required

resizable

boolean

是否可以被resizable

true

search

boolean

在搜索模式下,定義此列是否可以作為搜索列

true

searchoptions

array

設置搜索參數

empty

sortable

boolean

是否可排序

true

sorttype

string

用在當datatype為local時,定義搜索列的類型,可選值:int/integer – 對integer排序float/number/currency – 排序數字date – 排序日期text – 排序文本

text

stype

string

定義搜索元素的類型

text

surl

string

搜索數據時的url

empty

width

number

默認列的寬度,隻能是象素值,不能是百分比

150

xmlmap

string

定義當前列跟返回的xml數據之間的映射關系

none

unformat

function

‘unformat’單元格值

null

Jqgrid學習 ——-數據
jqGrid可支持的數據類型:xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。

Json數據
需要定義jsonReader來跟服務器端返回的數據做對應,其默認值:

· jsonReader : {

·      root: "rows",

·      page: "page",

·      total: "total",

·      records: "records",

·      repeatitems: true,

·      cell: "cell",

·      id: "id",

·      userdata: "userdata",

·      subgrid: {root:"rows", 

·         repeatitems: true, 

·        cell:"cell"

·      }

這樣服務器端返回的數據格式:

· { 

·   total: "xxx", 

·   page: "yyy", 

·   records: "zzz",

·   rows : [

·     {id:"1", cell:["cell11", "cell12", "cell13"]},

·     {id:"2", cell:["cell21", "cell22", "cell23"]},

·       …

·   ]

· }

jsonReader的屬性

total

總頁數

page

當前頁

records

查詢出的記錄數

rows

包含實際數據的數組

id

行id

cell

當前行的所有單元格

自定義:

· jQuery("#gridid").jqGrid({

· …

·    jsonReader : {

·       root:"invdata",

·       page: "currpage",

·       total: "totalpages",

·       records: "totalrecords",

·       cell: "invrow"

·    },

· …

· });

· totalpages: "xxx", 

·   currpage: "yyy",

·   totalrecords: "zzz",

·   invdata : [

·     {id:"1", invrow:["cell11", "cell12", "cell13"]},

·     {id:"2", invrow:["cell21", "cell22", "cell23"]},

·       …

·   ]

repeatitems
  指明每行的數據是可以重復的,如果設為false,則會從返回的數據中按名字來搜索元素,這個名字就是colModel中的名字

· jsonReader : {

·       root:"invdata",

·       page: "currpage",

·       total: "totalpages",

·       records: "totalrecords",

·       repeatitems: false,

·       id: "0"

·    }

·  totalpages: "xxx", 

·   currpage: "yyy",

·   totalrecords: "zzz",

·   invdata : [

·     {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},

·     {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},

·       …

·   ]

此例中,id屬性值為“invid”。
一旦當此屬性設為false時,我們就不必把所有在colModel定義的name值都賦值。因為是按name來進行搜索元素的,所以他的排序也不是按colModel中指定的排序結果。

用戶數據(user data)
在某些情況下,我們需要從服務器端返回一些參數但並不想直接把他們顯示到表格中,而是想在別的地方顯示,那麼我們就需要用到userdata標簽

· jsonReader: {

·   …

·   userdata: "userdata",

·   …

· }

· { 

·   total: "xxx", 

·   page: "yyy", 

·   records: "zzz", 

·   userdata: {totalinvoice:240.00, tax:40.00}, 

·   rows : [ 

·     {id:"1", cell:["cell11", "cell12", "cell13"]}, 

·     {id:"2", cell:["cell21", "cell22", "cell23"]}, 

·     … 

·   ] 

· }

在客戶端我們可以有下面兩種方法得到這些額外信息:

1.      jQuery("grid_id").getGridParam('userData')

2.      jQuery("grid_id").getUserData()

3.      jQuery("grid_id").getUserDataItem( key )

Jqgrid學習 ——-事件
· var lastSel;

· jQuery("#gridid").jqGrid({

· …

·    onSelectRow: function(id){ 

·       if(id && id!==lastSel){ 

·          jQuery('#gridid').restoreRow(lastSel); 

·          lastSel=id; 

·       } 

·       jQuery('#gridid').editRow(id, true); 

·    },

· …

· })

事件

參數

備註

afterInsertRow

rowidrowdatarowelem

當插入每行時觸發。rowid插入當前行的id;rowdata插入行的數據,格式為name: value,name為colModel中的名字

beforeRequest

none

向服務器端發起請求之前觸發此事件但如果datatype是一個function時例外

beforeSelectRow

rowid, e

當用戶點擊當前行在未選擇此行時觸發。rowid:此行id;e:事件對象。返回值為ture或者false。如果返回true則選擇完成,如果返回false則不會選擇此行也不會觸發其他事件

gridComplete

none

當表格所有數據都加載完成而且其他的處理也都完成時觸發此事件,排序,翻頁同樣也會觸發此事件

loadComplete

xhr

當從服務器返回響應時執行,xhr:XMLHttpRequest 對象

loadError

xhr,status,error

如果請求服務器失敗則調用此方法。xhr:XMLHttpRequest 對象;satus:錯誤類型,字符串類型;error:exception對象

onCellSelect

rowid,iCol,cellcontent,e

當點擊單元格時觸發。rowid:當前行id;iCol:當前單元格索引;cellContent:當前單元格內容;e:event對象

ondblClickRow

rowid,iRow,iCol,e

雙擊行時觸發。rowid:當前行id;iRow:當前行索引位置;iCol:當前單元格位置索引;e:event對象

onHeaderClick

gridstate

當點擊顯示/隱藏表格的那個按鈕時觸發;gridstate:表格狀態,可選值:visible or hidden

onPaging

pgButton

點擊翻頁按鈕填充數據之前觸發此事件,同樣當輸入頁碼跳轉頁面時也會觸發此事件

onRightClickRow

rowid,iRow,iCol,e

在行上右擊鼠標時觸發此事件。rowid:當前行id;iRow:當前行位置索引;iCol:當前單元格位置索引;e:event對象

onSelectAll

aRowids,status

multiselect為ture,且點擊頭部的checkbox時才會觸發此事件。aRowids:所有選中行的id集合,為一個數組。status:boolean變量說明checkbox的選擇狀態,true選中false不選中。無論checkbox是否選擇,aRowids始終有 值

onSelectRow

rowid,status

當選擇行時觸發此事件。rowid:當前行id;status:選擇狀態,當multiselect 為true時此參數才可用

onSortCol

index,iCol,sortorder

當點擊排序列但是數據還未進行變化時觸發此事件。index:name在colModel中位置索引;iCol:當前單元格位置索引;sortorder:排序狀態:desc或者asc

resizeStart

event, index

當開始改變一個列寬度時觸發此事件。event:event對象;index:當前列在colModel中位置索引

resizeStop

newwidth, index

當列寬度改變之後觸發此事件。newwidth:列改變後的寬度;index:當前列在colModel中的位置索引

serializeGridData

postData

向服務器發起請求時會把數據進行序列化,用戶自定義數據也可以被提交到服務器端

Jqgrid學習 ——-方法
jqGrid的方法,從3.6開始已經完全兼容jQuery UI庫。

jQuery("#grid_id").jqGridMethod( parameter1,…parameterN );

jQuery("#grid_id").setGridParam({…}).hideCol("somecol").trigger("reloadGrid");

如果使用新的API:

jQuery("#grid_id").jqGrid('method', parameter1,…parameterN );

jQuery("#grid_id").jqGrid('setGridParam',{…}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

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>

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對象綁定,可以隨意使用:

jQuery.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

boolean

從dom上刪除此grid

GridUnload

grid_id

boolean

跟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

boolean

修改表格中某行的數據,data數據格式:[{name:value,name1:value1…}, {name:value,name2:value2…}],name為colModel中的名稱;rowidname某行的名稱。 jsonreader:boolean值,默認false。如果為true則是定義數據的格式,data的值並不是name:value形式而隻是 value

Jqgrid學習 ——-配置 json
IE8,FF3以及Chrome 3已經支持JSON,配置:

· <!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.useJSON = true;

· </script>

· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

·  

· </head>

· <body>

· …

· </body>

· </html>

這段代碼要放到語言包之後jqGrid.js文件之前。
如果瀏覽器不支持JSON,那麼我們隻能用eval函數解析json。

除瞭jqGrid本身提供對json的類庫外,我們可以使用JSON.parse來處理JSON,配置如下:

· <!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/json2.js" type="text/javascript"></script>

· <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 src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

· <script type="text/javascript">

·    jQuery.extend(jQuery.jgrid,{

·       parse:function(jsstring) {

·          return JSON.parse(jsstring);

·       }

·    });

· </script>

·  

· </head>

· <body>

· …

· </body>

· </html>

Jqgrid學習 ——-翻頁
jqGrid的翻頁要定義在html裡,通常是在grid的下面,且是一個p對象:

· <table id="list"></table> 

·    <p id="gridpager"></p>

· jQuery("#grid_id").jqGrid({

· …

·    pager : '#gridpager',

· …

· });

不必給翻頁設置任何的css屬性。在jqGrid裡定義的翻頁可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推薦使用前兩個,當使用其他方式時jqGrid的導入導出功能時會引起錯誤。

導航欄的屬性:

· $.jgrid = {

·     defaults : {

·         recordtext: "View {0} – {1} of {2}",

·             emptyrecords: "No records to view",

·         loadtext: "Loading…",

·         pgtext : "Page {0} of {1}"

·     },

· …

· }

如果想改變這些設置:

1.   jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",…});

2.   jQuery("#grid_id").jqGrid({

              pager : '#gridpager',

              emptyrecords: "Nothing to display",

              …

              });

導航欄的屬性:

屬性名

類型

說明

默認值

是否可以被修改

lastpage

integer

隻讀屬性,總頁數

0

NO

pager

mixed

導航欄對象,必須是一個有效的html元素,位置可以隨意

空字符串

NO

pagerpos

string

定義導航欄的位置,默認分為三部分:翻頁,導航工具及記錄信息

center

NO

pgbuttons

boolean

是否顯示翻頁按鈕

true

NO

pginput

boolean

是否顯示跳轉頁面的輸入框

true

NO

pgtext

string

頁面信息,第一個值是當前頁第二個值是總頁數

語言包

YES

reccount

integer

隻讀屬性,實際記錄數,千萬不能跟records 參數搞混瞭,通常情況下他們是相同的,假如我們定義rowNum=15,但我們從服務器端返回的記錄為20即records=20,而reccount=15,表格中也顯示15條記錄

0

NO

recordpos

string

定義記錄信息的位置,可選值:left, center, right

right

NO

records

integer

隻讀屬性,從服務器端返回的記錄數

none

NO

recordtext

string

顯示記錄的信息,隻有當viewrecords為true時起效,且記錄數必須大於0

語言包

yes

rowList

array

可以改變表格可以顯示的記錄數,格式為[10,20,30]

array

no

rowNum

integer

設置表格可以顯示的記錄數

20

yes

viewrecords

boolean

是否要顯示總記錄數信息

false

no

jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");

跟翻頁相關的事件隻有一個:onPaging

onPaging

pgButton

當點擊翻頁按鈕但還為展現數據時觸發此事件,當然這跳轉欄輸入頁碼改變頁時也同樣觸發此事件。參數pgButton可選值: first,last,prev,next

 

jqGrid的翻頁導航是一個方法,你可以事先定義一些其他操作,比如:編輯、新增、刪除及搜索。也可以增加自定義的函數。導航工具欄是定義到翻頁控件上的。定義如下:

· <body>

· …

·    <table id="list"></table> 

·    <p id="gridpager"></p> 

· …

· </body>

· jQuery("#grid_id").jqGrid({

· …

·    pager : '#gridpager',

· …

· });

· jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

· jQuery("#grid_id").jqGrid({

· …

·    pager : '#gridpager',

· …

· });

· jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

· jQuery("#grid_id").jqGrid({

· …

·    pager : '#gridpager',

· …

· }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);

· …

grid_id :表格id
gridpager :導航欄id
parameters :參數列表
prmEdit, prmAdd, prmDel, prmSearch, prmView :事件

· $.jgrid = {

· …

·    search : {

·      caption: "Search…",

·      Find: "Find",

·      Reset: "Reset",

·      odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],

·      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],

·      matchText: " match",

·      rulesText: " rules"

·    },

·    edit : {

·      addCaption: "Add Record",

·      editCaption: "Edit Record",

·      bSubmit: "Submit",

·      bCancel: "Cancel",

·      bClose: "Close",

·      saveData: "Data has been changed! Save changes?",

·      bYes : "Yes",

·      bNo : "No",

·      bExit : "Cancel",

·   },

·   view : {

·     caption: "View Record",

·     bClose: "Close"

·   },

·   del : {

·     caption: "Delete",

·     msg: "Delete selected record(s)?",

·     bSubmit: "Delete",

·     bCancel: "Cancel"

·   },

·   nav : {

·     edittext: "",

·     edittitle: "Edit selected row",

·     addtext:"",

·     addtitle: "Add new row",

·     deltext: "",

·     deltitle: "Delete selected row",

·     searchtext: "",

·     searchtitle: "Find records",

·     refreshtext: "",

·     refreshtitle: "Reload Grid",

·     alertcap: "Warning",

·     alerttext: "Please, select row",

·     viewtext: "",

·     viewtitle: "View selected row"

·   },

· …

屬性

類型

說明

默認值

add

boolean

是否啟用新增功能,當點擊按鈕時會觸發editGridRow事件

true

addicon

string

給新增功能設置圖標,隻有UI theme裡的圖標才可以使用

ui-icon-plus

addtext

string

新增按鈕上的文字

addtitle

string

當鼠標移到新增按鈕上時顯示的提示

新增一行

alertcap

string

當我們edit,delete or view一行記錄時出現的提示信息

警告

alerttext

string

當edit,delete or view一行記錄時的文本提示

請選擇一行記錄

closeOnEscape

boolean

是否可以使用esc鍵關閉對話框

true

del

boolean

是否啟用刪除功能,啟用時會觸發事件delGridRow

true

delicon

string

設置刪除按鈕的圖標,隻有UI theme裡的圖標才可以使用

ui-icon-trash

deltext

string

設置到刪除按鈕上的文字信息

deltitle

string

當鼠標移到刪除按鈕上時出現的提示

刪除鎖選擇的行

edit

boolean

是否啟用可編輯功能,當編輯時會觸發事件editGridRow

true

editicon

string

設置編輯按鈕的圖標,隻有UI theme裡的圖標才可以使用

ui-icon-pencil

edittext

string

編輯按鈕上文字

edittitle

string

當鼠標移到編輯按鈕上出現的提示信息

編輯所選擇的行

position

string

定義按鈕位置,可選值left, center and right.

left

refresh

boolean

是否啟用刷新按鈕,當點擊刷新按鈕時會觸發trigger(“reloadGrid”)事件,而且會清空搜索條件值

true

refreshicon

string

設置刷新圖標,隻有UI theme裡的圖標才可以使用

ui-icon-refresh

refreshtext

string

刷新按鈕上文字信息

refreshtitle

string

當鼠標移到刷新按鈕上的提示信息

重新加載

refreshstate

string

指明表格如何刷新。firstpage:從第一頁開始刷新;current:隻刷新當前頁內容

firstpage

afterRefresh

function

當點擊刷新按鈕之後觸發此事件

null

search

boolean

是否啟用搜索按鈕,會觸發searchGrid 事件

true

searchhicon

string

設置搜索按鈕的圖標,隻有UI theme裡的圖標才可以使用

ui-icon-search

searchtext

string

搜索按鈕上的文字

searchtitle

string

當鼠標移到搜索按鈕上的提示信息

搜索

view

boolean

是否啟用查看按鈕,會觸發事件viewGridRow

false

viewicon

string

設置查看按鈕的圖標,隻有UI theme裡的圖標才可以使用

ui-icon-document

viewtext

string

查看按鈕上文字

viewtitle

string

當鼠標移到查看按鈕上的提示信息

查看所選記錄

· jQuery("#grid_id").jqGrid({

· …

·    pager : '#gridpager',

· …

· }).navGrid('#gridpager',{view:true, del:false}, 

· {}, // use default settings for edit

· {}, // use default settings for add

· {},  // delete instead that del:false we need this

· {multipleSearch : true}, // enable the advanced searching

· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/

· );

Jqgrid學習 ——-自定義按鈕
jQuery("#grid_id").navGrid("#pager",…).navButtonAdd("#pager",{parameters});

jQuery("#grid_id").jqGrid('navGrid',"#pager",…).jqGrid('navButtonAdd',"#pager",{parameters});

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}

caption:按鈕名稱,可以為空,string類型
buttonicon:按鈕的圖標,string類型,必須為UI theme圖標
onClickButton:按鈕事件,function類型,默認null
position:first或者last,按鈕位置
title:string類型,按鈕的提示信息
cursor:string類型,光標類型,默認為pointer
id:string類型,按鈕id

如果設置多個按鈕:

· jQuery("#grid_id")

· .navGrid('#pager',{edit:false,add:false,del:false,search:false})

· .navButtonAdd('#pager',{

·    caption:"Add", 

·    buttonicon:"ui-icon-add", 

·    onClickButton: function(){ 

·      alert("Adding Row");

·    }, 

·    position:"last"

· })

· .navButtonAdd('#pager',{

·    caption:"Del", 

·    buttonicon:"ui-icon-del", 

·    onClickButton: function(){ 

·       alert("Deleting Row");

·    }, 

·    position:"last"

· });

按鈕間的分隔

jQuery("#grid_id").navGrid("#pager",…).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};

默認參數:

{sepclass : “ui-separator”,sepcontent: ''}

sepclass:ui-jqgrid的屬性名
sepcontent:分隔符的內容.

Jqgrid學習 ——-格式化
jqGrid的格式化是定義在語言包中

· $jgrid = {

· …

·    formatter : {

·      integer : {thousandsSeparator: " ", defaultValue: '0'},

·      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},

·      currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},

·      date : {

·        dayNames: [

·          "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",

·          "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"

·        ],

·        monthNames: [

·          "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",

·          "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"

·        ],

·        AmPm : ["am","pm","AM","PM"],

·        S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j – 1) % 10, 3)] : 'th'},

·        srcformat: 'Y-m-d',

·        newformat: 'd/m/Y',

·        masks : {

·          ISO8601Long:"Y-m-d H:i:s",

·          ISO8601Short:"Y-m-d",

·          ShortDate: "n/j/Y",

·          LongDate: "l, F d, Y",

·          FullDateTime: "l, F d, Y g:i:s A",

·          MonthDay: "F d",

·          ShortTime: "g:i A",

·          LongTime: "g:i:s A",

·          SortableDateTime: "Y-m-d\\TH:i:s",

·          UniversalSortableDateTime: "Y-m-d H:i:sO",

·          YearMonth: "F, Y"

·        },

·        reformatAfterEdit : false

·      },

·      baseLinkUrl: '',

·      showAction: '',

·      target: '',

·      checkbox : {disabled:true},

·      idName : 'id'

·    }

· …

這些設置可以通過colModel中的formatoptions參數修改

· jQuery("#grid_id").jqGrid({

· …

·    colModel : [

·    …

·       {name:'myname', … formatter:'number', …},

·    …

·    ],

· …

· });

此實例是對名為“myname”的列進行格式化,格式化類是“number”,假如初始值為“1234.1”則格式化後顯示為“1 234.10” 。

如果給某列進行格式化:

· jQuery("#grid_id").jqGrid({

· …

·    colModel : [

·    …

·       {name:'myname', … formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,

·    …

·    ],

· …

· });

這個設置會覆蓋語言包中的設置。

select類型的格式化實例:

原始數據

· jQuery("#grid_id").jqGrid({

· …

·    colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} … ],

· …

· });

使用格式化後

· jQuery("#grid_id").jqGrid({

· …

·    colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} … ]

· …

· });

結果是,表格的數據值為1或者2但是現實的是One或者Two。

對超鏈接使用select類型的格式化:

· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, …} 

·       … 

·    ]

· …

· });

  如果想改變id值則

· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, …} 

·       … 

·    ]

· …

· });

 
Jqgrid學習 ——-自定義格式化
· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ 

·       … 

·       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},

·       …

·    ]

· …

· });

·  

· function currencyFmatter (cellvalue, options, rowObject)

· {

·    // do something here

·    return new_format_value

· }

cellvalue:要被格式化的值
options:對數據進行格式化時的參數設置,格式為:
{ rowId: rid, colModel: cm}
rowObject:行數據

數據的反格式化跟格式化用法相似.

· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ 

·       … 

·       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},

·       …

·    ]

· …

· });

·  

· function currencyFmatter (cellvalue, options, rowObject)

· {

·  

·    return "$"+cellvalue;

· }

· function  unformatCurrency (cellvalue, options)

· {

·  

·    return cellvalue.replace("$","");

· }

表格中數據實際值為123.00,但是顯示的是$123.00; 我們使用getRowData ,getCell 方法取得的值是123.00。
創建通用的格式化函數

· <script type="text/javascript">

· jQuery.extend($.fn.fmatter , {

·     currencyFmatter : function(cellvalue, options, rowdata) {

·     return "$"+cellvalue;

· }

· });

· jQuery.extend($.fn.fmatter.currencyFmatter , {

·     unformat : function(cellvalue, options) {

·     return cellvalue.replace("$","");

· }

· });

·  

· </script>

具體使用:

· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ 

·       … 

·       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},

·       …

·    ]

· …

· })

Jqgrid學習 ——-搜索
表格中所有的列都可以作為搜索條件。
所用到的語言包文件

· $.jgrid = {

· …

·    search : {

·      caption: "Search…",

·      Find: "Find",

·      Reset: "Reset",

·      odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],

·      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],

·      matchText: " match",

·      rulesText: " rules"

·    }

colModel 設置

可選參數

類型

說明

默認值

search

boolean

是否是搜索列

true

stype

string

搜索類型,text類型或者select類型

text

searchoptions

object

對搜索條件進行一些設置

 

searchoptions 參數

屬性

類型

說明

dataUrl

string

隻有當搜索類型為select才起效

buildSelect

function

隻有當dataUrl設置時此參數才起效,通過一個function來構建下拉框

dataInit

function

初始化時調用,用法:dataInit: function(elem) {do something}通常用在日期的選擇上. Example:dataInit : function (elem) {$(elem).datepicker();}

dataEvents

array

事件列表,用法:dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},{ type: 'keypress', fn: function(e) { console.log('keypress'); } }]

attr

object

設置屬性值。attr : { title: “Some title” }

searchhidden

boolean

默認情況下,隱藏值不是搜索列。為瞭使隱藏值可以作為搜索列則將此設為true

sopt

array

此參數隻用到單列搜索上,說明搜索條件。可用值:['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']意 思為['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']

defaultValue

string

默認值

value

mixed

隻用在搜索類型為select下。可以是string或者object,如果為string則格式為value:label,且以“;”結尾;如果為object格式為editoptions:{value:{1:'One';2:'Two'}}

· jQuery("#grid_id").jqGrid({

· …

·    colModel: [ 

·       … 

·       {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },

·       …

·    ]

· …

· });

· datePick = function(elem)

· {

·    jQuery(elem).datepicker();

· }

需要說明的:
所有的搜索都是使用url來到服務器端查詢數據。
當執行搜索時會用查詢數據填充postData array
發送到服務器端搜索字符串的名稱為_search
當點擊刷新按鈕時不會使用搜索條件
每個搜索方法都有自己的數據清空方法

Jqgrid學習 ——-搜索工具欄
搜索工具欄隻是在列標題下面構造一個輸入框。且使用表格的url進行搜索記錄,發到服務器端數據格式為name:value,而且是附加在postData之後。

jQuery("#grid_id").filterToolbar(options);

jQuery("#grid_id").jqGrid('filterToolbar',options);

options:參數

可選參數

類型

描述

默認值

autosearch

boolean

查詢規則,如果是text類型則是當按下回車鍵才去執行查詢;如果是select類型的查詢則當值改變時就去執行查詢

true

beforeSearch

function

執行查詢之前觸發此事件

null

afterSearch

function

查詢完成後觸發事件

null

beforeClear

function

清空查詢條件值時觸發事件

null

afterClear

function

清空查詢條件後觸發事件

null

方法:

方法

描述

triggerToolbar

執行查詢時調用此方法

clearToolbar

當清空查詢條件值時觸發此函數

toggleToolbar

Toggeles工具欄

Jqgrid學習 ——-自定義搜索
<p id="mysearch"></p>

jQuery("#mysearch").filterGrid('#grid_id',options);

options:參數

參數

描述

默認值

gridModel

當為ture我們會使用colModel中的屬性構造查詢條件,所用到的參數:name, index, edittype, editoptions, search.還有一個參數:defval:查詢條件的默認值;surl:當edittype:'select'時獲取select數據的url,格 式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>

false

gridNames

gridModel為true時起效,設置查詢列的名稱

false

filterModel

gridModel為false時起效,格式:{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label:字段顯示名稱;name:列名;stype:輸入框類型,text或者select;surl:獲取select數據的地 址,要求的內容為html格式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>;sopt:同editoptions

[]

formtype

定義表單如何被構造,'horizontal' or 'vertical'

autosearch

如果為true:當點擊回車鍵觸發查詢;當select值變化時觸發查詢

formclass

可以使用的css

filterform

tableclass

可以使用到table上的css

filtertable

buttonclass

按鈕上使用的css

filterbutton

searchButton

搜索按鈕

Search

clearButton

清空數據的按鈕

Clear

enableSearch

啟用禁用搜索按鈕

false

enableClear

啟用禁用清空按鈕

false

beforeSearch

搜索之前觸發的事件

null

afterSearch

搜索完成之後觸發的事件

null

beforeClear

清空數據之前觸發的事件

null

afterClear

清空數據之後觸發事件

null

url

搜索數據的url

‘’

marksearched

當為true時,每次查詢之後所有查詢的列都標記為可查詢列

發佈留言