Jqgrid入门-使用模态对话框编辑表格数据(三)
2013-06-29 22:37
225 查看
Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据。这三种方式分别是:Cell Editing——只允许修改某一个单元格内容
Inline Editing——允许在jqGrid中直接修改某一行的数据
Form Editing——弹出一个新的编辑窗口进行编辑和新增
在我做的DEMO中,主要运用的是第三种, 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。
相比较之前的例子,这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。在jquery的ready方法里面我将初始化div生成为一个模态对话框,用作编辑数据的界面。这个用到了jquery ui的dialog。关于如何使用dialog,参考这篇文章就ok了。这是主要的js代码。
按钮已经设置完成了,下面就该操作表格的数据了。
添加数据
点击页面上的新增按钮,就会弹出刚才初始化的模态对话框。如图:
![](http://www.javakfz.com/wp-content/uploads/2013/05/1.png)
这是一个form表单,里面包含学生的基本信息,还有两个按钮。有的朋友可能会问这个对话框是在弹出来的呢?别急,看这里。
填写好表单,点击新增按钮。提示新增成功后,就可以在表格中看到刚才新增的同学了。不用刷新页面,Jqgrid有现成的方法。
这是新增学生的具体方法。
修改数据的时候,和刚才新增方法就有点区别了。因为修改的时候要先把数据加载到对话框的表单中。如图:
![](http://www.javakfz.com/wp-content/uploads/2013/05/2.png)
比如,我要修改李丽丽的信息。我们需要把原来的信息加载出来。所以在弹出对话框之前我们需要把这个学生的id也传递过来。如图:
点击修改按钮,提示修改成功后,就可以在表格中看到修改后的学生数据了。
这是修改学生的方法。
原创文章,转载请注明: 转载自java开发者
本文链接地址: Jqgrid入门-使用模态对话框编辑表格数据(三)
相关文章推荐
- Jqgrid入门-使用模态对话框编辑表格数据(三)
- Jqgrid入门-使用模态对话框编辑表格数据(三)
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
- jqGrid与Struts2的结合应用(三) ------ 使用自定义表单对话框编辑Grid数据 .
- 框架 day52 BOS项目练习(业务受理功能,快速录入工作单{datagrid数据表格编辑功能使用})
- 使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- Swt/Jface tableViewer入门教程三(加入在表格上直接编辑数据)
- Jqgrid入门-操作表格的数据(二)
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
- 使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
- Swt/Jface tableViewer入门教程三(加入在表格上直接编辑数据)
- Emacs中使用Forms-mode以表格形式展示/编辑简单的文本数据
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
- Emacs中使用Forms-mode以表格形式展示/编辑简单的文本数据
- BOS项目练习(业务受理功能,快速录入工作单{datagrid数据表格编辑功能使用})