碼上歡樂
相關內容    簡體    繁體

jqgrid屬性詳解

本文轉載自   查看原文   2018-04-18 15:22   3250 
jqGrid整理

一、 jqGrid的加載。

1.引用相關頭文件

引入CSS：

<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />

引入JS：

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

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

<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>

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

因為jqGrid3.6及以后的版本集成了jQuery UI，所以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載，否則會出問題。

2.將jqgrid加入頁面中

根據jqGrid的文檔，要想生成一個jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是頁面上的一個table：<table id="list"></table>

下面是一個簡單的例子：

<script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>>
 
$(document).ready(<span class="kwrd" style="color: rgb(0, 0, 255);">function</span> () {
 
jQuery(<span class="str" style="color: rgb(0, 96, 128);">"#list"</span>).jqGrid({
 
url: <span class="str" style="color: rgb(0, 96, 128);">'Handler.ashx'</span>,
 
datatype: <span class="str" style="color: rgb(0, 96, 128);">"json"</span>,
 
mtype: <span class="str" style="color: rgb(0, 96, 128);">'GET'</span>,
 
colNames: [<span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>],
 
colModel: [
 
{ name: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, width: 40, align: <span class="str" style="color: rgb(0, 96, 128);">"left"</span>, editable: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span> },
 
{ name: <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, width: 100, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span> },
 
{ name: <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, width: 100, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span> },
 
{ name: <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>, width: 150, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span>, search: <span class="kwrd" style="color: rgb(0, 0, 255);">false</span> }
 
],
 
rowList: [10, 20, 30],
 
sortname: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>,
 
viewrecords: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>,
 
sortorder: <span class="str" style="color: rgb(0, 96, 128);">"desc"</span>,
 
jsonReader: {
 
root: <span class="str" style="color: rgb(0, 96, 128);">"griddata"</span>,
 
total: <span class="str" style="color: rgb(0, 96, 128);">"totalpages"</span>,
 
page: <span class="str" style="color: rgb(0, 96, 128);">"currpage"</span>,
 
records: <span class="str" style="color: rgb(0, 96, 128);">"totalrecords"</span>,
 
repeatitems: <span class="kwrd" style="color: rgb(0, 0, 255);">false</span>
 
},
 
pager: jQuery(<span class="str" style="color: rgb(0, 96, 128);">'#pager'</span>),
 
rowNum: 5,
 
altclass: <span class="str" style="color: rgb(0, 96, 128);">'altRowsColour'</span>,
 
<span class="rem" style="color: rgb(0, 128, 0);">//width: 'auto',</span>
 
width: <span class="str" style="color: rgb(0, 96, 128);">'500'</span>,
 
height: <span class="str" style="color: rgb(0, 96, 128);">'auto'</span>,
 
caption: <span class="str" style="color: rgb(0, 96, 128);">"DemoGrid"</span>
 
}).navGrid(<span class="str" style="color: rgb(0, 96, 128);">'#pager'</span>, { add: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>, edit: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>, del: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>,search:<span class="kwrd" style="color: rgb(0, 0, 255);">false</span>,refresh:<span class="kwrd" style="color: rgb(0, 0, 255);">false</span> }); ;
 
})

二、 jqgrid的重要選項

