jqGrid 安装及使用教程

最新推荐文章于 2024-04-24 09:22:16 发布

丨心静如水丨

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量3.3k

点赞数

分类专栏： JQuery 文章标签： jquery ui javascript jqgrid

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、jqGrid 官方安装文档

JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

首先是安装，只有安装对了，才能进行使用，当然官方的安装方法是最权威的

下面主要总结下自己在官方文档的学习思路（后面附有第一个 jqGrid Demo实例）

官网： http://www.trirand.com

官方安装文档： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

google搜索关键字：install jqGrid

注意：1、如果想支持IE6最好用 jqGrid 4.4.4以下版本+jQuery ui 2.0以下版本

2、如果想支持多表头 jquery.jqGrid-4.3版本及以上

开发中用到的组合为： jquery.jqGrid-4.4.3+jquery-ui-1.7.2.custom（这两个版本对应）

有兴趣可看：

有官网找到官方安装文档：

1、进入主页后，点击Documentation，看到的信息如下

Online Documentation (this is always the most up-to-date)

The official documentation can be read in jqGrid Wiki site

在线文档(这始终是最新的)官方文档可以读入 jqGrid Wiki站点

2、点击 jqGrid Wiki site -->Documentation-->Installing jqGrid-->How to Install

二、jqGrid下载及安装

1、下载需要的jqGrid包

地址： http://www.trirand.com/blog/?page_id=6

2、下载 JQuery UI theme，需要与jqGrid配合使用

地址： http://jqueryui.com/download

3、基本安装：（官方文档）

步骤1：解压jqGrid和UI主题zip文件到一个临时文件夹中。

步骤2：创建一个目录在您的web服务器来保存jqGrid文件和文件夹。例如http://myserver/myproject/

步骤3：根据myproject的文件夹,创建两个额外的目录名为js和css。

步骤4：复制文件jqGrid包css目录下的ui jqgrid.css文件到上面创建的css目录。

重要:不要不小心复制文件ui jqgrid.css从src / css目录的包,这个是开发包，不需要这个

步骤5：复制jqGrid包下整个目录js到上面创建的js目录。

步骤6：复制UI主题包下整个目录css到上面创建的css目录。

这六个步骤之后,您应该有以下文件和文件夹结构:

/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.4.2.min.js

jquery.jqGrid.min.js

使用您喜欢的编辑器,创建一个文件myfirstgrid.html写入下面的代码

<!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" />

<style>

html, body {

margin: 0;

padding: 0;

font-size: 75%;

}

</style>

<script src="js/jquery-1.4.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>

</head>

<body>

</body>

</html>

注意：js/i18n/grid.locale-en.js一定要在js/jquery.jqGrid.min.js的前面引入

（这里是基本使用的安装，普通开发应用足够，如果开发需要改里面的js，可以参见Development Installation）

三、下面给出一个我自己的Demo，是在官方jqGrid Demo中参考来的

官方Demo地址： http://www.trirand.com/blog/jqgrid/jqgrid.html

<!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.10.1.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui. jqgrid.css" />

<style>

html, body {

margin: 0;

padding: 0;

font-size: 75%;

}

</style>

<script src="js/jquery-1.9.0.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">

$(document).ready(

function() {

jQuery("#list4"). jqGrid({

datatype: "local",

height: 250,

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

colModel:[

{name:'id',index:'id', width:60, sorttype:"int"},

{name:'invdate',index:'invdate', width:90, sorttype:"date"},

{name:'name',index:'name', width:100},

{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},

{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},

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

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

],

multiselect: true,

caption: "Manipulating Array Data"

});

var mydata = [

{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}

];

for(var i=0;i<=mydata.length;i++)

jQuery("#list4"). jqGrid('addRowData',i+1,mydata[i]);

});

</script>

</head>

<body>

<table id="list4"></table>

</body>

</html>

丨心静如水丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqGrid 安装及使用教程

一、jqGrid 官方安装文档 JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。首先是安装，只有安装对了，才能进行使用，当然官方的安装方法是最权威的下面主要总结下自己在官方文档的学习思路（后面附有第一个jqGrid Demo实例）官网：http://www.trirand.com 官方安装文档：http://www.trirand
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。