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

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