具體的options參考，可以訪問jqGrid文檔關於option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：

  • url ：jqGrid控件通過這個參數得到需要顯示的數據，具體的返回值可以使XML也可以是Json。
  • datatype ：這個參數用於設定將要得到的數據類型。類型包括：json 、xml、xmlstring、local、javascript、function。默認是“xml”
  • mtype : 定義使用哪種方法發起請求，GET或者POST。默認是get
  • height ：Grid的高度，可以接受數字、%值、auto，默認值為150。
  • width ：Grid的寬度，如果未設置，則寬度應為所有列寬的之和；如果設置了寬度，則每列的寬度將會根據shrinkToFit選項的設置，進行設置。
  • shrinkToFit ：此選項用於根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值，則每列寬度會根據width成比例縮放；如果shrinkToFit為false且設置了width值，則每列的寬度不會成比例縮放，而是保持原有設置，而Grid將會有水平滾動條。
  • autowidth ：默認值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調用setGridWidth方法來完成。
  • pager ：定義頁碼控制條Page Bar，在上面的例子中是用一個div(<div id=”pager”></div>)來放置的。
  • sortname ：指定默認的排序列，也就是根據初始化的時候根據colmodal的哪一列排序的，colmodal的index就是要傳給后端的sortname的值。可以是列名也可以是數字。此參數會在被傳遞到Server端。此參數的對應的值就是colmodal的index：“”；即對應的是傳給后端的參數sidx：“”；
  • sortorder: 默認值 "asc",
  • sortable：外層的sortable，默認為true，決定的事列表頭，也就是label是否可以排序。
  • viewrecords ：設置是否在Pager Bar顯示所有記錄的總數。默認為false
  • caption ：設置Grid表格的標題，如果未設置，則標題區域不顯示。
  • rowNum ：用於設置Grid中一次顯示的行數，默認值為20。正是這個選項將參數rows（prmNames中設置的）通過url選項設置的鏈接傳遞到Server。注意如果Server返回的數據行數超過了rowNum的設定，則Grid也只顯示rowNum設定的行數。
  • rowList ：一個數組，用於設置Grid可以接受的rowNum值。例如[10,20,30]。
  • colNames ：字符串數組，用於指定各列的題頭文本，與列的順序是對應的。
  • colModel ：最重要的數組之一，用於設定各列的參數。（稍后詳述）
  • prmNames ：這是一個對象，用於設置jqGrid將要向Server傳遞的參數名稱。（稍后詳述），默認值是：
    prmNames: {
                    page:"page",
                    rows:"rows",
                    sort: "sidx",=>傳給后端的sidx =>外面的sortname:index
                    order: "sord",=>外邊的sortorder
                    search:"_search",
                    nd:"nd",
                    id:"id",
                    oper:"oper",
                    editoper:"edit",
                    addoper:"add",
                    deloper:"del",
                    subgridid:"id",
                    npage: null,
                    totalrows:"totalrows"
                },
  • jsonReader ：這又是一個對象，用來設定如何解析從Server端發回來的json數據。（稍后詳述）

2.1 prmNames選項

prmNames是jqGrid的一個重要選項，用於設置jqGrid將要向Server傳遞的參數名稱。其默認值為：

prmNames : {

page:"page", // 表示請求頁碼的參數名稱

rows:"rows", // 表示請求行數的參數名稱

sort: "sidx", // 表示用於排序的列名的參數名稱，也就是sortname

order: "sord", // 表示采用的排序方式的參數名稱  也就是sortorder

search:"_search", // 表示是否是搜索請求的參數名稱

nd:"nd", // 表示已經發送請求的次數的參數名稱

id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱

oper:"oper", // operation參數名稱

editoper:"edit", // 當在edit模式中提交數據時，操作的名稱

addoper:"add", // 當在add模式中提交數據時，操作的名稱

deloper:"del", // 當在delete模式中提交數據時，操作的名稱

subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱

npage: null,

totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal

}

2.2 jsonReader選項

jsonReader是jqGrid的一個重要選項，用於設置如何解析從Server端發回來的json數據，如果Server返回的是xml數據，則對應的使用xmlReader來解析。jsonReader的默認值為：

jsonReader : {

root: "rows", // json中代表實際模型數據的入口

page: "page", // json中代表當前頁碼的數據

total: "total", // json中代表頁碼總數的數據

records: "records", // json中代表數據行總數的數據

repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來自於colModel中的name設定。

cell: "cell",

id: "id",

userdata: "userdata",

subgrid: {

root:"rows",

repeatitems: true,

cell:"cell"

}

}

假如有下面一個json字符串：

{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

其對應的jsonReader為：jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

}

注：cell、id在repeatitems為true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以適用另一種json結構。援引文檔中的例子：

repeatitems為true時：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords"

     },  

     ...  

});  

json結構為：

{   

"totalpages": "xxx",   

"currpage": "yyy",  

"totalrecords": "zzz",  

"invdata" : [  

                  {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},   // cell中不需要各列的name，只要值就OK了，但是需要保持對應

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

                  ...  

     ]  

}  

repeatitems為false時：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords",  

         repeatitems: false,  

         id: "0"

     },  

     ...  

});  

json結構為：

