jqGrid官方文档：快速入门与功能详解

3星 · 超过75%的资源需积分: 10 155 浏览量更新于2024-07-28 收藏 1.13MB PDF 举报

jqGrid是Tony Tomov开发的一个强大的jQuery插件，用于创建交互式表格，特别适合在Web应用程序中展示和管理大量数据。这个官方文档包含了多个版本的更新内容，从3.3到3.1，旨在帮助开发者快速理解和使用这个功能丰富的工具。 1. **版本更新**：文档详细列出了每个版本的新特性，例如3.3版可能包含性能优化、新功能或改进的API，用户可以了解最新的功能特性与改进。 2. **简介**：(jqGrid)介绍了其核心概念，包括对基础需求的说明，如是否需要付费使用。对于免费用户，它强调了jqGrid作为一个开源插件的可利用性。 3. **安装与工作原理**：这部分提供了安装步骤，解释了如何将jqGrid集成到HTML页面和后端服务器（如PHP和MySQL）环境。此外，还涵盖了数据源支持，如XML、JSON和数组数据类型。 4. **教程与实例**：从创建第一个网格开始，教程逐步指导用户设置数据源、HTML结构以及服务器端处理文件。比如，有章节讲解如何处理PHP与MySQL的数据交互，以及COOP（跨源资源共享）的例子。 5. **数据类型**：详细介绍了如何处理不同格式的数据，包括XML字符串、JSON数据和数组数据，这体现了jqGrid的灵活性和适应性。 6. **编辑与操作**：涵盖了编辑行（包括添加、编辑和删除）、inline editing（即行内编辑）等高级功能，以及相应的属性、事件和方法。 7. **导航栏与定制按钮**：关于分页器（pager）的控制，包括其属性、事件和自定义按钮的创建，这对于实现复杂的数据浏览和筛选至关重要。 8. **表单编辑**：介绍了表单编辑模式，包括其属性、搜索功能（单字段或多字段搜索）以及具体的方法，例如行级编辑示例。 jqGrid官方文档为开发者提供了一个全面的指南，从入门到进阶，涵盖了从基础配置到高级功能的方方面面，使得在实际项目中高效地使用jqGrid进行数据展示和管理变得轻松可行。无论是初学者还是经验丰富的开发人员，都能从中找到所需的信息来提升自己的Web应用开发技能。

Introduction

jqGrid

- 13 -

o packall

 themes

o basic (a folder containing several files related to this theme)

o coffee (another folder with theme files)

o green (jqGrid comes with the four themes shown here)

o sand (you can easily add your own)

o jqModal.css

where:

 jquery.js is the jQuery library,

 jquery.jqGrid.js is the main module for including different plugins depending on your needs.

 grid.base.js is the main plugin. Without this plugin, all other plugins are unusable.

 grid.celledit.js a plugin used if you want to have cell editing

 grid.common.js a required module containing code common to many areas of jqGrid

 grid.custom.js a plugin used if you want to use advanced grid methods

 grid.formedit.js a plugin used for form editing, including adding and deleting data.

 grid.inlinedit.js a plugin used if you want to have inline editing

 grid.locale-en.js a plugin used if you want to dynamically change the language.

 grid.postext.js a plugin (available separately) used to manipulate the post data array

 grid.setcolumns.js a plugin used if you want to allow users to choose which columns to show or

hide

 grid.subgrid.js a plugin used if you want to use subgrids

 grid.tbltogrid.js a plugin used if you want to convert html tables to a jqGrid

 grid.treegrid.js a plugin used if you want to use a tree grid

 jqModal.js a plugin used for form editing (modal dialogs)

 jqDnR.js a plugin used for form editing (drag and resize)

 min the directory/folder containing the minified versions of the javascript files, suitable for

production

 packed the directory/folder containing all the modules in packed variant (named the same as

those in js), suitable for production use.

 packall the directory/folder containing a single file, grid.pack.js, which contains the entire suite of

jqGrid files without any language file, suitable for production use.

 themes the directory/folder containing the different styles for the grid.

If you want to use all of the features of jqGrid you do not need to do anything more.

