Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。这三种方式分别是：
Cell Editing——只允许修改某一个单元格内容Inline Editing——允许在jqGrid中直接修改某一行的数据Form Editing——弹出一个新的编辑窗口进行编辑和新增????? ?在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。?? ? ? ? 相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据的界面。这个用到了jquery ui的dialog。关于如何使用dialog，参考这篇文章就ok了。这是主要的js代码。????? ? 这是一个form表单，里面包含学生的基本信息，还有两个按钮。有的朋友可能会问这个对话框是在弹出来的呢？别急，看这里。
? ? ? 比如，我要修改李丽丽的信息。我们需要把原来的信息加载出来。所以在弹出对话框之前我们需要把这个学生的id也传递过来。如图:12345678910111213141516171819202122232425262728293031function 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去查询数据库了，减少与数据库的交互。