{   

"totalpages" : "xxx",   

"currpage" : "yyy",  

"totalrecords" : "zzz",  

"invdata" : [  

                 {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數據中需要各列的name，但是可以不按列的順序

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

                  ...  

     ]  

}  

 

2.3 colModel的重要選項

colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這里先只說說最基本的。

  • name ：為Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
  • index ：設置排序時所使用的索引名稱，這個index名稱會作為sidx參數（prmNames中設置的）傳遞到Server。
  • label ：當jqGrid的colNames選項數組為空時，為各列指定題頭。如果colNames和此項都為空時，則name選項值會成為題頭。
  • width ：設置列的寬度，目前只能接受以px為單位的數值，默認為150。
  • sortable ：設置該列是否可以排序，默認為true。
  • search ：設置該列是否可以被列為搜索條件，默認為true。
  • resizable ：設置列是否可以變更尺寸，默認為true。
  • hidden ：設置此列初始化時是否為隱藏狀態，默認為false。
  • formatter ：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等（具體參見文檔 ）。
  • 8.fixed 默認為false，如果設置了true，即使外邊的設置了shrinkToFit為true，列寬也不會重新進行計算。GridWidth方法改變表格寬度時，列寬也不會改變。
    9.fixFlag:列是必選項。必顯示的項。對應的是hiddeFlag
    10.hidden: 隱藏列
  • frozen：列不會隨着滾動條滾動而滾動。
  • jqgrid 凍結列3步設置：

 注意事項; jqgrid凍結的三步設置。

  • 第一步設置colModel  列內的 frozen: true；

    第二步設置表格初始時寬度 shrinkToFit: false,

    // ture: 按比例初始化列寬度  false: 列寬度使用colModel指定的寬度   ---這里設置為false是當數據為空也能看到凍結效果，可根據實際需求設置

    第三步在最后設置    jQuery("#mytable").jqGrid('setFrozenColumns');

  • 在boss平台中，加了frozen后，表格內的態度樣式會錯位，需要重新設置css樣式。
  • jqgrid.jqgrid（“setFrozenColumns”）不是寫在loadComplete()中的。

三、 注意事項

1. 動態改變Add Form或者Edit Form中的select的內容，如：改變下圖中的Comparator下拉中的內容。

clip_image002

$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},

{

checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,

beforeInitData:function(formid){

initComparator();

},

beforeShowForm: function(formid){

$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});

$('#tr_Name', formid).hide();

}

}，//edit

{},//add

{}//del

）

beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開，2項之間用分號隔開。注意：把recreateForm設為true，否則'setColProp'只在第一次調用時有效。

2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數據條數。

3. jQuery("#list_d").clearGridData();清空數據。

4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。

5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete：中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");

}

6. 對於像1中的可編輯的字段，可以設定rule，參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules

7. 修改Option，以URL為例

jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');

 

 

 

 

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

 

8.fixed 默認為false，如果設置了true，即使外邊的設置了shrinkToFit為true，列寬也不會重新進行計算。GridWidth方法改變表格寬度時，列寬也不會改變。
9.fixFlag:列是必選項。必顯示的項。對應的是hiddeFlag
10.hidden: 隱藏列

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的下面，且是一個div對象：

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

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

· 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>   

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

· ...  

· </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'}, ...}   

·       ...   

·    ]  

· ...  

· });

得到http://localhost/someurl.php?id=123&action=edit 

如果想改變id值則

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

· ...  

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

·       ...   

·    ]  

· ...  

· });

得到http://localhost/someurl.php?myid=123&action=edit

 

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學習 -------自定義搜索

<div id="mysearch"></div>

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時，每次查詢之后所有查詢的列都標記為可查詢列

true

 
 
 
 
 
 

jqgrid使用說明

 

jqGrid 是一個用來顯示網格數據的jQuery插件，可以動態的對數據網格的數據進行添加、刪除、修改、查詢、排序、拖拽等操作，數據源可以是json、xml

 

官網下載地址：http://www.trirand.com/blog/?page_id=6

官網文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

觀望DEMO:http://www.trirand.com/blog/jqgrid/jqgrid.html

jqgrid基於ssh代碼實例：

