ASP.NET MVC and jqGrid 學習筆記 5-添加數據

時間 2019-11-09

標籤 asp.net asp mvc jqgrid 學習筆記添加數據欄目 ASP 简体版

原文原文鏈接

據介紹，jqgrid有3種編輯數據的方式：javascript

Cell Editing 只容許修改某一個單元格內容
Inline Editing 容許在jqGrid中直接修改某一行的數據
Form Editing 彈出一個新的編輯窗口進行編輯和新增

Form Editing很方便，直接把oper參數傳遞給Controller進行判斷是add仍是edit仍是del，而後相應處理便可。大體如：css

string operation = form["oper"];
if (operation.Equals("add")){...}
else if (operation.Equals("edit")){...}
else if (operation == "del"){...}

固然前端的配置要跟上：html

<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。若是不喜歡內置的對話框格式，咱們能夠自定義。本文介紹的就是自定義對話框的方法。前端

先看下效果圖java

這裏的建立新聯繫人對話框就是自定義的，步驟以下：ajax

1、View

一、html-設計本身的對話框json

<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>

二、javascript：數組

包含3部分ide

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");

2、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    //返回給前端序號
            });           
        }