jQuery 表格插件jqGird学习 - 介绍篇

本文介绍了一个支持Ajax的jQuery插件jqGrid,它提供了一系列强大的功能,如搜索、分页、添加、编辑和删除表格数据等。jqGrid可以与多种服务器端技术无缝集成,包括PHP、ASP、JavaServlets等,并且支持JSON、XML等多种数据源格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目开放中。项目不需要再额外添加JavaScript框架之类,要求可以找基于jQuery的插件进行开发,或者自己新开发。从网上上了一下。jqGird比较不错。故将自己的学习开发过程记录下来。不是单纯为了分享,只是做一个自己的学习记录,会同不到自己的163博客上去。
介绍:
wiki: http://www.trirand.com/jqgridwiki/doku.php
英文介绍:
引用
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

谷歌翻译:
引用
jqGrid是一个支持Ajax的JavaScript控制,可为代表的网络和操作表格数据解决方案。由于网格是一个客户端解决方案通过Ajax回调动态加载数据,它可以集成任何服务器端技术,包括PHP,ASP的,Java Servlet的,的JSP,ColdFusion和Perl的。


1、jqGrid提供搜索、分页功能,添加、编辑、删除和搜索表中记录等,是一款优秀的Grid的;目前版本4.0。
2、jqGrid是基于jQuery,作为jQuery的插件存在的,所以,使用前必须先导入jQuery包,同时,它支持Query的UI。
3、支持数组、json、xml、本地等格式作为数据源,一般情况下均使用json或xml和后台交互,本文以json为例,使用java环境(PHP可以参考官方演示的案例 http://trirand.com/jqgrid/jqgrid.html)。

### JqGrid 工具栏配置与使用 JqGrid 是一种功能强大的 jQuery 插件,用于显示和操作表格数据。其工具栏可以分为顶部工具栏和底部导航工具栏两种主要形式。以下是关于如何配置和使用这些工具栏的相关说明。 #### 1. 配置顶部工具栏 (Top Toolbar) 通过设置 `toolbar` 属性为 `[true,"top"]` 或者 `[true,"both"]` 可以启用顶部工具栏。此工具栏通常用来放置自定义按钮或其他控件[^2]。 ```javascript $("#grid").jqGrid({ datatype: "local", colNames: ['ID', 'Name'], colModel: [ { name: 'id', index: 'id', width: 60 }, { name: 'name', index: 'name', width: 90 } ], toolbar: [true, "top"], // 启用顶部工具栏 }); ``` 一旦启用了顶部工具栏,可以通过选择器访问它并动态添加 HTML 元素: ```javascript // 获取顶部工具栏 DOM 对象 const topToolbar = $("#gview_grid .ui-userdata"); if (topToolbar.length > 0) { topToolbar.append('<button id="customButton">Custom Action</button>'); } ``` #### 2. 底部导航工具栏 (Pager Navigation Toolbar) 底部导航工具栏主要用于分页控制和其他交互式功能。要创建一个带有分页功能的网格视图,需指定 `pager` 参数以及相应的 ID[^3]。 ```javascript $("#grid").jqGrid({ url: '/someurl', datatype: "json", colNames: ['ID', 'Name'], colModel: [ { name: 'id', index: 'id', width: 60 }, { name: 'name', index: 'name', width: 90 } ], pager: "#pager", // 绑定到页面上的某个 div 元素作为分页条容器 rowNum: 10, rowList: [10, 20, 30], viewrecords: true, caption: "My first grid" }).navGrid("#pager", { edit: false, add: false, del: false }); ``` 上述代码片段展示了如何初始化具有基本 CRUD 功能禁用状态下的 jqGrid 实例,并为其关联了一个名为 `"#pager"` 的分页组件。 #### 3. 自定义按钮行为 无论是顶部还是底部工具栏,都可以轻松扩展新的按钮来实现特定业务逻辑。例如,在顶部工具栏上增加导出 Excel 文件的功能[^4]: ```javascript jQuery("#grid").jqGrid('navButtonAdd',"#pager",{caption:"Export", buttonicon:"ui-icon-export", onClickButton:function(){ alert("Export functionality triggered!"); }}); ``` 以上示例演示了向已存在的分页导航工具栏追加一个新的 “Export” 按钮的过程;当点击该按钮时会弹窗提示消息框告知用户触发事件成功。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虎眼豆丁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值