下載simpleProj.war包后放到tomcat的webapp下，然后運行tomcat,訪問http://localhost:8080/simpleProj/進行操作，數據庫用的是內置的hsqldb

下載地址：ftp://192.168.100.253/liubx/simpleProj.war

使用jqGrid必須要引入jquery環境，如：

       <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/themes/jquery-ui-1.8.10.custom.css" />

        <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/jqGrid/css/ui.jqgrid.css" />

        <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/css/jquery.alerts.css" />

        <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>

        <script src="<%=basePath%>js/jqGrid/grid.locale-cn.js" type="text/javascript"></script>

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

        <script type="text/javascript" src="<%=basePath%>js/thickbox/thickbox.js"></script>

        <link rel="stylesheet" href="<%=basePath%>js/thickbox/thickbox.css" type="text/css" media="screen" />

jquery和jqgrid的版本要對應，一下是對jqgrid的一些參數說明：

1、colNames:列名稱,用於描述在界面上顯示的列名稱

   colNames: ['編號','科室名稱','聯系人','聯系電話','主管科室','狀態','備注','opertype'],

2、colModel:列名稱對應的model，該model內的各個列要和colNames的各個列進行一一對應

   可以對各個列設置屬性，name屬性葯設置為json數據的key名稱,也就是我們的Bean的對應屬性名稱，width：寬度,editable代表是否可編輯，edittype代表編輯框的類型，可以是  text、select、texare、checkbox等類型,formatter:格式化顯示的數據，unformat：處於編輯狀態后反格式化到以前的數據

   如：

    colModel: [

    {name:'dpt_code',index:'dpt_code',width:110,editable: true,edittype:"text",cellEdit:false,editrules:{required:true}},

    {name:'dpt_name',index:'dpt_name',width:110,editable: true,edittype:"text"},

    {name:'dpt_manager',index:'dpt_manager',width:100,editable: true,edittype:"text"},

    {name:'dpt_tel',index:'dpt_tel',width:120,editable: true,edittype:"text", editrules:{custom:true, custom_func:telcheck}},

    {name:'dpt_mandpt',index:'dpt_mandpt',editable: true,edittype:"text"},

    {name:'dpt_status',index:'dpt_status',formatter:formatStatus,width:60,editable: true,edittype:"select",unformat:unformatStatus,                                   editoptions :{value:'STP:停用'+';'+'USE:使用'}},

    {name:'dpt_remark',index:'dpt_remark',editable: true,edittype:"text"},

     {name:'opertype',index:'opertype',editable: false,edittype:"text",hidden:true},

                    ],

3、id:代表整個數據表格的一個ID，沒條數據的ID必須是唯一的，常和后台數據表ID對應,

   id:dpt_code

4、caption:設置數據表格的標題名稱

   caption: "科室管理11",

5、rowNum:設置表格默認顯示記錄的條數，用於分頁

   rowNum:20

6、rowList:供用戶選擇每頁顯示的記錄數

   rowList:[10,20,30,40],

7、pager: 用指定表格的工具欄

   pager: '#pageDiv',pageDiv是頁面某個DIV的ID

8、pgbuttons:true, 是否顯示頁面分頁按鈕

9、 multiselect:'true'，是指是否可以進行多選

10、altRows:'true',是否開啟，提示功能

11、 multiboxonly:true 是否在多選的時候，顯示復選框

12、height: 398，代表表格的高度

13、cellEdit:true,是否開啟單元格的編輯功能

14、cellsubmit:'remote',remote代表每次編輯提交后進行服務器保存，clientArray只保存到數據表格不保存到服務器

15、cellurl:'departmentAction!updateCell.action',cellsubmit要提交的后台路徑

16、scrollrows:true是否可以出現滾動條

17、shrinkToFit:false是否固定每列的寬度

18、editurl:表格的添加、修改、刪除按鈕所提交的路徑

   editurl:'departmentAction!updateDepartment2.action',

19、sortname:默認排序的列

   sortname: 'dpt_sort',

20、jsonReader:解析json數據的參數

    jsonReader: {

                        repeatitems : false,

                        id: "dpt_code" //對應后台數據的ID

                    },

