3、jqGrid 3.6.2 中文文檔——BasicGrid（1）分類(lèi)：
JQuery 2010-07-29 13:19 2608人閱讀
評論(0)
收藏舉報二、BasicGrid
一個(gè)實(shí)例jqGrid是一個(gè)帶有屬性，事件和方法JavaScript對象。屬性可以是字符串，數字，數組，布爾值，甚至其他對象。
JavaScript代碼
jQuery("#grid_id").jqGrid(options);
HTML代碼
<html>
<body>
<table id="grid_id"></table>
</body>
<html>
其中： grid_id 是HTML中<table>表格的id。
options 是“名稱(chēng)：值”對格式的設置數組。有些設置是值，有些是事件的響應函數，有些是jqGrid工作必須的選項。
從XML文件中讀取數據的例子：
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid'
});
});
</script>
從json中讀取數據的例子：
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#grid").jqGrid({
url:'/jqGridModel?model=Wine',
datatype: "json",
mtype: 'GET',
colNames:['id', 'Provider', 'Name', 'Year', 'Description', 'Type', 'Geographical Region', 'Creation Date', 'Edit Date'],
colModel:[
{name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}},
{name:'provider',index:'provider', width:200,editable:false},
{name:'name',index:'name', width:200,editable:true},
{name:'year',index:'year', width:100,editable:true},
{name:'description',index:'description', width:300,editable:true},
{name:'type',index:'type', width:200, editable:true, edittype:'select', editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}},
{name:'geographical_region',index:'geographical_region', width:200,editable:true},
{name:'creationDate',index:'creationDate', width:100},
{name:'editDate',index:'editDate', width:100},
],
jsonReader : {
repeatitems:false
},
rowNum:10,
rowList:[10,20,30],
pager: jQuery('#gridpager'),
sortname: 'name',
viewrecords: true,
sortorder: "asc",
caption:"Wines",
editurl:"/jqGridModel?model=Wine"
}).navGrid('#gridpager');
});
</script>
HTML代碼：
<div id="jqgrid">
<table id="grid"></table>
<div id="gridpager"></div>
</div>
當創(chuàng )建網(wǎng)格，通常是幾個(gè)屬性相同的語(yǔ)句集（盡管這些屬性可以在以后單獨重寫(xiě)），見(jiàn)Options。
事件由表格激發(fā)，用于執行附加的操作，具體表述見(jiàn)Events。
表格還提供了用于獲取或設置屬性忽而或數據的屬性，見(jiàn)Methods。
網(wǎng)格的一個(gè)關(guān)鍵屬性是列模式（colModel），它定義網(wǎng)格的內容：見(jiàn)colModel。
Options（選項）
屬性
類(lèi)型
描述
缺省值
運行時(shí)
ajaxGridOptions
object
此項用于設置當表格設置獲得數據時(shí)，ajax的全局屬性，注意此項可能覆蓋所有當前的ajax設置（包括error, complete和beforeSend 事件）。
empty
可寫(xiě)
ajaxSelectOptions
object
此項用于設置在editoptions或searchoptions對象中通過(guò)dataUrl選擇元素時(shí)， ajax的全局屬性。
empty
可寫(xiě)
altclass
string
交替行的類(lèi)。 此項僅當altRows設置為true時(shí)有效。
ui-priority-secondary
可寫(xiě)
altRows
boolean
設置為交替行表格
false
可寫(xiě)
autoencode
boolean
當設置為true時(shí)，對來(lái)自服務(wù)器的數據和提交數據進(jìn)行encodes編碼。如< 將被轉換為<
false
可寫(xiě)
autowidth
boolean
當設置為true時(shí)，表格寬度將自動(dòng)匹配到父元素的寬度。這個(gè)匹配只在表格建立時(shí)進(jìn)行，為了使表格在父元素寬度變化時(shí)也隨之變化，必須運用客戶(hù)代碼來(lái)設置setGridWidth屬性
false
只讀
caption
string
表格的標題。顯示在Header上。若為空號將不會(huì )顯示。
empty
cellLayout
integer
該屬性確定單元格的padding + border 寬度。通常不修改該屬性，但若表格的CSS中改變了td元素，該屬性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5
5
只讀
cellEdit
boolean
是否允許單元格編輯。更多信息參見(jiàn)Cell Editing
false
可寫(xiě)
cellsubmit
string
確定單元格內容保存方式是remote還是clientArray 。更多信息參見(jiàn)Cell Editing
'remote'
可寫(xiě)
cellurl
string
單元格保存的url。更多信息參見(jiàn)Cell Editing
null
可寫(xiě)
colModel
array
描述列參數數組。這是表格最重要的部分，詳見(jiàn)colModel API.
空
只讀
colNames
array
列名稱(chēng)數組。該名稱(chēng)將在Header中顯示。名稱(chēng)以逗號分隔，數量應與colModel 數組數量相等
空
只讀
datastr
string
當datatype被設置為xmlstring或jsonstring時(shí)，為數據串。
null
可寫(xiě)
datatype
string
定義表格希望獲得的數據的類(lèi)型，有效值有：
Xml —xml數據；
xmlstring—xml字符串；
json—JSON數據
jsonstring—JSON字符串
local—客戶(hù)端數據（數組）
javascript—javascript數據
function—函數返回數據
參見(jiàn)colModel API 和Retrieve Data
xml
可寫(xiě)
deselectAfterSort
boolean
只適用于當datatype為local時(shí)。當一個(gè)排序被應用時(shí)取消當前選定行。
true
可寫(xiě)
direction
string
表格中的書(shū)寫(xiě)方向?！發(fā)tr”從左到右(缺省值)，“rtl”從右到左
ltr
只讀
editurl
string
定義行內編輯地址URL
null
可寫(xiě)
emptyrecords
string
當返回(或當前)數量為零時(shí)顯示的信息此項只用當viewrecords 設置為true時(shí)才有效。
可寫(xiě)
ExpandColClick
boolean
為true時(shí)，點(diǎn)擊展開(kāi)行的文字，treeGrid展開(kāi)或收攏
true
只讀
ExpandColumn
string
指定用于張開(kāi)treeGrid的列（名稱(chēng)來(lái)自colModel），未設置即用第一列。此項只有當treeGrid為true時(shí)有效.
null
只讀
footerrow
boolean
如果設置為true時(shí)，將生成一個(gè)表腳行，列數等于colModel
false
只讀
forceFit
boolean
如果設置為true，改變列寬，相鄰列也將調整以適應整體表格，將不會(huì )出現水平滾動(dòng)條。
false
只讀
gridstate
string
表格的當前狀態(tài)。有visible或hidden
visible
只讀
gridview
boolean
設置為true將提高5~10倍的顯示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件
false
可寫(xiě)
height
mixed
表格高度?？蔀閿抵?、百分比或auto
150
hiddengrid
boolean
如果設置為true，表格開(kāi)始被隱藏，數據不被裝入，只顯示標題。當第一次點(diǎn)擊顯示/隱藏按鈕顯示表格，數據從服務(wù)器裝入。
false
只讀
hidegrid
boolean
是否允許顯示/隱藏按鈕可用。只有標題不為空時(shí)可用。
true
只讀
hoverrows
boolean
表行是否有鼠標懸停效果
false
可寫(xiě)
jsonReader
array
JSON數據結構數組，詳情見(jiàn)
Retrieving Data JSON Data只讀
lastpage
integer
請求返回的總頁(yè)數
0
只讀
lastsort
integer
排序的列號（0開(kāi)始）
0
只讀
loadonce
boolean
設置為true時(shí)，表格只一次讀取服務(wù)器數據（使用適當datatype），之后，datatype 自動(dòng)變?yōu)閘ocal ，所有進(jìn)一步操作都在客戶(hù)端完成，pager功能（若存在）將失效。
false
只讀
loadtext
string
數據請求和排序時(shí)顯示的文本
Loading…
只讀
loadui
string
此項控制ajax進(jìn)程進(jìn)行時(shí)的動(dòng)作。Disable—取消jqGrid的進(jìn)程指示，可使用自定義的指示。
enable (缺省)—表格中間顯示loading。
block – 顯示“Loading”信息，禁用頁(yè)面上的所有功能，直到數據裝入完成。
enable
可寫(xiě)
mtype
string
定義提交類(lèi)型POST或GET
GET
可寫(xiě)
multikey
string
此屬性只有當multiselect為true時(shí)有效，定義多選時(shí)的組合鍵，可選值有： shiftKey ，altKey，ctrlKey
empty
可寫(xiě)
multiboxonly
boolean
此屬性只有當multiselect為true時(shí)有效，. Multiboxonly設置為true時(shí)，只有點(diǎn)擊checkbox時(shí)該行才被選中，點(diǎn)擊其他列，將清除當前行的選中。
false
可寫(xiě)
multiselect
boolean
此屬性設為true時(shí)啟用多行選擇
false
只讀
multiselectWidth
integer
若multiselect 為true時(shí)，定義多選列的寬度。
20
只讀
page
integer
設置請求初始頁(yè)的數量，此參數通過(guò)URL從服務(wù)器接受數據
1
可寫(xiě)
pager
mixed
定義記錄瀏覽導航條。必須是一個(gè)HTML元素。詳見(jiàn)
Pagerempty
只讀
pagerpos
string
定義表格瀏覽導航條的位置，缺省情況下建立一個(gè)包括3部分的導航條：頁(yè)碼，導航按鈕和記錄信息。
center
只讀
pgbuttons
boolean
定義導航激活時(shí)導航按鈕是否顯示。
true
只讀
pginput
boolean
定義導航欄是否有頁(yè)碼輸入框。
true
只讀
pgtext
string
當前頁(yè)信息。第一個(gè)量為當前頁(yè)，第二個(gè)量為總頁(yè)數。
可寫(xiě)
prmNames
array
缺省情況下prmNames: {
page:“page”,rows:“rows”,
sort: “sidx”,order: “sord”,
search:“_search”, nd:“nd”,
npage:null}
以POST方式發(fā)送到服務(wù)器，字段為： page，rows，sidx，sord，search，nd
例如要將sidx改為mysort，可寫(xiě)成：
prmNames: {sort: “mysort”}.
這樣提交到服務(wù)器的字符串就變?yōu)椋?div style="height:15px;">
page=1&rows=10&mysort=myindex&sord=asc
若將一些參數設為null，這些參數將不再發(fā)往服務(wù)器。例如prmNames: { nd:null} 則nd參數將不被發(fā)送。
Npage參數參見(jiàn)scroll option.
none
可寫(xiě)
postData
array
此數組能直接傳遞到url。這個(gè)數組可使用這種形式{name1:value1…}。
詳見(jiàn) API操作方法
empty
可寫(xiě)
reccount
integer
只讀屬性。定義表格顯示的行數。切勿與records混淆。
0
只讀
recordpos
string
定義頁(yè)中記錄信息的位置，可以是left，center，right。
right
只讀
records
integer
只讀屬性。定義從請求中獲得的記錄數
none
只讀
recordtext
string
可在頁(yè)面上顯示的提示信息，此文字只在viewrecords 為true是有效，并且當記錄總數大于0時(shí)才顯示。
此文字中{}中的內容表示：
{0} 該頁(yè)顯示的第一個(gè)記錄的記錄號
{1} 該頁(yè)顯示的最后一個(gè)記錄的記錄號
{2} 獲得的記錄總數
可寫(xiě)
resizeclass
string
列可變大小時(shí)的類(lèi)
empty
只讀
rowList
array[]
用于改變顯示行數的下拉列表框的元素數組。
empty
只讀
rownumbers
boolean
若此屬性為true，表格左側將添加一用于顯示行數（從1開(kāi)始）的列。此時(shí)colModel自動(dòng)擴展出一個(gè)名為rn的元素。所以在colModel中不要定義rn。
false
只讀
rowNum
integer
表格中可見(jiàn)的記錄數。此參數通過(guò)url傳遞給服務(wù)器供檢索數據用。注意：若此參數設置為10，而服務(wù)器返回15條記錄，將只有10條記錄被裝入。若此參數被設置為-1，則此檢查失效
20
可寫(xiě)
rownumWidth
integer
當rownumbers為true時(shí)，定義顯示行數的列的寬度。
25
只讀
savedRow
array
只讀屬性。用于行編輯和單元格編輯保存數據之前。詳見(jiàn)
Cell editing和
Inline editing.
empty
只讀
searchdata
array {}
此參數用“名稱(chēng):值”對包含搜索條件
empty
可寫(xiě)
scroll
boolean or integer
創(chuàng )建動(dòng)態(tài)滾動(dòng)表格。
當設為啟用時(shí)，pager被禁用，可使用垂直滾動(dòng)條來(lái)裝入數據。
當設置為true 時(shí)，表格總是保留從開(kāi)始到最近訪(fǎng)問(wèn)的數據。
當設為只時(shí)(如1)，表格將保持可見(jiàn)行。這使我們能在指定點(diǎn)加載數據而不必擔心內存泄露。此外，我們可使用可選的
npage (參見(jiàn) prmNames數組). 如果我們在prmNames 設置了npage，表格將申請多頁(yè)，否則，它將執行多個(gè)gets。
false
只讀
scrollOffset
integer
定義垂直滾動(dòng)條的寬度。
18
只讀
scrollrows
boolean
該項啟用時(shí)，用setSelection 選定一行，表格將滾動(dòng)到被選行可見(jiàn)。
false
可寫(xiě)
selarrrow
array-[]
只讀屬性。當multiselect 為true時(shí)，包含當前選定的行。此為一維數組，值為表格中選定行的ID。
empty
只讀
selrow
string
只讀屬性。內容是最后選定行的ID。如火應用了排序或pagging，該值為null。
null
只讀
shrinkToFit
boolean
該項描述計算每列相對于表格寬度的初始寬度的類(lèi)型。
若為true，并且設置了列寬度，則每列的寬度根據定義寬度縮放。
若為false，并且設置了列寬度，表格寬度為設置寬度，列寬度不會(huì )重新計算，使用colModel中定義的值
true
只讀
sortable
boolean
啟用此項，允許使用鼠標重新排序列。因為此項使用jQuery UI的排序組件，必須確保頁(yè)面頭部成功加載了相關(guān)組件及grid.jqueryui.js。
false
只讀
sortname
string
從服務(wù)器讀取XML或JSON數據時(shí)初始的排序名，此名被加到URL中。如果此名與colModel中的名稱(chēng)，則列此列將加入排序標志。參見(jiàn)prmNames.
empty
可寫(xiě)
sortorder
string
從服務(wù)器讀取XML或JSON數據時(shí)初始的排序類(lèi)型，此類(lèi)型被加到URL中。參見(jiàn)prnNames?？蛇x值為asc或desc。
asc
可寫(xiě)
subGrid
boolean
設置為true，可使用子表格。啟用子表格，將在基本表的左邊將添加一列，并包含一個(gè)“+”圖像，用戶(hù)可以點(diǎn)擊擴展行。參見(jiàn)
Subgridfalse
只讀
subGridModel
array-[]
該屬性用于描述子表格的模式，只有subGrid 為true時(shí)有效。它是一個(gè)用于描述子表格列的數組。詳見(jiàn)
Subgrid.
empty
只讀
subGridType
mixed
用于定義子表格裝入的數據類(lèi)型，若不定義，則使用與父表格同樣的數據類(lèi)型。
null
可寫(xiě)
subGridUrl
string
該屬性用于定義子表格獲得數據的URL。行的ID將鍵入此URL中，若要添加其他參數，可使用subGridModel 中的選項。參見(jiàn)
Subgridempty
可寫(xiě)
subGridWidth
integer
定義子表格的列寬
20
只讀
toolbar
array
該參數定義表格的工具欄。參數是一個(gè)包含兩個(gè)值的數組，第一個(gè)值使工具欄有效，第二個(gè)值相對位置（可以是top、bottom、both）。例如：設置toolbar為 [true,”both”]，將在表格的頭部和底部建立兩個(gè)工具欄，兩個(gè)工具欄位兩個(gè)DIV元素，頭部DIV元素的ID為“t_表格ID”，底部DIV元素的ID為“tb_表格ID”。若只有一個(gè)工具欄（top或bottom）時(shí)，DIV的ID為“t_表格ID”。
[false,'']
只讀
totaltime
integer
只讀參數。用于記錄裝入XML和JSON數據的時(shí)間。
0
只讀
treedatatype
mixed
定義初始數據類(lèi)型
null
只讀
treeGrid
boolean
啟用（禁用）TreeGrid。詳見(jiàn)
Tree Gridfalse
只讀
treeGridModel
string
定義TreeGrid的方法?？梢允莕ested或adjacency。參見(jiàn)
Tree Gridnested
只讀
treeIcons
array
此數組設置TreeGrid中使用的圖標。圖標應是UI theme中的有效圖標。缺省為 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
只讀
treeReader
array
擴展表格的colModel。這里定義的字段將添加到colModel的尾部并隱藏。服務(wù)器將返回這些字段的值。詳見(jiàn)
Tree Grid.
只讀
tree_root_level
numeric
確定treeGrid相對于根元素的級別。
0
只讀
url
string
文件保存請求的URL
null
可寫(xiě)
userData
array
此數組保存請求的自定義信息，可隨時(shí)使用
empty
只讀
userDataOnFooter
boolean
到為true時(shí)， userData直接放置在頁(yè)腳。
false
可寫(xiě)
viewrecords
boolean
是否在瀏覽導航欄顯示記錄總數
false
只讀
viewsortcols
array
定義表頭中排序圖標的外觀(guān)和行為。缺省為[false,'vertical',true]。
第一個(gè)參數設定是否顯示所有定義了排序的列旁顯示圖標。缺省的false表示只有當前排序列旁的圖標顯示。設為true可使所有可排序列都顯示圖標。
第二個(gè)參數設定排序圖標如何放置。vertical為垂直放置，horizontal為水平放置。
第三個(gè)參數設定點(diǎn)擊功能。True表示表頭點(diǎn)擊排序，false表示只點(diǎn)擊排序圖標排序。若將此參數設為false時(shí)，請確保第一個(gè)參數為true，否則將無(wú)法排序。
只讀
width
number
若為設置，表格的寬度為colModel 中定義的所有列寬度的總和。
若設置了該項，每列的初始寬度按照shrinkToFit 設置的值
none
只讀
xmlReader
array
描述預期的XML數據結構的數組。詳見(jiàn)
Retrieving Data XML Data.
只讀
（ColModel接口）
colModel屬性以數組的形式定義各個(gè)表格列。這是jqGrid中很重要的部分。語(yǔ)法為：
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});
下面按字母順序列出colModel可用的屬性。唯一需要的是屬性的名稱(chēng)?？捎胓etColProp和setColProp獲取或設置colModel的屬性（方法見(jiàn)methods），但name、width、resizable、label 不可改變。
屬性
類(lèi)型
描述
缺省值
align
string
定義表格單元格（非表頭）的對齊方式，可取值：left, center, right.
left
classes
string
此屬性用于定義列的類(lèi)名，當有多個(gè)類(lèi)名時(shí)，用空格間隔，例如：“class1 class2”。在表格的CSS中，有一個(gè)預定義的類(lèi)ui-ellipsis用于定義特定的行
空字符串
datefmt
string
日期格式，可用/，-和.。作為間隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期，參見(jiàn)
Array DataY-m-d
defval
string
搜索字段的缺省值，此參數只用于自定義搜索是的初始值。
empty
editable
boolean
定義字段是否可編輯，用于單元格編輯、行編輯和表單模式，參見(jiàn)
editingfalse
editoptions
array
根據edittype 參數定義可用的值數組
Empty數組
editrules
array
設置可編輯字段的補充規則
Empty數組
edittype
string
定義行編輯和表單模式的編輯類(lèi)型，可以是text、textarea、select、checkbox、 password、button、image和file。參見(jiàn)
editingtext
fixed
boolean
若設為true，即使shrinkToFit設置為true，列寬也不允許重新計算。GridWidth方法改變表格寬度時(shí)，列寬也不會(huì )改變。
false
formoptions
array
定義表單編輯的各種選項，參見(jiàn)
Form optionsempty
formatoptions
array
為特定的列定義格式，詳見(jiàn)
Formatternone
formatter
mixed
用預定義類(lèi)（字符串）或自定義函數控制字段的格式，詳見(jiàn)
Formatter。
none
hidedlg
boolean
若設置為true，該列將不出現在模式對話(huà)框中，用戶(hù)可以此控制列的顯示或隱藏，參見(jiàn)
Show/Hide Columns.
false
hidden
boolean
定義初始化時(shí)，列是否隱藏。
false
index
string
通過(guò)sidx參數設置排序時(shí)的索引名。
empty string
jsonmap
string
定義接收JSON串的JSON映射參見(jiàn)
Retrieving Datanone
key
boolean
在未從服務(wù)器獲得ID的情況下，該列可設置為行ID。只有一列可設置該屬性，若出現多列，表格只采用將第一個(gè)設置了該屬性的列，其他列忽略。
false
label
string
當colNames數組為空時(shí)，定義此列的標題。若colNames數組和此屬性都為空，標題為該列的name屬性值。
none
name
string
設置列在表格中的唯一名稱(chēng)，此屬性是必須的?；蛘呤褂帽Ａ糇謘ubgrid、cb和rn.
Required
resizable
boolean
定義是否可變列寬
true
search
boolean
當使用搜索時(shí)，是否可以該列，參見(jiàn)
Search Configurationtrue
searchoptions
array
搜索時(shí)定義搜索選項
Search Configurationempty
sortable
boolean
定義是否可以排序
true
sorttype
string
當datatype為local時(shí)，用于定義排序列類(lèi)型?？扇nt/integer（整數）、float/number/currency（小數）、date（日期）、text（文本）參見(jiàn)
Array Datatext
stype
string
決定搜索時(shí)的元素類(lèi)型。參見(jiàn)
Search Configurationtext
surl
string
用于
Custom Searching和edittype中：select和描述已定義的選擇元素的URL
empty string
width
number
設置列的初始寬度，可用pixels和百分比
150
xmlmap
string
定義獲得的XML文件的XML映射。參見(jiàn)
Retrieving Datanone
unformat
function
編輯是定義單元格的unformat函數，參見(jiàn)
Custom Formatternull
