Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据。这三种方式分别是:
  • Cell Editing——只允许修改某一个单元格内容
  • Inline Editing——允许在jqGrid中直接修改某一行的数据
  • Form Editing——弹出一个新的编辑窗口进行编辑和新增
       在我做的DEMO中,主要运用的是第三种, 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。
 
        相比较之前的例子,这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。在jquery的ready方法里面我将初始化div生成为一个模态对话框,用作编辑数据的界面。这个用到了jquery ui的dialog。关于如何使用dialog,参考这篇文章就ok了。这是主要的js代码。
1
2
3
4
5
6
7
8
9
// 配置模态对话框
$("#consoleDlg").dialog({
autoOpen : false, // 是否自动弹出窗口
modal : true, // 设置为模态对话框
resizable : true,
width : 500,
height : 300,
position : "center" // 窗口显示的位置
});
       那么我们通过什么方式来打开这个窗口呢? 细心的朋友们可以发现我在前面的文章一的截图中,表格的最前面新增了一列操作栏。这个操作栏主要是通过Jqgrid的gridComplete方法来实现的。当表格所有数据都加载完成而且其他的处理也都完成时触发此事件。
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 + ")'/>&nbsp;";
del = "<input type='button' value='删除' onclick='deleteStu("
+ cl + ")'/>&nbsp;";
view = "<input type='button' value='查看' onclick='viewStu("
+ cl + ")'/>";
jQuery("#gridTable").jqGrid('setRowData',
ids[i], {
process : update + del + view
});
}
},
        从这段代码我们可以看出,我们使用这个方法先获得表格所有列的id,然后在每一列中追加了三个按钮。这三个按钮点击时就会触发各自的方法。注意:代码中的process对应colModel中的列。
        按钮已经设置完成了,下面就该操作表格的数据了。
  •  添加数据
        点击页面上的新增按钮,就会弹出刚才初始化的模态对话框。如图:
        
        这是一个form表单,里面包含学生的基本信息,还有两个按钮。有的朋友可能会问这个对话框是在弹出来的呢?别急,看这里。
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");
};
        原来点击按钮调用的是这个方法呀。解释一下,先获得这个对象,然后清空对话框里面的元素。然后追加一个iframe。再调用dialog的open方法。
        填写好表单,点击新增按钮。提示新增成功后,就可以在表格中看到刚才新增的同学了。不用刷新页面,Jqgrid有现成的方法。
        这是新增学生的具体方法。
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");     });
}
}
}); }
  • 修改数据
       修改数据的时候,和刚才新增方法就有点区别了。因为修改的时候要先把数据加载到对话框的表单中。如图:
      比如,我要修改李丽丽的信息。我们需要把原来的信息加载出来。所以在弹出对话框之前我们需要把这个学生的id也传递过来。如图:
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");
};
通过和上面新增方法对比,可以发现修改方法是先得到选中行的id,然后得到学生的id,最后通过json传递过去。
点击修改按钮,提示修改成功后,就可以在表格中看到修改后的学生数据了。
 这是修改学生的方法。
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");
});
}
}
});
}
        删除和查看数据就不做具体说明了,和修改差不多只是dao层中调用的方法不一样。在这些代码中只需关注op(操作标识)和传递的学生id。也可以这样做,在修改、删除和查看的时候,把学生的信息通过json全部传递过来,就不需要通过学生id去查询数据库了,减少与数据库的交互。

原创文章,转载请注明: 转载自java开发者

本文链接地址: Jqgrid入门-使用模态对话框编辑表格数据(三)

Jqgrid入门-使用模态对话框编辑表格数据(三)的更多相关文章

  1. Django-website 程序案例系列-5 模态对话框实现提交数据

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. jqgrid 分页时,清空原表格数据加载返回的新数据

    由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的  ...

  3. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  4. Jqgrid入门-操作表格的数据(二)

    上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据.           jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jq ...

  5. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Jqgrid入门-显示基本的表格(一)

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

  7. VS2010/MFC编程入门之十二(对话框:非模态对话框的创建及显示)

    上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...

  8. Jqgrid入门-Jqgrid列数据拖动(七)

    上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置.     Jqgrid表格插件自己没有 ...

  9. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

随机推荐

  1. java ZIP压缩文件

    问题描述:     使用java ZIP压缩文件和目录 问题解决:     (1)单个文件压缩 注:     以上是实现单个文件写入压缩包的代码,注意其中主要是在ZipOutStream流对象中创建Z ...

  2. 【tarjan】BZOJ 1051:受欢迎的牛

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3134  Solved: 1642[Submit][Sta ...

  3. 【POJ】【2125】Destroying the Graph

    网络流/二分图最小点权覆盖 果然还是应该先看下胡伯涛的论文…… orz proverbs 题意: N个点M条边的有向图,给出如下两种操作.删除点i的所有出边,代价是Ai.删除点j的所有入边,代价是Bj ...

  4. PHP的反射机制(转)

    介绍: PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and exte ...

  5. 修改npm包管理器的registry为淘宝镜像(npm.taobao.org)

    起因 安装了node,安装了npm之后,官方的源实在是 太慢了! 看了看淘宝的npm镜像, http://npm.taobao.org/  竟然说让我再下载一个cnpm,要不然就每次都得install ...

  6. SQL语句备忘

    SELECT beatid,COUNT(d.id) dongnicount FROM `bed_beat_dongni` d INNER JOIN bed_beat b on b.id = d.bea ...

  7. grub,mbr的那些事

    今天遇到一个问题是:双系统为win10和Ubuntu.启动模式为mbr,当前可以启动win10,但不能启动Ubuntu.先利用easybcd重新添加了一个,想着依旧用win10的启动项,(此处可以参考 ...

  8. jsp bean标签

    jsp中存在一个奇奇怪怪的bean标签. 例如 现在在java包中定义一个类test2 package bean; public class test { private int number; pu ...

  9. who is in front of me 解题报告

    题目描述:N(1<=N<=50005)个学生站成一个纵队,每个人只能看到前面身高比他高(严格大于)的人 求所有人中能看到的最大人数 分析:对于某个人A,设前面第一个身高比他高的人是B.如果 ...

  10. Android 打开闪光灯(手电筒)

    package com.example.openBackLight; import android.app.Activity; import android.hardware.Camera; impo ...