21、prmNames :向后台交互時，所設置的參數名稱對應的值

   prmNames : {

                        page:"department.curr_page",    // 表示請求頁碼的參數名稱

                        rows:"department.page_size",    // 表示請求行數的參數名稱

                        sort: "department.sort_field", // 表示用於排序的列名的參數名稱

                        order: "department.sord", // 表示采用的排序方式的參數名稱

                        search:"search", // 表示是否是搜索請求的參數名稱

                        totalrows:"department.totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal

                    }

22、gridComplete:設置表格數據加載完畢后，所執行的操作

     gridComplete:function(){

                        if($("#gridTable").getDataIDs().length>0){

                            $("#gridTable").jqGrid('setSelection',$("#gridTable").getDataIDs()[0]);//默認選中第一行

                        }

                    },

23、onSelectRow:表格某行被選中后執行的操作：

    onSelectRow:function(){

                        loadDataGrid();

                    },

24、ondblClickRow:數據某行所執行的操作

25、beforeSelectRow：某行記錄在被選中前執行操作

26、afterSelectRow:某行記錄再被選中后所執行操作

27、設置表格的添加、刪除、修改、查詢按鈕是否顯示，也可以自定義按鈕

      search:false不顯示查詢按鈕，add_options主要設置點添加按鈕后彈出框的樣式及模式

      navButtonAdd：通過該方法可以添加自定義的按鈕

      var add_options={

                    width:400,

                    height:290,

                    left:20,

                    top:30,

                    reloadAfterSubmit:false,

                    jqModal:false,

                    addCaption: "添加部門信息",

                    bSubmit: "保存",

                    bCancel: "關閉",

                    closeAfterAdd:true

 

                };

     jQuery("#gridTable").jqGrid('navGrid','#pageDiv',{search:false,edit:true,add:true,del:true},edit_options,add_options,{},{},{}).navButtonAdd('#pageDiv',{

                    caption:"添加",edit:true顯示編輯按鈕

                    title:'添加葯品信息',

                    buttonicon:"ui-icon-update",

                    onClickButton:function(){

                        tb_show('添加科室信息','/simpleProj/bsic/departmentAction!addDepartment.action?TB_iframe=true&height=420&width=630&keepThis=false"',true);

                    },

                    position:"last"

                });

28、獲取表格總行數

     var ids = $("#gridTable").getDataIDs();獲得所有數據的ID數組

29、按ID獲取某行數據操作：

    $("#gridTable").jqGrid("getRowData",id);

30、獲取選中行的記錄，如果設置的multiselect為true那么獲取的是數組反正是一個對象

    var re = $("#gridTable").jqGrid('getGridParam','selrow'),返回一個json對象，可以通過如下方式訪問：

    re.dpt_name,re.dpt_tel

31、在數據網格動態增加行操作

    rowid代表行號、dataRow一條josn數據，last指向表格最后一行追加

    $("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");

