jqGrid 安装及使用教程

最新推荐文章于 2024-09-19 16:28:34 发布
最新推荐文章于 2024-09-19 16:28:34 发布
阅读量3.6k 收藏
点赞数
分类专栏： JQuery 文章标签： jquery ui javascript jqgrid
一、jqGrid 官方安装文档
  JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。
  首先是安装，只有安装对了，才能进行使用，当然官方的安装方法是最权威的 
  下面主要总结下自己在官方文档的学习思路（后面附有第一个 jqGrid Demo实例）
 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包
 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中参考来的
 
 
<!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>

丨心静如水丨
关注
专栏目录
jqGrid教程
07-24
详细讲解jqGrid的一套教程，希望可以帮助到有需要的人
jqGrid中文教程
12-06
jqGrid中文教程 内附php整合例子
jQuery学习之：jqGrid表格插件——第一个Demo
weixin_34121282的博客
01-06 237
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。 在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文...
jqGrid学习笔记（一）
huozhicheng的专栏
11-11 1472
jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。 一、jqGrid特性： 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。兼容目前所有流行的web浏览器。Ajax分页，可以控制每页显示的记录数。
全面探索jQuery Grid：高效数据网格组件
最新发布
weixin_35949153的博客
09-19 1647
本文还有配套的精品资源，点击获取 简介：jQuery Grid是类似于Ext JS的广泛使用的JavaScript数据网格组件，提供了数据绑定、分页、自定义列、模板编辑、响应式设计、扩展插件等特性。开发者可以通过学习和实践使用jQuery Grid来提升Web应用的数据操作能力和用户体验。该组件的详细文档和使用示例可帮助快速掌握其使用，而其与其他库的集成能力，如dhtmlx...
Jqgrid教程（简单上手）
FromNowOnUntilTheEnd
04-03 4008
这里不用我多说Jqgrid怎么好，通过下图给大家演示一下：下面说一说如何轻松使用它：1.首先需要下载jqgrid的相关包：http://www.trirand.com/blog/?page_id=6（根据需要自行下载）2.然后需要下载jqgrid皮肤文件：可以用jquery-ui，jqgrid本身支持jquery-ui，下载地址：http://jqueryui.com/themeroller/（选...
jqGrid 安装教程
07-01
Web软件牵涉相当多技术,但无论甚么样的软件窗体是不可少的,jqgrid 提供非常强大的UI接口技术可轻易的展示/维护数据库内的数据....本教程提供step-by-step安装测试,可以让入门或只想评估的使用者省去可观的时间
jqGrid使用详解与教程
"jqgrid使用手册" jqGrid是一个基于jQuery的表格插件，它提供了丰富的功能，用于创建数据密集型Web应用程序中的交互式表格。这款插件允许用户进行数据的加载、排序、筛选、编辑和操作，是开发人员构建动态数据展示...
jqgrid ace 使用手册 技巧
03-06
1. **安装与引入**：首先，你需要将jqGrid的JavaScript和CSS文件引入到你的HTML页面中。这通常涉及下载jqGrid库，然后通过`<script>`和`<link>`标签添加到你的文档头部。如果你使用的是Ace版本，还需要引入Ace编辑器...
jqGrid手册教程一本通
09-02
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之：jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid 学习 翻页（2） 28 jqGrid 学习 翻页 33 jqGrid 学习 配置 json 35 jqGrid 学习 方法 37 jqGrid 学习 事件 45 jqGrid 学习 数据 48 jqGrid 学习 ColModel API 55 jqGrid 学习 参数（2） 57 jqGrid 学习 jqGrid 参数 63 jqGrid 学习 第一个实例 63 使用 jqGrid 修改数据并检查 69">jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid [更多]
JQGrid系列教程
09-26
http://jhlong12345.blog.163.com/blog/static/123063129201481924711422/ 对应系列博客
JqGrid
08-02
NULL 博文链接：https://jsq284923424.iteye.com/blog/1974270
jqGrid5.3.1(grid，treegrid) 2018官方最新版本
08-24
jqGrid5.3.1(grid，treegrid) 2018官方最新版本 功能非常强大，请灵活运用
jqGrid官方I文档
07-24
jqGrid官方文档
jqGrid安装
pc_daxia的专栏
12-06 437
jqGrid是一款jQuery插件，用来展示前端页面，主要通过ajax与后台进行异步通信。 官方网址为：http://www.trirand.com/ 中文api：http://blog.mn886.net/jqGrid/ 一 下载插件 下载jqGrid的软件包：http://www.trirand.com/blog/?page_id=6  下载jqGrid皮肤：http://jquer
jqGrid系列：安装使用jqGrid
weixin_30306905的博客
07-21 189
jqGrid的安装分为基本安装和进阶安装。 基本安装：如果只是为了使用jqGrid，基本安装足够。如果还想要访问jqGrid源码调试，改善，在完成基本安装后，还需要进一步的设置才可以，这就是所谓的进阶安装。 基本安装： step 1：为web项目创建两个文件夹。分别用于存放项目的样式文件和项目使用的脚本文件。在这里假设是css 和 js，css文件夹用于存放样式文件，js文件夹用于存放脚本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值