datatables.js 簡單使用--彈出編輯框或添加資料框

内容：選中某一條記錄，彈出編輯框

環境：asp.net mvc , bootstrap

顯示效果：

代碼：至于怎麼弄多選框，在上一篇部落格裡已經有說明。

主要用到了bootstrap的模态窗，下面代碼是從網上找的，主要分3部分，标題header，内容body和底部footer

1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
 2    aria-labelledby="myModalLabel" aria-hidden="true">
 3    <div class="modal-dialog">
 4       <div class="modal-content">
 5          <div class="modal-header">
 6             <button type="button" class="close" 
 7                data-dismiss="modal" aria-hidden="true">
 8                   &times;
 9             </button>
10             <h4 class="modal-title" id="myModalLabel">
11                模态框（Modal）标題
12             </h4>
13          </div>
14          <div class="modal-body">
15             内容
16          </div>
17          <div class="modal-footer">
18             <button type="button" class="btn btn-default" 
19                data-dismiss="modal">關閉
20             </button>
21             <button type="button" class="btn btn-primary">
22                送出
23             </button>
24          </div>
25       </div><!-- /.modal-content -->
26 </div>

我主要是對上面的代碼進行了封裝，把它放到了一個js裡。

//btn-modify 這個是編輯按鈕的class名
$('.btn-modify').click(function () {
    if ($(".checkchild:checked").length > 1)
    {
        alert("一次隻能修改一條資料");
        return;
    }
    var id = $(".checkchild:checked").val();
    var initData = {
        "appendId": "modalRef",//加到哪裡去
        "modalId": "myModal",
        "title": "修改菜單",
        "formId": "formEdit", //form的ID
        "loadUrl": "/Menus/Edit", //如果不從頁面加載，寫成"null" 
        "loadParas": { "ID": id },     //向loadUrl傳的資料
        "postUrl": "/BasicManage/Edit", //送出add的url
        "close": reloadDt, //關閉彈出窗後調用的方法
        "cols": ""   //[ {"displayName":"菜單名","fieldName":"Name"}]   
    };
    whr.setModal(initData);
});

大體說明：我用js拼接了bootstrap的模态框，然後對它的body部分進行填充。

對body部分填充分2種方式： 1. 加載另一個頁面(編輯時用這個比較好)，2. 拼接一個form表單(主要是添加用)

主要傳的參數是 initData .

"appendId": "modalRef" 把模态框的代碼附加到哪裡去 <div id="modalRef"></div>

"modalId": "myModal" 模态框代碼的ID

"title": "修改菜單" 模态框标題

"formId": "formEdit", form表單的ID，至于為什麼加一個form表單，是因為Jquery取資料比較友善，$("#formEdit").serialize()

"loadUrl": "/Menus/Edit", //如果不從頁面加載，寫成"null"

如果寫成"null", 就會從cols中取資料

"loadParas": { "ID": id }, //向loadUrl傳的資料，加載一個頁面時需要傳的資料，比如要取一條記錄的資料要傳給背景ID

"postUrl": "/BasicManage/Edit", //點選送出按鈕時要送出到哪裡，送出資料使用的 $("#formEdit").serialize()，會把form表單裡有name的都送出到背景

"close": reloadDt, //關閉彈出窗後調用的方法，送出資料後，點模态框的關閉按鈕時應該重新整理表格的資料

//關閉彈出窗後調用的方法

function reloadDt() {

//重新整理

_dataTables.ajax.reload();

}

"cols": "" //資料格式： [ {"displayName":"菜單名","fieldName":"Name"}]

會拼接成菜單名：<input type="text" name="Name" />

whr.setModal(initData); 調用拼接模态框的js方法

代碼如下：

datatables.js 簡單使用--彈出編輯框或添加資料框

1 var whr = {};
 2 
 3 whr.setModal = function (data) {
 4     var modal = "<div class='modal fade' id='" + data.modalId + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close'  data-dismiss='modal' aria-hidden='true'> </button><h4 class='modal-title' id='myModalLabel'>" + data.title + "</h4> </div> <div class='modal-body'> </div> <div class='modal-footer'><button id='btn-close" + data.modalId + "' type='button' class='btn btn-default'  data-dismiss='modal'> 關閉 </button> <button type='button' id='btn-" + data.modalId + "' class='btn btn-primary'> 送出</button> </div></div></div> </div>";
 5     $("#" + data.appendId).empty();
 6     $("#" + data.appendId).append(modal);
 7 
 8     //加載一個頁面的内容
 9     if (data.loadUrl != "null") {
10         var form2 = "<form id='" + data.formId + "'>  </form>";
11         $("#" + data.modalId + " .modal-body").append(form2);
12         $("#" + data.formId).load(data.loadUrl, data.loadParas);
13     }
14     else {
15         var form2 = "<form id='" + data.formId + "' action='" + data.postUrl + "' method='post' >";
16         for (var i = 0; i < data.cols.length; i++) {
17             form2 += " <div > <label  >" + data.cols[i]["displayName"] + "</label> <input type='text' class='form-control' name='" + data.cols[i]["fieldName"] + "' placeholder=''> </div>";
18         }
19         form2 += "</form>";
20         $("#" + data.modalId + " .modal-body").append(form2);
21     }
22     $("#" + data.modalId).modal('show');
23     $("#btn-" + data.modalId).click(function () 
24     {
25         $.post(data.postUrl, $("#" + data.formId).serialize(), function (data) {
26             if (data == "ok") {
27                 alert("添加成功");
28             }
29             else {
30                 alert("添加失敗");
31             }
32         });
33 
34     });
35 
36     $("#btn-close" + data.modalId).click(function () {
37         data.close();
38     });
39 }

View Code

注意其中的一段代碼，post的傳回值我寫死了，可以修改一下上面封裝的js，改成自定義的

1 $.post(data.postUrl, $("#" + data.formId).serialize(), function (data) {
2             if (data == "ok") {
3                 alert("添加成功");
4             }
5             else {
6                 alert("添加失敗");
7             }
8         });

背景代碼：

public string AddMenu(Menu menu)

{

MenuDAO Dao = new MenuDAO();

bool flag = Dao.AddMenu(menu);

return flag?"ok":"error";

}