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

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

環境：asp.net mvc ,  bootstrap

顯示效果：

    

  代碼： 至於怎么弄多選框，在上一篇博客里已經有說明。

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

<div class="modal fade" id="myModal" 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">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模態框（Modal）標題
            </h4>
         </div>
         <div class="modal-body">
            內容
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">關閉
            </button>
            <button type="button" class="btn btn-primary">
               提交
            </button>
         </div>
      </div><!-- /.modal-content -->
</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方法

     代碼如下：

var whr = {};

whr.setModal = function (data) {
    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>";
    $("#" + data.appendId).empty();
    $("#" + data.appendId).append(modal);

    //加載一個頁面的內容
    if (data.loadUrl != "null") {
        var form2 = "<form id='" + data.formId + "'>  </form>";
        $("#" + data.modalId + " .modal-body").append(form2);
        $("#" + data.formId).load(data.loadUrl, data.loadParas);
    }
    else {
        var form2 = "<form id='" + data.formId + "' action='" + data.postUrl + "' method='post' >";
        for (var i = 0; i < data.cols.length; i++) {
            form2 += " <div > <label  >" + data.cols[i]["displayName"] + "</label> <input type='text' class='form-control' name='" + data.cols[i]["fieldName"] + "' placeholder=''> </div>";
        }
        form2 += "</form>";
        $("#" + data.modalId + " .modal-body").append(form2);
    }
    $("#" + data.modalId).modal('show');
    $("#btn-" + data.modalId).click(function () 
    {
        $.post(data.postUrl, $("#" + data.formId).serialize(), function (data) {
            if (data == "ok") {
                alert("添加成功");
            }
            else {
                alert("添加失敗");
            }
        });

    });

    $("#btn-close" + data.modalId).click(function () {
        data.close();
    });
}

 

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

$.post(data.postUrl, $("#" + data.formId).serialize(), function (data) {
            if (data == "ok") {
                alert("添加成功");
            }
            else {
                alert("添加失敗");
            }
        });

    后台代碼：

      public string AddMenu(Menu menu)
        {
            MenuDAO Dao = new MenuDAO();
            bool flag = Dao.AddMenu(menu);
            return flag?"ok":"error";
        }