JQuery DataTables Editor---页面内容修改&&数据库信息修改 （2）

接上篇博文，详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法。

1.关于dialog

初始化：

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

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("需要显示的内容")){}。

现在我们需要的操作已经完成。