JqGrid中文文档

最近使用JQGrid 发现其中文资料非常的少。几乎没有，而英文资料大部份是PHP。所以写一些资料方便自己和大家以后的使用。

先来看一个我在官方网站复制的简单的例子。

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

2:

   3:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   4:  <html xmlns="http://www.w3.org/1999/xhtml">

   5:  <head id="Head1" runat="server">

   6:      <title>无标题页</title>

   7:      <link href="JS/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

   8:      <link href="JS/ui.jqgrid.css" rel="stylesheet" type="text/css" />

9:

  10:      <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>

11:

  12:      <script src="JS/grid.locale-cn.js" type="text/javascript"></script>

13:

  14:      <script src="JS/jquery.jqGrid.min.js" type="text/javascript"></script>

15:

  16:      <script type="text/javascript">

  17:      $(document).ready(function(){

18:

  19:          jQuery("#setcols").jqGrid({

  20:                 url:'Default2.aspx',

  21:              datatype: "json",

  22:                 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

  23:                 colModel:[

  24:                     {name:'id',index:'id', width:55,hidedlg:true},

  25:                     {name:'invdate',index:'invdate', width:90,editable:true},

  26:                     {name:'name',index:'name asc, invdate', width:100},

  27:                     {name:'amount',index:'amount', width:80, align:"right",editable:true,editrules:{number:true}},

28:

  29:                     {name:'tax',index:'tax', width:80, align:"right",editable:true,editrules:{number:true}},

  30:                     {name:'total',index:'total', width:80,align:"right"},

  31:                     {name:'note',index:'note', width:150, sortable:false}

  32:                 ],

  33:                 rowNum:10,

  34:                 pager: '#psetcols',

  35:                 sortname: 'id',

  36:              sortorder: "desc"

  37:          });

38:

  39:      })

40:

41:

  42:      </script>

43:

  44:  </head>

  45:  <body>

  46:      <table id="setcols">

  47:      </table>

  48:      <div id="psetcols">

  49:      </div>

  50:  </body>

  51:  </html>

我们需要引用的文件分别为

1	JQUERYUI 的CSS样式文件	jquery-ui-1.7.2.custom.css
2	JqGrid插件的样式文件	ui.jqgrid.css
3	JQUERY 1.3.2的JS文件	jquery-1.3.2.min.js
4	JqGrid插件的中文配置文件	grid.locale-cn.js
5	最后是JqGrid本身的JS压缩文件	jquery.jqGrid.min.js

Default2.aspx的功能是返回JSON数据

数据如下

{
    "page": "1",
    "total": 2,
    "records": "13",
    "rows": [
        {
            "id": "13",
            "cell": [
                "13",
                "2007-10-06",
                "Client 3",
                "1000.00",
                "0.00",
                "1000.00",
                null
            ]
        },
        {
            "id": "12",
            "cell": [
                "12",
                "2007-10-06",
                "Client 2",
                "700.00",
                "140.00",
                "840.00",
                null
            ]
        },
        {
            "id": "11",
            "cell": [
                "11",
                "2007-10-06",
                "Client 1",
                "600.00",
                "120.00",
                "720.00",
                null
            ]
        },
        {
            "id": "10",
            "cell": [
                "10",
                "2007-10-06",
                "Client 2",
                "100.00",
                "20.00",
                "120.00",
                null
            ]
        },
        {
            "id": "9",
            "cell": [
                "9",
                "2007-10-06",
                "Client 1",
                "200.00",
                "40.00",
                "240.00",
                null
            ]
        },
        {
            "id": "8",
            "cell": [
                "8",
                "2007-10-06",
                "Client 3",
                "200.00",
                "0.00",
                "200.00",
                null
            ]
        },
        {
            "id": "7",
            "cell": [
                "7",
                "2007-10-05",
                "Client 2",
                "120.00",
                "12.00",
                "134.00",
                null
            ]
        },
        {
            "id": "6",
            "cell": [
                "6",
                "2007-10-05",
                "Client 1",
                "50.00",
                "10.00",
                "60.00",
                null
            ]
        },
        {
            "id": "5",
            "cell": [
                "5",
                "2007-10-05",
                "Client 3",
                "100.00",
                "0.00",
                "100.00",
                "no tax"
            ]
        },
        {
            "id": "4",
            "cell": [
                "4",
                "2007-10-04",
                "Client 3",
                "150.00",
                "0.00",
                "150.00",
                "no tax"
            ]
        }
    ],
    "userdata": {
        "amount": 3220,
        "tax": 342,
        "total": 3564,
        "name": "Totals:"
    }
}

