jqGrid点滴

cynial 2011-01-06

展开全文

1. 总论

jqGrid是一个非常好用，免费的Grid组件，主要的文档是这里，第一个链接是Demo，第二个是Wiki的文档

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

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

2. 基本功能

jqGrid主要的功能都在js文件中，在网页中很简单就是一个Table，一个Div

比较典型的一个例子

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

}

注意要在网页中包括i18n目录下的语言文件，以及下载Jquery UI的css和图形文件。

jqGrid比较常用的几个如下

A. url

给定一个url，用来取得数据。url的参数可以在前面的语句中准备好，这样就可以用Ajax到后端取得数据了。

B. datatype

从url返回的数据类型，这里是Json，在C#中返回Json可以用Controller中的Json方法。

C. height/width

Grid的大小信息

D. ColNames

就是每个Column的Title Text

E. ColModel就是每个Column的属性，这个很重要

（1） name: 就是json数据中对应的变量名

（2）index: 也是json数据中的变量名，用来排序的。大多数时候都等于name

（3） width：列宽度

（4）align: 对齐

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

（6）editable: 是否可以用此编辑

（7）edittype: 如何进行编辑。可以是textbox, select, checkbox

（8）editoption: 编辑的选项

编辑的几个例子

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 是否可以进行search,缺省值是true

（10） searchoptions 就是等于，大于这些选项

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 格式化输出，有几个选项，也可以跟函数名

（12） formatoptions : 格式的选项

例子：

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

formatter: myFormatter

//如果是函数名，函数的定义是这样的，返回值就是显示的东西

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

F. rowNum

每页显示的Record数量

G. rowList

在底下有个Select，可以让用户设定每页Record数量

H。autowidth

宽度设定

I.sortname/ sortorder

缺省的排序列和排序方式

J. caption

Grid的title名字

K. pager

在哪里显示pager

L. navGrid

设置nav的参数

例子：

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

3. 其他

jqGrid 可以和Fiddler同时使用，用后者观察返回值，便于编写后台的C#代码。

A. 把子表的某个列和加起来

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"
});

注意一点是ICON的名字,分别是plus, pencil和trash，不是add, delete等。

比较高级一点的做法是给个Id，然后在LoadComplete的时候，对这个Id，改innerHtml属性，这样就灵活多了。

ICON是Jquery UI的标准名字，可以在这个链接中查看

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

D. 改变编辑窗口和中间控件的大小

在官网上给的例子不对，这个要在Add Option那个括号里边改。

在navGrid语句中，最后有三个大括号，里边分别是Add/Update/Delete的Url什么的。Form的Size也在这里设置，改一个就都同时变化。

大体是这样的,注意黑字部分

{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，我发现很难改，也许在花一点时间就能找到更好的做法。现在的办法是变成TestArea，然后做成一行，设定列的数量就可以调整大小了。

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

E. 改变Url，并刷新

jQuery("#grid" )
.setGridParam({
url: newUrl
})

.trigger("reloadGrid " );