32、一下是對部門表管理的完整代碼：

    <%@page contentType="text/html; charset=utf-8" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title> Page</title>

        <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/themes/jquery-ui-1.8.10.custom.css" />

        <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/jqGrid/css/ui.jqgrid.css" />

        <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>js/css/jquery.alerts.css" />

        <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>

        <script src="<%=basePath%>js/jqGrid/grid.locale-cn.js" type="text/javascript"></script>

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

        <script type="text/javascript" src="<%=basePath%>js/thickbox/thickbox.js"></script>

        <link rel="stylesheet" href="<%=basePath%>js/thickbox/thickbox.css" type="text/css" media="screen" />

        <script language="javascript">

            $(document).ready(function(){

                function formatStatus(cval, options ){

                    if(cval){

                        if(cval=='STP'){

                            return "停用";

                        }else if(cval=='USE'){

                            return '可用';

                        }else{

                            return cval;

                        }

                    }

                }

                function unformatStatus(cval, options ){

                    if(cval){

                        if(cval=='停用'){

                            return "STP";

                        }else if(cval=='可用'){

                            return 'USE';

                        }else{

                            return cval;

                        }

                    }

                }

                function telcheck(val, colname){

                     var pattern =/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/;

                     if(!pattern.exec(val)) {

                          return [false,"請輸入正確的電話號碼！"]; 

 

                     }else{

                        return [true,""]; 

 

                     }

 

                }

                $('#gridTable').jqGrid({

                    url: 'departmentAction!queryDepartment.action',

                    datatype: "json",

                    height: "auto",

                    colNames: ['編號','科室名稱','聯系人','聯系電話','主管科室','狀態','備注','opertype'],

                    colModel: [

                        {name:'dpt_code',index:'dpt_code',width:110,editable: true,edittype:"text",cellEdit:false,editrules:{required:true}},

                        {name:'dpt_name',index:'dpt_name',width:110,editable: true,edittype:"text"},

                        {name:'dpt_manager',index:'dpt_manager',width:100,editable: true,edittype:"text"},

                        {name:'dpt_tel',index:'dpt_tel',width:120,editable: true,edittype:"text", editrules:{custom:true, custom_func:telcheck}},

                        {name:'dpt_mandpt',index:'dpt_mandpt',editable: true,edittype:"text"},

                        {name:'dpt_status',index:'dpt_status',formatter:formatStatus,width:60,editable: true,edittype:"select",unformat:unformatStatus, editoptions :{value:'STP:停用'+';'+'USE:使用'}},

                        {name:'dpt_remark',index:'dpt_remark',editable: true,edittype:"text"},

                        {name:'opertype',index:'opertype',editable: false,edittype:"text",hidden:true},

                    ],

                    id:'dpt_code',

                    caption: "科室管理11",

                    rowNum:20,

                    rowList:[10,20,30,40],

                    pager: '#pageDiv',

                    pgbuttons:true,

                    viewrecords: true,

                    pagerpos:'center',

                    multipleSearch:'true',

                    altRows:'true',

                    multiselect: true,

                    multiboxonly:true,

                    height: 398,

                    cellEdit:true,

                    cellsubmit:'remote',

                    cellurl:'departmentAction!updateCell.action',

                    scrollrows:true,

                    shrinkToFit:false,

                    width:838,

                    editurl:'departmentAction!updateDepartment2.action',

                    sortname: 'dpt_sort',

                    jsonReader: {

                        repeatitems : false,

                        id: "dpt_code"

                    },

                    prmNames : {

                        page:"department.curr_page",    // 表示請求頁碼的參數名稱

                        rows:"department.page_size",    // 表示請求行數的參數名稱

                        sort: "department.sort_field", // 表示用於排序的列名的參數名稱

                        order: "department.sord", // 表示采用的排序方式的參數名稱

                        search:"search", // 表示是否是搜索請求的參數名稱

                        totalrows:"department.totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal

                    }

                });

                var add_options={

                    width:400,

                    height:290,

                    left:20,

                    top:30,

                    reloadAfterSubmit:false,

                    jqModal:false,

                    addCaption: "添加部門信息",

                    bSubmit: "保存",

                    bCancel: "關閉",

                    closeAfterAdd:true

 

                };

                var edit_options={

                    width:400,

                    height:290,

                    left:20,

                    top:30,

                    reloadAfterSubmit:false,

                    jqModal:false,

                    editCaption: "修改部門信息",

                    bSubmit: "保存",

                    bCancel: "關閉",

                    closeAfterEdit:true

 

                };

                jQuery("#gridTable").jqGrid('navGrid','#pageDiv',{search:false,edit:true,add:true,del:true},edit_options,add_options,{},{},{}).navButtonAdd('#pageDiv',{

                    caption:"添加",

                    title:'添加葯品信息',

                    buttonicon:"ui-icon-update",

                    onClickButton:function(){

                        tb_show('添加科室信息','/simpleProj/bsic/departmentAction!addDepartment.action?TB_iframe=true&height=420&width=630&keepThis=false"',true);

                    },

                    position:"last"

                });

                $("#queryButton_id").click(function(){

                    dpt_code =encodeURIComponent($("#dpt_code_id").val());

                    dpt_status =encodeURIComponent($("#dpt_status_id").val());

                    dpt_name =encodeURIComponent($("#dpt_name_id").val());

                    jQuery("#gridTable").jqGrid('setGridParam',{url:"departmentAction!queryDepartment.action?department.dpt_code="+dpt_code+"&department.dpt_name="+dpt_name+"&department.dpt_status="+dpt_status,page:1}).trigger("reloadGrid");

                });

                $("#addRow").click(function(){

 

                    var ids = $("#gridTable").jqGrid('getDataIDs');

 

                    var rowid = ids.length + 1;

                    var dataRow ={dpt_code:'',dpt_name:'',dpt_manager:'',dpt_tel:'',dpt_mandpt:'',dpt_status:'USE',dpt_remark:'',opertype:'add'};

                    $("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");     

                });

                $("#saveButton_id").click(function(){

                    var ids = $("#gridTable").getDataIDs();

                    var re;

                    var type;

                    var mty_num=0;

                    var strparm="{";

                    $.each(ids,function(i,id){

                        re=$("#gridTable").jqGrid("getRowData",id);

                        type = re.opertype;

                        if(type=="add" || type=="update"){

                           patrnVal(re.dpt_status);

                            strparm=strparm+"'mtyzptList["+mty_num+"].dpt_code':'"+re.dpt_code+"','mtyzptList["+mty_num+"].dpt_name':'"+re.dpt_name+"','mtyzptList["+mty_num+"].dpt_manager':'"+re.dpt_manager+"','mtyzptList["+mty_num+"].dpt_tel':'"+re.dpt_tel+"','mtyzptList["+mty_num+"].dpt_mandpt':'"+re.dpt_mandpt+"','mtyzptList["+mty_num+"].dpt_status':'"+re.dpt_status+"','mtyzptList["+mty_num+"].dpt_remark':'"+re.dpt_remark+"',";

                            mty_num++;

                        }

 

                    });

                    if(mty_num==0){

                        alert("數據未更改！");

                        return;

                    }

                    strparm=strparm.substring(0,strparm.length-1);

                    strparm=strparm+"}";

 

                    while(strparm.indexOf("\r\n") >= 0){

                        strparm = strparm.replace("\r\n", "\\r\\n");

                    }

                    eval("var param="+strparm);

                    $.post("departmentAction!batchUpdate.action",param,function(data){

                        alert(data);

                        if(data && data=='OK'){

                         //   $("#gridTable").trigger("reloadGrid");

                        }else{

                            alert("保存數據失敗,請查看相關日志！");

                        }

                    },"json");

                });

                function patrnVal(s)  

                {  

                    if ($(s).val()) 

                    {

 

                        alert($(s).val());

 

                    }else{

                        alert(s);

                    }  

 

                }  

            });

        </script>

    </head>

    <body>

        <div  style="width:62%;height:80%;border:1px solid gray;float:left;">

            <s:form action="departmentAction!queryDepartment.action" theme="simple" method="post">

                <table width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tr><td colspan="8"></td></tr>

                    <tr>

                        <td>科室編號</td>

                        <td><s:textfield id="dpt_code_id" name="department.dpt_code" required="true" /> </td>

                        <td>科室名稱</td>

                        <td><s:textfield id="dpt_name_id" name="department.dpt_name" required="true" />

                        </td>

                    </tr>

                    <tr>

                        <td>狀態</td>

                        <td>

                            <s:select label="狀 態"  id="dpt_status_id" name="department.dpt_status" headerKey="" headerValue="請選擇狀態"

                                      list="#{'USE':'---有 效---','STP':'---無 效---'}"  />

                        </td>

                        <td colspan="2"><input type="button" id="queryButton_id" value="查 詢"/>

                            <input type="button" id="addRow" value="添加一行"/>

                            <input type="button" id="saveButton_id" value="保 存"/></td>    

                    </tr>

 

                </table>

            </s:form>

            <table id="gridTable">

            </table>

            <div id="pageDiv">

            </div>

        </div>

        <!--div style="width:49%;height:80%;border:1px solid gray;float:left;">

            <table id="gridTable2">

            </table>

            <div id="pageDiv2">

            </div>

            <div>

                <input></input>

            </div>

        </div>

    </body-->

</html>

 轉載  https://blog.csdn.net/tangaoyu520hf/article/details/45893993

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jqGrid 詳解 jqgrid獲取Column屬性 jqGrid 屬性、事件全集 jqGrid配置屬性說明 jqgrid屬性以及事件 jqGrid 各種參數 詳解 jqGrid 各種參數 詳解 jqGrid 各種參數 詳解 jqGrid APi 詳解 jqGrid 各種參數 詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM