jqgrid屬性詳解

時間  2019-11-08
標籤 jqgrid 屬性 詳解 简体版
原文   原文鏈接
jqGrid整理

1、 jqGrid的加載。javascript

1.引用相關頭文件php

引入CSS：css

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

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

引入JS：jquery

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

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

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

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

由於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> }); ;
 
})

2、 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()中的。

3、 注意事項

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的一些參數說明：

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

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

二、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},

                    ],

三、id:表明整個數據表格的一個ID，沒條數據的ID必須是惟一的，常和後臺數據表ID對應,

   id:dpt_code

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

   caption: "科室管理11",

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

   rowNum:20

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

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

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

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

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

九、 multiselect:'true'，是指是否能夠進行多選

十、altRows:'true',是否開啓，提示功能

十一、 multiboxonly:true 是否在多選的時候，顯示覆選框

十二、height: 398，表明表格的高度

1三、cellEdit:true,是否開啓單元格的編輯功能

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

1五、cellurl:'departmentAction!updateCell.action',cellsubmit要提交的後臺路徑

1六、scrollrows:true是否能夠出現滾動條

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

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

   editurl:'departmentAction!updateDepartment2.action',

1九、sortname:默認排序的列

   sortname: 'dpt_sort',

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

    jsonReader: {

                        repeatitems : false,

                        id: "dpt_code" //對應後臺數據的ID

                    },

2一、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

                    }

2二、gridComplete:設置表格數據加載完畢後，所執行的操做

     gridComplete:function(){

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

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

                        }

                    },

2三、onSelectRow:表格某行被選中後執行的操做：

    onSelectRow:function(){

                        loadDataGrid();

                    },

2四、ondblClickRow:數據某行所執行的操做

2五、beforeSelectRow：某行記錄在被選中前執行操做

2六、afterSelectRow:某行記錄再被選中後所執行操做

2七、設置表格的添加、刪除、修改、查詢按鈕是否顯示，也能夠自定義按鈕

      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"

                });

2八、獲取表格總行數

     var ids = $("#gridTable").getDataIDs();得到全部數據的ID數組

2九、按ID獲取某行數據操做：

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

30、獲取選中行的記錄，若是設置的multiselect爲true那麼獲取的是數組反正是一個對象

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

    re.dpt_name,re.dpt_tel

3一、在數據網格動態增長行操做

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

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

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

    <%@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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程