Jqgrid入门-使用模态对话框编辑表格数据(三)
- Cell Editing——只允许修改某一个单元格内容
- Inline Editing——允许在jqGrid中直接修改某一行的数据
- Form Editing——弹出一个新的编辑窗口进行编辑和新增
1
2
3
4
5
6
7
8
9
|
// 配置模态对话框 $( "#consoleDlg" ).dialog({ autoOpen : false , // 是否自动弹出窗口 modal : true , // 设置为模态对话框 resizable : true , width : 500, height : 300, position : "center" // 窗口显示的位置 }); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
gridComplete : function () { var ids = jQuery( "#gridTable" ).jqGrid( 'getDataIDs' ); for ( var i = 0; i < ids.length; i++) { var cl = ids[i]; update = "<input type='button' value='修改' onclick='updateStu(" + cl + ")'/> " ; del = "<input type='button' value='删除' onclick='deleteStu(" + cl + ")'/> " ; view = "<input type='button' value='查看' onclick='viewStu(" + cl + ")'/>" ; jQuery( "#gridTable" ).jqGrid( 'setRowData' , ids[i], { process : update + del + view }); } }, |
- 添加数据

1
2
3
4
5
6
7
8
9
10
|
/** * 弹出新增学生对话框 */ function addStu() { var consoleDlg = $( "#consoleDlg" ); consoleDlg.html( "" ); var a1 = " <iframe src='studentProcess.jsp?op=add'" + "style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>" ; consoleDlg.append(a1); consoleDlg.dialog( "option" , "title" , "新增学生信息" ).dialog( "open" ); }; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function addStu() { // 序列化表单 var obj2 = $( "#myform" ).serializeArray(); $.ajax({ url : "QueryActionUrl_addStu.action" , data : obj2, dataType : "json" , cache : false , type : "post" , error : function (textStatus, errorThrown) { window.parent.hiAlert( "系统ajax交互错误" ); }, success : function (data, textStatus) { if (data.messageBean.code == "200" ) { hiAlert(data.messageBean.msg, "提示" , function () { window.parent.$( "#consoleDlg" ).dialog( "close" ); // 刷新表格 window.parent.$( "#gridTable" ).jqGrid( "setGridParam" , { search : true , mtype : "post" }).trigger( "reloadGrid" , [ { page : 1 } ]); }); } else { hiAlert(data.messageBean.msg, "提示" , function () { window.parent.$( "#consoleDlg" ).dialog( "close" ); }); } } }); } |
- 修改数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/** * 弹出修改学生的对话框 */ function updateStu(selectedRowId) { var consoleDlg = $( "#consoleDlg" ); consoleDlg.html( "" ); var str = $( "#gridTable" ).jqGrid( "getRowData" , selectedRowId); // 根据行ID,获取选中行的数据 id = { id : str.id }; var a1 = " <iframe src='studentProcess.jsp?op=update&id=" + JSON.stringify(id) + "' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>" ; consoleDlg.append(a1); consoleDlg.dialog( "option" , "title" , "修改学生信息" ).dialog( "open" ); }; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function updateStu() { var obj2 = $( "#myform" ).serializeArray(); $.ajax({ url : "QueryActionUrl_updateStu.action" , data : obj2, dataType : "json" , cache : false , type : "post" , error : function (textStatus, errorThrown) { window.parent.hiAlert( "系统ajax交互错误" ); }, success : function (data, textStatus) { if (data.messageBean.code == "200" ) { hiAlert(data.messageBean.msg, "提示" , function () { window.parent.$( "#consoleDlg" ).dialog( "close" ); // 刷新表格 window.parent.$( "#gridTable" ).jqGrid( "setGridParam" , { search : true , mtype : "post" }).trigger( "reloadGrid" , [ { page : 1 } ]); }); } else { hiAlert(data.messageBean.msg, "提示" , function () { window.parent.$( "#consoleDlg" ).dialog( "close" ); }); } } }); } |
原创文章,转载请注明: 转载自java开发者
本文链接地址: Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid入门-使用模态对话框编辑表格数据(三)的更多相关文章
- Django-website 程序案例系列-5 模态对话框实现提交数据
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jqgrid 分页时,清空原表格数据加载返回的新数据
由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的 ...
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- Jqgrid入门-操作表格的数据(二)
上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据. jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jq ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Jqgrid入门-显示基本的表格(一)
首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...
- VS2010/MFC编程入门之十二(对话框:非模态对话框的创建及显示)
上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...
- Jqgrid入门-Jqgrid列数据拖动(七)
上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置. Jqgrid表格插件自己没有 ...
- Jqgrid入门-结合Struts2+json实现数据展示(五)
DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可. 初步分析:表格要实现分页,那么 ...
随机推荐
- java ZIP压缩文件
问题描述: 使用java ZIP压缩文件和目录 问题解决: (1)单个文件压缩 注: 以上是实现单个文件写入压缩包的代码,注意其中主要是在ZipOutStream流对象中创建Z ...
- 【tarjan】BZOJ 1051:受欢迎的牛
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3134 Solved: 1642[Submit][Sta ...
- 【POJ】【2125】Destroying the Graph
网络流/二分图最小点权覆盖 果然还是应该先看下胡伯涛的论文…… orz proverbs 题意: N个点M条边的有向图,给出如下两种操作.删除点i的所有出边,代价是Ai.删除点j的所有入边,代价是Bj ...
- PHP的反射机制(转)
介绍: PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and exte ...
- 修改npm包管理器的registry为淘宝镜像(npm.taobao.org)
起因 安装了node,安装了npm之后,官方的源实在是 太慢了! 看了看淘宝的npm镜像, http://npm.taobao.org/ 竟然说让我再下载一个cnpm,要不然就每次都得install ...
- SQL语句备忘
SELECT beatid,COUNT(d.id) dongnicount FROM `bed_beat_dongni` d INNER JOIN bed_beat b on b.id = d.bea ...
- grub,mbr的那些事
今天遇到一个问题是:双系统为win10和Ubuntu.启动模式为mbr,当前可以启动win10,但不能启动Ubuntu.先利用easybcd重新添加了一个,想着依旧用win10的启动项,(此处可以参考 ...
- jsp bean标签
jsp中存在一个奇奇怪怪的bean标签. 例如 现在在java包中定义一个类test2 package bean; public class test { private int number; pu ...
- who is in front of me 解题报告
题目描述:N(1<=N<=50005)个学生站成一个纵队,每个人只能看到前面身高比他高(严格大于)的人 求所有人中能看到的最大人数 分析:对于某个人A,设前面第一个身高比他高的人是B.如果 ...
- Android 打开闪光灯(手电筒)
package com.example.openBackLight; import android.app.Activity; import android.hardware.Camera; impo ...