接上篇博文，详细说一下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("需要显示的内容")){}。
现在我们需要的操作已经完成。