If you want to use only some of the features or only the basic functions of jqGrid, you may want to edit

the jquery.jqGrid.js file and remove the files you will not be using. This file must also be edited if you

place the javascript files in other locations than those specified above. This file is simple and can be

easily configured.

// we make it simple as possible

function jqGridInclude()

{

var pathtojsfiles = "js/"; // need to be ajusted

// if you do not want some module to be included

// set include to false.

// by default all modules are included.

var minver = false;

var modules = [

{ include: true, incfile:'grid.locale-en.js',minfile: 'min/grid.locale-en-min.js'}, // jqGrid

translation

{ include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base

{ include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for

editing

Introduction

jqGrid

- 14 -

{ include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form

editing

{ include: true, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline

editing

{ include: true, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell

editing

{ include: true, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid

{ include: true, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid

{ include: true, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom

{ include: true, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext

{ include: true, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to

grid function

{ include: true, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'} //jqGrid

hide/show columns function

];

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

{

if(modules[i].include === true) {

if (minver !== true) IncludeJavaScript(pathtojsfiles+modules[i].incfile,CallMe);

else IncludeJavaScript(pathtojsfiles+modules[i].minfile,CallMe);

}

function IncludeJavaScript(jsFile,oCallback)

{

var oHead = document.getElementsByTagName('head')[0];

var oScript = document.createElement('script');

oScript.type = 'text/javascript';

oScript.src = jsFile;

oHead.appendChild(oScript);

}

jqGridInclude();

If you have a different path to javascript files you must change the value of the variable pathtojsfiles

appropriately. This path is relative to your application (or the server application), not to jquery.jqGrid.js;

so if your path to jquery.jqGrid.js is "..scripts\", this will need to be "..\scripts\js\".

If you want to exclude some modules you simply change the value of the associated include from true

to false, in the modules array.

If you plan to use the form editing module you should include jqModal.js, jqDnR.js and jqModal.css files

in your html page.

Using Packed Versions

If we want to use the packed variant we need only to change the variable pathtojsfiles to point to this

folder. If the original pathtojsfiles is "js/", then for the packed version we change pathtojsfiles

to"js/packed/".

To use grid.pack.js in packall, we need first to load the appropriate language file and after that this file.

Or more simply, we can set the include property in the loader to false and add new two lines for the

language and the packed version.

How it Works

Understanding this will help you to work better with jqGrid and use the full capabilities of the plugin.

Tutorial: Creating Your First Grid

jqGrid

- 17 -

Tutorial: Creating Your First Grid

For this tutorial, and as an example to refer to throughout this documentation, we’ll create a grid with

Invoice information.

First of all we need to decide what data we want to represent at the client. Let’s have the following:

 Invid – the invoice number,

 invdate – the date of the invoice,

 amount,

 tax,

 total (including tax), and

 note – additional information about the invoice.

The Data

We'll need a table with the following format. This example is based on MySQL; please create yours

however you would normally do it.

CREATE TABLE invheader (

invid int(11) NOT NULL auto_increment,

invdate date NOT NULL,

client_id int(11) NOT NULL,

amount decimal(10,2) NOT NULL default '0.00',

tax decimal(10,2) NOT NULL default '0.00',

total decimal(10,2) NOT NULL default '0.00',

note char(100) default NULL,

PRIMARY KEY (id)

);

Then, put some values into it.

The HTML

The html file looks like this:

<html>

<head>

<title>jqGrid Demo</title>

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

url:'example.php',

datatype: 'xml',

mtype: 'GET',

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

colModel :[

{name:'invid', index:'invid', width:55},

{name:'invdate', index:'invdate', width:90},

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

剩余98页未读，继续阅读

zjq2008111140

粉丝: 0
资源: 13

jqGrid官方文档：快速入门与功能详解

jqGrid5.X 官方全Demo下载

jqgrid中文文档API

JqGrid中文API文档

jqgrid 3.6中文文档

jqgrid chm帮助文档

jqgrid帮组文档

jqGrid3.6中文文档

jqgrid 3.6.2 中文文档

jqGrid 中文 英文 文档

jqgrid的说明文档

最新资源

jqGrid 中文英文文档