`

jqGrid表格插件学习（一） 第一个Demo

 
阅读更多

 

jqGrid学习

最近的工作任务频繁涉及到很多的jqGrid这个插件，鉴于刚接触这个东西时不太了解，以至于在这个上面耽误了一些时间，现在将jqGrid学习总结一下：

应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。

在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs，文档是全英文的，有兴趣的可以去看看。

 

一、jqGrid的第一个Demo

学习任何一项技术，第一个例子相当的重要，如果第一个例子都不能运行成功，那接下来的学习将是相当的困难，甚至没法进行下去。所以，在此先实现第一个例子，希望对刚刚接触jqGrid的人有所帮助。  
    jqGrid获得数据的方式有多种，包括xml和JSON,Array等。第一个例子，我使用了最简单的方式，即Array方式。之后的例子会用json从服务器端获得数据。本例子没有从跟后台交互，在这个例子中我们使用到了一个addRowData的方法

 

我的例子效果如下：

也许大家一般看到的都是蓝色的吧，我的例子的颜色是灰色的，这个是css中定义的样式导致的，有兴趣的可以去jquery-ui-1.8.24.custom.css中看看 

 

前台页面代码如下：

注意：我的jqGrid使用的jqGrid3.8

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

  <head>

    <base href="<%=basePath%>">

    <title>jqGrid第一个例子</title>

    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/jquery-ui-1.8.24.custom.css" />

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

    <script src="<%=basePath%>js/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="<%=basePath%>js/grid.locale-cn.js" type="text/javascript"></script>

    <script src="<%=basePath%>js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>

    <script src="<%=basePath%>js/jquery.jqGrid.min.js" type="text/javascript"></script>

  </head>

  <script type="text/javascript">

 …

  </script>

  <body>

    <table id="gridTable"></table>

    <div id="gridPager"></div>

  </body>

</html>

 

jqGrid3.8集成了jQuery UI，所以，此处需要导入UI相关js和css。另外，grid.locale-cn.js这个国际化文件需要从jqGrid源码包提取。另外，这个文件必须在jquery.jqGrid.min.js之前导入，同时jquery-1.8.2.min.js需要在 grid.locale-cn.js之前导入，因为这个里面调用到了jquery的对象， 而JS是解释型语言，是根据标签引用分块顺序执行的， 必须先有jquery才能保证代码正确执行

 

javascript代码：

 

$(document).ready(function(){

        $("#gridTable").jqGrid({

        datatype: "local",

            height: 250,

            colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],

            colModel:[

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

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

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

                 {name:'email',index:'email', width:125,sorttype:"string"},

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

                 {name:'mobilePhone',index:'mobilePhone', width:120},               

                 {name:'birthday',index:'birthday', width:100, sorttype:"date"}               

                 ],

            sortname:'id',

            sortorder:'asc',

            viewrecords:true,

            rowNum:10,

            rowList:[10,20,30],

            pager:"#gridPager",

            caption: "第一个jqGrid例子"

        }).navGrid('#pager2',{edit:false,add:false,del:false});

       

        var mydata = [

                {id:"1",userName:"flySky",gender:"男",email:"skyfly@163.com",QQ:"8000000",mobilePhone:"13223423424",birthday:"1985-10-01"},

                {id:"2",userName:"李雪",gender:"女",email:"xue@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},

                {id:"3",userName:"王才",gender:"男",email:"cai@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},

                {id:"4",userName:"马丽",gender:"女",email:"lili@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},

                {id:"5",userName:"赵刚",gender:"男",email:"gang@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},

                {id:"6",userName:"叶公",gender:"男",email:"yegong@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},

                {id:"7",userName:"李晴",gender:"女",email:"qing@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},

                {id:"8",userName:"流星",gender:"男",email:"star@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},

                {id:"9",userName:"孙先",gender:"男",email:"xian@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}

                ];

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

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

        }

    });

 

从上面看出来，jqGrid的使用是：$("#tableId").jqGrid(optional);

其中，optional是一个对象，有很多属性，具体什么含义，怎么配置，之后的文章我会介绍，也可以在官方网站找到详细的介绍。 

同时jqGrid还有别的调用方法，这个也在以后详细探讨 

 

最后附上例子代码和jqGrid的源码包

0
顶
3
踩
分享到：
| jQuery is not defined 错误,解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqGrid插件--JQuery表格插件

    jqGrid是一款基于jQuery的开源表格插件，专为数据管理和展示设计，提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点： 1. **基本使用**：...

    Jquery表格插件jqGrid 4.3.0及其Demo

    总之，jqGrid 4.3.0作为一个功能齐全、性能优良的jQuery表格插件，是开发数据密集型Web应用的理想选择。无论是基础的表格展示还是复杂的交互功能，它都能提供完整的解决方案，大大简化开发过程。通过深入学习和实践...

    jquery表格插件jqgrid

    这款插件是jQuery库的一个扩展，专为处理大量数据和实现复杂的表格功能而设计。在本文中，我们将深入探讨jqGrid的主要特性、使用方法以及如何在项目中集成和定制。 ### 一、主要特性 1. **数据展示**：jqGrid可以...

    PHP+jqGrid表格插件实现增删改查

    要实现“PHP+jqGrid表格插件实现增删改查”，首先需要在HTML页面中引入jqGrid的CSS和JS文件，然后创建一个表格元素，定义相应的列名和ID。接着，使用jQuery初始化jqGrid，设置数据源（通常是PHP脚本返回的JSON或XML...

    jqGrid表格插件(带中文/英文文档)

    `jquery.jqGrid-4.5.4.zip` 是jqGrid的一个较新版本，包含所有必需的JavaScript文件和CSS样式表，供开发者在项目中直接引用。解压后，可以根据需要定制和整合到自己的项目中。 `JqGrid中文文档 - zzjj296 - 博客园_...

    jqGrid表格数据展示插件

    首先，jqGrid的安装与引入是使用该插件的第一步。通常，你可以通过下载jqGrid的源码或者使用CDN链接将其引入到项目中。在HTML文件中，需要引入jQuery库以及jqGrid的相关CSS和JS文件，确保页面能够正确解析和执行...

    jqGrid demo （完整版）

    此 demo 是一个学习 jqGrid 的良好起点。通过分析代码和尝试修改，你可以深入了解 jqGrid 的工作原理，并提升你在网页数据管理方面的技能。 通过这个 jqGrid 完整版 demo，开发者不仅可以学习到 jqGrid 的基本用法...

    JqGrid插件+JqGridDemo+JqGrid主题

    总的来说，JqGrid是一个强大且灵活的表格插件，能够满足各种数据展示和管理需求。通过深入学习和实践"JqGrid插件+JqGridDemo+JqGrid主题"，开发者可以提升其在前端开发中的数据处理能力，创建出更富交互性的网页应用...

    Jqgrid demo-史上最强大，没有之一

    Jqgrid demo-史上最强大，没有之一， 为了大家能够更好的学习和使用Jqgrid网格插件，我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...

    第一个jqGrid例子

    jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上展示和操作大量结构化...通过学习和实践这个"第一个jqGrid例子"，开发者可以掌握基本的表格展示、数据操作和用户交互，为进一步深入使用和定制jqGrid奠定基础。

    jqGrid表格插件

    为了更好地理解上述配置参数，下面给出一个简单的jqGrid初始化示例： ```javascript $(document).ready(function() { $("#list").jqGrid({ url: 'sample_data.json', // 数据来源 datatype: 'json', // 数据类型...

    jqgrid 表格插件 CURD操作完整例子

    主要参考www helloweba com 作者：月光光 qGrid表格应用 读取与查询数据 还有其他网上作者无私奉献心得 鄙视官方jqgrid Demo 修改了代码中的错误 增加了编辑功能 和jqueryUI 日历datepicker插件

    jqGrid 3.5源码+DEMO+DOC

    jqGrid是一款基于jQuery的...综上所述，jqGrid 3.5是一个强大且功能丰富的表格插件，适合用于构建数据密集型的Web应用。通过深入学习和实践DEMO，以及查阅DOC文档，开发者可以充分利用jqGrid的各项功能，提升用户体验。

    jqGrid表格内容查询读取代码.zip

    1. **初始化表格**：在HTML页面中，我们需要创建一个空的表格元素，然后通过JavaScript来初始化jqGrid。这通常通过调用`$("#gridId").jqGrid()`方法完成，其中`gridId`是表格的ID。 2. **配置参数**：初始化时，...

    jqueryGridDemo jqGriddemo38

    总结来说，“jqueryGridDemo jqGriddemo38”这个项目是一个全面的jqGrid实践教程，涵盖了从基础配置到高级功能的方方面面，包括本地数据和远程数据的加载、数据的处理和展示、以及用户交互的实现。通过学习这些示例...

    jqGrid实例下载（数据交互，统计，时间插件都已实现）

    在本实例中，"jqGrid实例下载（数据交互，统计，时间插件都已实现）"意味着你将获得一个已经包含了数据交互、统计功能以及时间插件的完整jqGrid示例。 1. 数据交互：jqGrid能够轻松地与服务器进行数据交换。你可以...

    jqgrid demo

    在"jqgrid demo"中，我们可以期待看到一个实际的应用实例，展示如何利用jqGrid的各种特性来构建高效的数据操作界面。 首先，jqGrid的分页功能是其核心特性之一，允许用户以页面的形式浏览大量的数据，而不是一次性...

    jqgriddemo,样式漂亮，可以直接使用

    “jqgriddemo”这个示例是学习jqGrid的绝佳资源。通过研究其代码和实际运行效果，可以快速掌握jqGrid的基本用法和高级技巧。对于初学者来说，可以从以下几个方面入手： 1. **安装和引入**：了解如何将jqGrid添加到...

Magicbox
Global site tag (gtag.js) - Google Analytics