1. 總論

jqGrid是一個(gè)非常好用，免費(fèi)的Grid組件，主要的文檔是這里，第一個(gè)鏈接是Demo，第二個(gè)是Wiki的文檔

http://www./blog/jqgrid/jqgrid.html

http://www./jqgridwiki/doku.php

2. 基本功能

jqGrid主要的功能都在js文件中，在網(wǎng)頁中很簡(jiǎn)單就是一個(gè)Table，一個(gè)Div

<table id="maingrid" cellpadding="0" cellspacing="0"></table>
<div id="maingridp" style="text-align:center;"></div>

比較典型的一個(gè)例子

jQuery().ready(function (){

var parameterValue= $("#parameterValue" ).val();

jQuery("#maingrid" ).jqGrid({

url:'controlleraction?parameter='+parameterValue,
datatype: 'json',
mtype: 'GET',
height: 255,
width: 650,

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{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}
],
rowNum:10,
autowidth: true,
rowList:[10,20,30],
pager: jQuery('#pager1'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"XML Example"
}).navGrid('#maingrid',{edit:false,add:false,del:false});

}

注意要在網(wǎng)頁中包括i18n目錄下的語言文件，以及下載Jquery UI的css和圖形文件。

jqGrid比較常用的幾個(gè)如下

A. url

給定一個(gè)url，用來取得數(shù)據(jù)。url的參數(shù)可以在前面的語句中準(zhǔn)備好，這樣就可以用Ajax到后端取得數(shù)據(jù)了。

B. datatype

從url返回的數(shù)據(jù)類型，這里是Json，在C#中返回Json可以用Controller中的Json方法。

C. height/width

Grid的大小信息

D. ColNames

就是每個(gè)Column的Title Text

E. ColModel就是每個(gè)Column的屬性，這個(gè)很重要

（1） name: 就是json數(shù)據(jù)中對(duì)應(yīng)的變量名

（2）index: 也是json數(shù)據(jù)中的變量名，用來排序的。大多數(shù)時(shí)候都等于name

（3） width： 列寬度

（4）align: 對(duì)齊

（5）sortable: 是否可以用此排序

（6）editable: 是否可以用此編輯

（7）edittype: 如何進(jìn)行編輯?？梢允莟extbox, select, checkbox

（8）editoption: 編輯的選項(xiàng)

編輯的幾個(gè)例子

editable: true, edittype: "select", editoptions: { dataUrl: appDomain +'/Fund/GetAllFundCode/'}

editable: true, edittype: "checkbox", editoptions: { value: "True:False" }

editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "30"}

editrules: { number: true }

（9） search 是否可以進(jìn)行search,缺省值是true

（10） searchoptions 就是等于，大于這些選項(xiàng)

Search例子：

search:false

search:true, searchoptions: { sopt: ['bw', 'bn', 'ew', 'en', 'cn', 'nc', 'eq', 'ne']}

search:true,searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']}

（11）formatter 格式化輸出，有幾個(gè)選項(xiàng)，也可以跟函數(shù)名

（12） formatoptions : 格式的選項(xiàng)

例子：

formatter: 'currency', formatoptions: { decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ " },

formatter: myFormatter

//如果是函數(shù)名，函數(shù)的定義是這樣的，返回值就是顯示的東西

function myFormatter(cellvalue, options, rowObject) {
return cellvalue+‘%’；}

F. rowNum

每頁顯示的Record數(shù)量

G. rowList

在底下有個(gè)Select，可以讓用戶設(shè)定每頁Record數(shù)量

H。autowidth

寬度設(shè)定

I.sortname/ sortorder

缺省的排序列和排序方式

J. caption

Grid的title名字

K. pager

在哪里顯示pager

L. navGrid

設(shè)置nav的參數(shù)

例子：

navGrid('#detailGridp', { edit: true, add: true, del: true, search: false },
// Edit Options， //Add Options, //Delete Options)

3. 其他

jqGrid 可以和Fiddler同時(shí)使用，用后者觀察返回值，便于編寫后臺(tái)的C#代碼。

A.  把子表的某個(gè)列和加起來

function updateSum(gridName, colIndex, controlName) {

var cellCount = $(gridName)[0].cells.length;
var rowCount = $(gridName)[0].rows.length;
var colNum = cellCount/rowCount;
var total = 0;
for (var i = 0; i < rowCount; i++) {
total += parseFloat($(gridName)[0].cells[i * colNum + colIndex].innerHTML);
}
$(controlName).val(total);
}

B. 在Edit Panel 顯示datepicker

editoptions: {
dataInit: function(element)
{ $(element).datepicker({ dateFormat: 'mm/dd/yy' }) }
}

C. 添加自定義按鈕

.navGrid('#detailGridp', { edit: false, add: false, del: false, search: false },
{},
{},
{}
).navButtonAdd('#detailGridp', {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function() {
addPlan();
},
position: "last"
})
.navButtonAdd('#detailGridp', {
caption: "",
buttonicon: "ui-icon-pencil",
onClickButton: function() {
editPlan();
},
position: "last"
})
.navButtonAdd('#detailGridp', {
caption: "",
buttonicon: "ui-icon-trash",
onClickButton: function() {
deletePlan();
},
position: "last"
});

注意一點(diǎn)是ICON的名字,分別是plus, pencil和trash，不是add, delete等。

比較高級(jí)一點(diǎn)的做法是給個(gè)Id，然后在LoadComplete的時(shí)候，對(duì)這個(gè)Id，改innerHtml屬性，這樣就靈活多了。

ICON是Jquery UI的標(biāo)準(zhǔn)名字，可以在這個(gè)鏈接中查看

http://jquery-ui./svn/tags/1.6rc5/tests/static/icons.html

D. 改變編輯窗口和中間控件的大小

在官網(wǎng)上給的例子不對(duì)，這個(gè)要在Add Option那個(gè)括號(hào)里邊改。

在navGrid語句中，最后有三個(gè)大括號(hào)，里邊分別是Add/Update/Delete的Url什么的。Form的Size也在這里設(shè)置，改一個(gè)就都同時(shí)變化。

大體是這樣的,注意黑字部分

{savekey: [true, 13],
reloadAfterSubmit: true,
jqModal: false,
closeOnEscape: true,
closeAfterEdit: true,
width: 550,
height: 350,
addCaption: "Add My Field",
editCaption: "Edit My Field",
url:  "/Field/AddMyField",

.....}

里邊的控件如果是TextBox，我發(fā)現(xiàn)很難改，也許在花一點(diǎn)時(shí)間就能找到更好的做法。現(xiàn)在的辦法是變成TestArea，然后做成一行，設(shè)定列的數(shù)量就可以調(diào)整大小了。

editable: true, edittype: "textarea",  editoptions: { rows: "1", cols: "75"}

 E. 改變Url，并刷新