代码中table ID 为setcols的是用于显示数据、

代码中div ID 为psetcols的是用于显示数据下方的按钮，分页，搜索等按钮

JavaScript代码中jqGrid()方法是用于初始化JqGrid的方法

方法大概参数如下

属性名	类型	默认值	是否必需	备注
url	字符串	""	是	获取数据的地址
height	数字	150		当值为100%时会随数据的数量而自动调整高度
page	数字	1		当前页数
rowNum	数字	20		每页行数
records	数字	0
pager	字符串或对象		否	工具条所显示的容器
pgbuttons	布尔值	true	否	是否显示上一页下一页的按钮
pginput	布尔值	true	否	是否显示录入跳转页数的文本框
colModel	数组	[]	是	定义数据列
rowList	数组	[]	否	每页行数下拉选项未设置为不显示该下拉选项
colNames	数组	[]	是	显示的列名，需要和colModel的列数匹配
sortorder	字符串	"asc"	否	排序字段的排序类型为asc和desc
sortname	字符串	""		要排序列名
datatype	字符串	"xml"	否	数据传递的类型一般有xml和json
mtype	字符串	"GET"	否	请求的类型一般有GET和POST
altRows	布尔值	false	否	设置表格是否显示斑马条纹
selarrrow	数组	[]	否
savedRow	数组	[]	否
shrinkToFit	布尔值	true	否
xmlReader	对象	{}	否
jsonReader	对象	{}	否
subGrid	布尔值	false	否
subGridModel	数组	[]
reccount	数字	0
lastpage	数字	0
lastsort	数字	0
selrow	方法	null
beforeSelectRow	方法	null
onSelectRow	方法	null		当选择一行时引发的事件
onSortCol	方法	null
ondblClickRow	方法	null		当双击一行时引发的事件
onRightClickRow	方法	null
onPaging	方法	null
onSelectAll	方法	null
loadComplete	方法	null
gridComplete	方法	null
loadError	方法	null
loadBeforeSend	方法	null
afterInsertRow	方法	null
beforeRequest	方法	null
onHeaderClick	方法	null
viewrecords	布尔值	false
loadonce	布尔值	false
multiselect	布尔值	false
multikey	布尔值	false
editurl	字符串	null		添加编辑删除操作时数据提交的页面
search	布尔值	false	否	是否显示搜索按钮
caption	字符串	""	否	表格上方的标题，不写为不显示
hidegrid	布尔值	true
hiddengrid	布尔值	false
postData	对象	{}
userData	对象	{}
treeGrid	布尔值	false	否	是否为树型GRID
treeGridModel	字符串	'nested'	否	树型GRID的数据源格式一般分为nested和adjacency
treeReader	对象	{}
treeANode	数字	-1
ExpandColumn	字符串	null	否	为树型GRID时按钮所在的列 (在定义treeGrid情况下，指明那一列用来伸展树)
tree_root_level	数字	0	否
prmNames	对象	{page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search", nd:"nd"}	否	数据请求时的request的参数设定
forceFit	布尔值	false
gridstate	字符串	"visible"
cellEdit	布尔值	false		设置表格单元是否可以编辑
cellsubmit	字符串	"remote"
nv		0
loadui	字符串	"enable"
toolbar	数组	[false,""]
scroll	布尔值	false
multiboxonly	布尔值	false
deselectAfterSort	布尔值	true
scrollrows	布尔值	false
autowidth	布尔值	false	否	是否自动宽度
scrollOffset	数字	18
cellLayout	数字	5
subGridWidth	数字	20
multiselectWidth	数字	20
gridview	布尔值	false		在工具条上是否显示总条数等信息
rownumWidth	数字	25
rownumbers	布尔值	false
pagerpos	字符串	'center'
recordpos	字符串	'right'
footerrow	布尔值	false
userDataOnFooter	布尔值	false
hoverrows	布尔值	true
altclass	字符串	'ui-priority-secondary'
viewsortcols	数组	[false,'vertical',true]
resizeclass	字符串	''
autoencode	布尔值	false
remapColumns	数组	[]
ajaxGridOptions	对象	{}
direction	字符串	"ltr"

先写到这里。未完。

posted @ 2009-11-29 22:18 jgjg2323 阅读(15728) 评论(2) 编辑收藏举报

刷新页面返回顶部

jgjgjg23

JqGrid中文文档

公告