JQuery DataTables Editor---頁面內容修改&&數據庫信息修改 （2）

接上篇博文，詳細說一下js代碼以及JQuery DataTables Editor---頁面內容修改&&數據庫信息修改遇到的問題和解決辦法。

1.關於dialog

   初始化：

 $("#e_Attributes").dialog({
        modal: true,
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        width: 400
    });

    dialog 在初始化的時候，要設置 modal為true，這是一個遮蔽層，當dialog彈框出現，只能操作dialog里面的內容。這樣的好處在於一次只讓dialog 出現一次，便於對具體datatables的操作。

    關閉：

function dialogClose() {
        $("#e_Attributes").dialog("close");
    }

    當dialog中的ajax異步更新成功的時候，調用上面的代碼關閉dialog。

2.關於datatables

   初始化：

 var editor;
  //聲明datatable
 $("#gridtable").dataTable().fnDestroy();
    editor = $('#gridtable').dataTable({
           "bInfo":false,
           "bServerSide": false,
           'bPaginate': false,                      //是否分頁。
           "bProcessing": false,                    //當datatable獲取數據時候是否顯示正在處理提示信息。
           'bFilter': false,                       //是否使用內置的過濾功能。
           'bLengthChange': false,                  //是否允許用戶自定義每頁顯示條數。
           'sPaginationType': 'full_numbers',      //分頁樣式
  });

     首先聲明了editor，在datatables初始化的時候為editor賦值，這樣便於我們對已經初始化的datatables操作。
     $("#gridtable").dataTable().fnDestroy();這一段代碼，是將先前聲明的datatable destroy。沒有此段代碼，當頁面刷新的時候，就會出現dataTable已經聲明過了，無需再聲明的錯誤的警告，這個將錯誤不是每次都出現，至於具體的原因現在還沒有找到，但是加上這段代碼，就沒有這個錯誤了。

     dataTable的樣式大家可以自己設置。

3.datatables的操作

   單擊選中行變色以及獲取選中行的內容：

//單擊，取值，改樣式
$("#gridtable tbody tr").click(function (e) {
      if ($(this).hasClass('row_selected')) {
                $(this).removeClass('row_selected');
        }
       else {
                editor.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
                var aData = editor.fnGetData(this);
                ......//得到選中行的值，這些值在aData中，是以數組的形式出現，可以對這組值進行操作
              }
});

    單擊某一行，如果此行已經被選中，則去除樣式，如果沒有選中，則 $(this).addClass('row_selected')，可以添加自己想要的樣式。
    var aData = editor.fnGetData(this);可以得到點擊行的值，上面代碼中是得到新選中行的所有值。

    雙擊選中行變色，獲取選中行的內容以及彈出dialog：

//雙擊
$("#gridtable tbody tr").dblclick(function () {
            if ($(this).hasClass('row_selected')) {
 
            }
            else {
                editor.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }

            var aData = editor.fnGetData(this);
            ......//對得到的數據可以操作
             $("#e_Attributes").dialog("open");//打開dialog

});

     雙擊的時候選中行變色以及獲取選中行的內容和單擊的時候一樣，不過雙擊的時候多加了editor.$('tr.row_selected').removeClass('row_selected')代碼，因為同一個datatables中選中行我們設為互斥的，一次最多只能選中一行，此段代碼可以將先前選中的行的樣式去掉。經過測試，我們不用判斷原先有沒有選中行，這段代碼都能很好的工作。
     雙擊以后就可以打開dialog， $("#e_Attributes").dialog("open")用於打開dialog。

     添加操作：

 //添加
$("#add").click(function () {
            editor.$('tr.row_selected').removeClass('row_selected');
            putNullValue();
            $("#e_Attributes").dialog("open");
});

     當點擊add按鈕的時候，將對話框中的選中行樣式去掉，將彈出框里面的內容全部清除，最后打開dialog。
     編輯操作：

 //編輯
$("#edit").click(function () {
            var productAttributeID = $("#productAttributeID").val();
            if (productAttributeID != "" && productAttributeID != null) {
                $("#e_Attributes").dialog("open");
            }

});

     單擊編輯按鈕的操作看着很簡單，因為我們在單擊選中行的時候已經將工作做好了---得到選中行的值，並且賦給dialog中相應的元素。所以只用打開dialog即可。
     刪除操作：

 //刪除
$("#delete").click(function () {
            var productAttributeID = $("#productAttributeID").val();
            var productID = $("#productID").val();
            if (productAttributeID != null && productAttributeID != "") {
                if (confirm("Delete?")) {
                    $.ajax({
                        type: "GET",
                        url: "@Url.Action("DeleteAttribute", "Product")",
                        data: { ProductID: productID, ProductAttributeID: productAttributeID },//參數名要和Action 中的參數名相同
                        dataType: "html",
                        cache: false,
                        success: function (result) {
                            $("#d_Attributes").html(result);
                            $("#productAttributeID").val(null);
                        }
                    });
                }
            }
 });

      刪除操作使用異步更新，刪除時彈出的警告框代碼為 if(confirm("需要顯示的內容")){}。

      現在我們需要的操作已經完成。