位置: 编程技术 - 正文
jqGrid表格应用之新增与删除数据附源码下载(jqgrid getrowdata)
编辑：rootadmin推荐整理分享jqGrid表格应用之新增与删除数据附源码下载(jqgrid getrowdata)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jqgrid文档,jqgrid getrowdata,jqgrid单元格编辑,jqgrid getcell,jqgrid cellattr,jqgrid单元格编辑,jqgrid getcell,jqgrid formatter,内容如对您有帮助，希望把文章链接给更多的朋友！
jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用。
下面给大家展示了效果图，喜欢的朋友可以直接下载源码哦。
效果展示 源码下载
在上一篇文章中，我们提到过jqGrid自身有强大的单元格操作模块，但是这些模块操作起来不太适合用户的习惯，在本文中，我们使用fancybox，以及表单插件来完成jqGrid数据的添加以及删除操作。
XHTML
首先需要在head中引入相关js和css文件。
其中，fancybox是用来显示弹出层效果的插件，form和message是用来处理表单和提示信息的插件，然后在body里加入以下代码：
我们在页面中放置一个“新增”和“删除”按钮，以及表格容器#list(jqGrid生成表格)以及分页条#pager。关于查询功能，我们在上一篇文章有讲解。
新增数据
1、读取数据：调用jqGrid，生成表格，此段代码在本站上一篇文章中有详细讲解，本文不再重复，您可以查看：jqGrid表格应用——读取与查询数据
2、调用表单:当点击“新增”按钮时，调用fancybox插件，弹出一个新增产品的表单层。
可以看出，调用fancybox时，以ajax的方式加载了一个页面：addGrid.html，这个页面用来放置要提交的表单。关于fancybox插件的应用，您可以查看本站文章了解：Fancybox丰富的弹出层效果
3、提交表单：我们需要在addGrid.html页面放置一表单。
当点击“提交”按钮时，对表单进行验证，这里我们使用了jquery.form.js完成表单的验证和提交，我们在addGrid.html页面加入以下代码：
4、PHP处理数据：表单数据提交给后台do.php后，程序需要过滤表单提交的数据，然后将数据插入到数据表中，并将执行结果返回给前端页面。
删除数据
数据的删除也是通过前端和后台的异步交互来完成的，本例中的删除功能可以执行批量删除，js获取jqGrid选中的要删除的行，然后将选中的数据对应的id提交给php处理，请看代码：
看代码，首先通过jqGrid的getGridParam方法获取选中的数据行selarrrow，如果选中多项，则获取到的sels值是一个以逗号隔开的字符串，然后提示是否确认删除，确认后提交ajax请求，如果后台php删除数据成功，则返回删除的数据id，前端调用jqGrid的delRowData方法将对应的数据行删除，并提示“以成功删除”。
后台do.php获取ajax提交过来的要删除的id，执行删除语句，完成删除操作。
至此，我们已经完成了对jqGrid的读取、新增、删除和查询数据的基本操作的讲解，希望对您有所帮助。对于jqGrid表格的应用文章的讲解有不对的地方，欢迎大家批评指正。
Jqgrid之强大的表格插件应用 jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一
基于PHP和Mysql相结合使用jqGrid读取数据并显示 jqGrid可以动态读取和加载外部数据，本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示，以及可以通过输入关键字查询数据的ajax交互过程。
jquery判断输入密码两次是否相等 Jqueryeasyui是一个非常好的ui框架，但是表单验证中没有最常用的判断两个输出框中值相等的验证，所以我做了下扩展。$.extend($.fn.validatebox.defaults.rules,{/*
上一篇：通过点击jqgrid表格弹出需要的表格数据(jqgrid单元格点击事件)
下一篇：Jqgrid之强大的表格插件应用
