ASP.NET MVC and jqGrid 学习笔记 5-添加数据
据介绍，jqgrid有3种编辑数据的方式：
- Cell Editing 只允许修改某一个单元格内容
- Inline Editing 允许在jqGrid中直接修改某一行的数据
- Form Editing 弹出一个新的编辑窗口进行编辑和新增
Form Editing很方便，直接把oper参数传递给Controller进行判断是add还是edit还是del，然后相应处理即可。大致如：
string operation = form["oper"]; if (operation.Equals("add")){...} else if (operation.Equals("edit")){...} else if (operation == "del"){...}
当然前端的配置要跟上：
<script type="text/javascript"> $(function () { $("#grid").jqGrid({...}); $("#grid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true }, {...},//Edit {...},//Add {...},//Delete {...} //Search ); }); </script>
这样会调用jqgrid内置的窗体来进行CRUD。如果不喜欢内置的对话框格式，我们可以自定义。本文介绍的就是自定义对话框的方法。
先看下效果图
这里的创建新联系人对话框就是自定义的，步骤如下：
一、View
1、html-设计自己的对话框
<button onclick="addDialog()">添加联系人</button> <table id="grid"></table> <div id="pager"></div> <div id="myDialog"> <form id="myForm"> Name:<input type="text" id="Name" name="Name" /><br /> Email:<input type="text" id="Email" name="Email" /><br /> Created On:<input type="text" id="CreatedOn" name="CreatedOn" /> </form> </div>
2、javascript：
包含3部分
- jqgrid设置
- 对话框的配置
- 添加动作的代码
1 <script type="text/javascript"> 2 $(function () { 3 jQuery("#grid").jqGrid({ 4 url: "/Home/GetSortingData", 5 datatype: "json", 6 mtype: "get", 7 colModel: [ 8 { label: 'Number', name: 'No', index: 'No', width: 60, sorttype: "int" }, 9 { label: 'Name', name: 'Name', index: 'Name', width: 90 }, 10 { label: 'Email', name: 'Email', index: 'Email', width: 100, sortable: false }, 11 { 12 label: 'Created On', name: 'CreatedOn', index: 'CreatedOn', width: 150, 13 formatter: 'date', formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } 14 } 15 ], 16 caption: "jqGrid data", 17 loadonce: false, //排序翻页等操作在服务端完成 18 rowNum: 5, 19 rowList: [5, 10, 20], //设置分页下拉列表 20 pager: "#pager", 21 viewrecords: true, 22 width: 500, height: "auto", 23 jsonReader: { repeatitems: false }, //prmNames: { id: "No" }, 24 sortorder: "asc", 25 sortname: "No"//传递给服务端的排序字段名 26 }); 27 // 配置对话框(使用Jquery-UI的dialog插件) 28 $("#myDialog").dialog({ 29 autoOpen: false, 30 modal: false, // 设置对话框为非模态对话框 31 resizable: true, 32 width: 250, 33 buttons: { // 为对话框添加按钮 34 "取消": function () { $(this).dialog("close") }, 35 "创建": add 36 } 37 }); 38 }); 39 //添加-对话框 40 var addDialog = function () { 41 var dlg = $("#myDialog"); 42 var btnPane = dlg.siblings(".ui-dialog-buttonpane"); //注释1 43 dlg.find("input").removeAttr("disabled").val(""); 44 btnPane.find("button:not(:contains('取消'))").hide(); //注释2 45 btnPane.find("button:contains('创建')").show(); 46 dlg.dialog("option", "title", "创建新联系人").dialog("open"); 47 }; 48 //添加-函数表达式 49 var add = function () { 50 var dlg = $("#myDialog"); 51 var name = $.trim(dlg.find("#Name").val()); 52 var email = $.trim(dlg.find("#Email").val()); 53 var createdOn = $.trim(dlg.find("#CreatedOn").val()); 54 55 var actionUrl = "/Home/OperateData"; 56 var params = { 57 "Name": name, 58 "Email": email, 59 "CreatedOn": createdOn 60 }; 61 62 $.ajax({ 63 url: actionUrl, 64 type: "post", //默认为get 65 data: params, //传递给服务端的数据 66 dataType: "json", 67 cache: false, 68 error: function (textStatus, errorThrown) { 69 alert("系统ajax交互错误: " + textStatus); 70 }, 71 success: function (data, textStatus) { 72 if (data.success == true) {//注释3 73 var dataRow = { //注释4 74 No: data.No, 75 Name: name, 76 Email: email, 77 CreatedOn: createdOn 78 }; 79 var selectedId = $("#grid").jqGrid("getGridParam", "selrow"); 80 81 if (selectedId) { 82 $("#grid").jqGrid("addRowData", data.No, dataRow, "before", selectedId);//如果有选定行则添加在选定行前面 83 } else { 84 $("#grid").jqGrid("addRowData", data.No, dataRow, "first");//没有选定行则添加在第一行 85 } 86 dlg.dialog("close"); 87 alert("联系人添加操作成功!"); 88 } else { 89 alert("添加操作失败!"); 90 } 91 } 92 }); 93 }; 94 </script>
以上代码有4个注释
注释1：
var btnPane = dlg.siblings(".ui-dialog-buttonpane");
我们知道siblings() 是获得匹配集合中每个元素的同胞，那么".ui-dialog-buttonpane"是个什么类？
由此可见，通过我们自定义的myDialog找到了我们添加的2个按钮所在的面板，这个面板就包含一个.ui-dialog-buttonpane的css类。找到这个类主要就是便于操作我们设计的用于增删改查的按钮。
注释2：
btnPane.find("button:not(:contains('取消'))").hide(); //注释2
:contains 选择器选取包含指定字符串的元素,该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
在按钮面板中查找不包含"取消"的元素,找到后把他们隐藏起来（这个对话框中后面还要添加其他按钮，根据增删改查的需要来显示和隐藏。现在可忽略。）
注释3：
if (data.success == true) {//注释3
success是什么？哪里来的？
在回调函数中，有一句success: function (data, textStatus) ，这里的data是响应服务端的数据，这个data包含了从服务端传来的信息。这个信息是从Controller传来的，完整代码见Controller部分，这里只看这个data的部分：
return Json(new { success = true, msg = "hahah" , No=member.No //返回给前端序号 });
这个json对象就传递给了前端，success = true就是这么来的。
注释4：
var dataRow = { //注释4 No: data.No, Name: name, Email: email, CreatedOn: createdOn };
这是一个数组，包含了自定义对话框中的各个文本框的值，通过jqgrid的addRowData方法，在客户端操作jqgrid。
$("#grid").jqGrid("addRowData", data.No, dataRow, "first");
二、Controller
public ActionResult CRUD() { return View(); } public ActionResult OperateData(Member m) { Member member = new Member(); member.No = m.No; member.Name = m.Name; member.Email = m.Email; member.CreatedOn = m.CreatedOn; MyContext db = new MyContext(); db.Members.Add(member); db.SaveChanges(); return Json(new { success = true, msg = "hahah" , No=member.No //返回给前端序号 }); }
--End--