`
liss
  • 浏览: 842567 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jqGrid表格插件

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

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

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

本例子的效果如下:
效果图
列出关键代码:

HTML代码:
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="styles/themes/ui.jqgrid.css" />
    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="scripts/jQuery/plugins/grid.locale-zh_CN.js" type="text/javascript"></script>
    <script src="scripts/jQuery/plugins/jquery.jqGrid.min.js" type="text/javascript"></script>
...
<body>
        <table id="gridTable"></table>
        <div id="gridPager"></div>
</body>

 

因为jqGrid3.6集成了jQuery UI,所以,此处需要导入UI相关js和css。另外,grid.locale-zh_CN.js这个国际化文件是自己翻译的,因为官方网站没有中文的国际化文件(官方提供了很多中语言的国际化文件,但是没有提供中文的,什么意思嘛!)。另外,这个文件必须在jquery.jqGrid.min.js之前导入,否则会出问题。

javascript代码:
$(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:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
                {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
                {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
                {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
                {id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
                {id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
                {id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
                {id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
                {id:"9",userName:"孙先",gender:"男",email:"76454533@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是一个对象,有很多属性,具体什么含义,怎么配置,之后的文章我会介绍,也可以在官方网站找到详细的介绍。 

jsp/Servlet集成jqGrid、Struts2集成jqGrid请关注本人之后的博客文章。

本文出自 “徐新华polaris” 博客,请务必保留此出处http://polaris.blog.51cto.com/1146394/259336

分享到:
评论

相关推荐

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

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

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

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它支持多种功能,如数据分页、排序、过滤、编辑和 AJAX 交互。这款插件基于 jQuery 库,使得开发者能够轻松地在网页上创建交互式、...

    MVC4网站中集成jqGrid表格插件-示例源代码.zip

    在本文中,我们将深入探讨如何在ASP.NET MVC4框架中集成jqGrid表格插件,并通过一个实际的示例源代码来展示具体实现过程。jqGrid是一个功能强大的jQuery插件,用于创建交互式、数据丰富的网格视图,适用于各种Web...

    jqGrid插件--JQuery表格插件

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

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

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

    jqGrid表格插件学习(一) 第一个Demo

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。这篇博文将带你初探jqGrid,通过创建第一个Demo来了解其基本用法。以下是对jqGrid插件的一些关键知识点的详细说明: 1. **安装与引入**...

    jqgrid表格插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、分页、搜索、编辑等,使得开发者能够轻松创建交互式的表格。本篇文章将深入探讨...

    jquery表格插件jqgrid

    **jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件,它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展,专为处理大量数据和实现复杂的表格...

    MVC4网站中集成jqGrid表格插件-示例源代码

    在本文中,我们将深入探讨如何在MVC4(Model-View-Controller)应用程序中集成jqGrid,这是一个功能强大的JavaScript表格插件,用于实现数据的动态显示和管理。jqGrid允许开发人员创建高度交互式和可定制的数据网格...

    jqGrid表格数据展示插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于网页数据的展示、编辑和管理。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得网页上的表格操作变得更加便捷和高效。在...

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

    在"jqGrid表格内容查询读取代码.zip"压缩包中,我们可以找到实现jqGrid表格内容查询读取的相关代码。 首先,让我们深入理解jqGrid的核心概念: 1. **初始化表格**:在HTML页面中,我们需要创建一个空的表格元素,...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    jqgrid+struts2实现的增删改查

    jqGrid 是一个基于 jQuery 的开源数据网格插件,它提供了一种在Web页面上展示和操作大量结构化数据的强大方式。jqGrid 支持多种功能,如分页、排序、过滤、编辑、添加、删除和查看记录,同时也提供了丰富的自定义...

    jqgrid表格

    在“jqgrid表格,单元格合并,并显示,demo版本”中,我们可以深入探讨以下几个关键知识点: 1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`...

    jqGrid实例下载(数据交互,统计,时间插件都已实现)

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web应用中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、分页、搜索、编辑等,支持JSON、XML、CSV等多种数据格式,适用于创建复杂的网格...

    jquery导出jqgrid表格

    之前网上没找到现成的jqgrid表格前台导出插件,都或多或少带后台,也不想换表格插件,所以参照extjs自己改了个前台导出插件,支持多表头和分组table带表头导出,引用方法文件有详细注释,直接能用,如有不足还请见谅...

    jqgrid jquery 表格插件

    **jqGrid jQuery 表格插件** jqGrid是一款基于jQuery的开源数据网格插件,它为Web应用程序提供了强大的数据展示和管理能力。这个插件深受开发者喜爱,因为它提供了丰富的功能和自定义选项,使得在网页上创建交互式...

    jqGrid的自适应表格

    总之,jqGrid作为一款功能强大的表格插件,通过合理的配置和定制,可以轻松实现自适应窗口大小和处理大量数据的显示问题。在实际开发中,结合jQuery和其他前端技术,你可以构建出高效、用户友好的数据管理界面。

Global site tag (gtag.js) - Google Analytics