JQuery DataTables Editor---页面内容修改&&数据库信息修改 （2）
接上篇博文，详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法。
1.关于dialog
初始化：
1 $("#e_Attributes").dialog({ 2 modal: true, 3 autoOpen: false, 4 show: { 5 effect: "blind", 6 duration: 1000 7 }, 8 hide: { 9 effect: "explode", 10 duration: 1000 11 }, 12 width: 400 13 });
dialog 在初始化的时候，要设置 modal为true，这是一个遮蔽层，当dialog弹框出现，只能操作dialog里面的内容。这样的好处在于一次只让dialog 出现一次，便于对具体datatables的操作。
关闭：
1 function dialogClose() { 2 $("#e_Attributes").dialog("close"); 3 }
当dialog中的ajax异步更新成功的时候，调用上面的代码关闭dialog。
2.关于datatables
初始化：
1 var editor; 2 //声明datatable 3 $("#gridtable").dataTable().fnDestroy(); 4 editor = $('#gridtable').dataTable({ 5 "bInfo":false, 6 "bServerSide": false, 7 'bPaginate': false, //是否分页。 8 "bProcessing": false, //当datatable获取数据时候是否显示正在处理提示信息。 9 'bFilter': false, //是否使用内置的过滤功能。 10 'bLengthChange': false, //是否允许用户自定义每页显示条数。 11 'sPaginationType': 'full_numbers', //分页样式 12 });
首先声明了editor，在datatables初始化的时候为editor赋值，这样便于我们对已经初始化的datatables操作。
$("#gridtable").dataTable().fnDestroy();这一段代码，是将先前声明的datatable destroy。没有此段代码，当页面刷新的时候，就会出现dataTable已经声明过了，无需再声明的错误的警告，这个将错误不是每次都出现，至于具体的原因现在还没有找到，但是加上这段代码，就没有这个错误了。
dataTable的样式大家可以自己设置。
3.datatables的操作
单击选中行变色以及获取选中行的内容：
1 //单击，取值，改样式 2 $("#gridtable tbody tr").click(function (e) { 3 if ($(this).hasClass('row_selected')) { 4 $(this).removeClass('row_selected'); 5 } 6 else { 7 editor.$('tr.row_selected').removeClass('row_selected'); 8 $(this).addClass('row_selected'); 9 var aData = editor.fnGetData(this); 10 ......//得到选中行的值，这些值在aData中，是以数组的形式出现，可以对这组值进行操作 11 } 12 });
单击某一行，如果此行已经被选中，则去除样式，如果没有选中，则 $(this).addClass('row_selected')，可以添加自己想要的样式。
var aData = editor.fnGetData(this);可以得到点击行的值，上面代码中是得到新选中行的所有值。
双击选中行变色，获取选中行的内容以及弹出dialog：
1 //双击 2 $("#gridtable tbody tr").dblclick(function () { 3 if ($(this).hasClass('row_selected')) { 4 5 } 6 else { 7 editor.$('tr.row_selected').removeClass('row_selected'); 8 $(this).addClass('row_selected'); 9 } 10 11 var aData = editor.fnGetData(this); 12 ......//对得到的数据可以操作 13 $("#e_Attributes").dialog("open");//打开dialog 14 15 });
双击的时候选中行变色以及获取选中行的内容和单击的时候一样，不过双击的时候多加了editor.$('tr.row_selected').removeClass('row_selected')代码，因为同一个datatables中选中行我们设为互斥的，一次最多只能选中一行，此段代码可以将先前选中的行的样式去掉。经过测试，我们不用判断原先有没有选中行，这段代码都能很好的工作。
双击以后就可以打开dialog， $("#e_Attributes").dialog("open")用于打开dialog。
添加操作：
1 //添加 2 $("#add").click(function () { 3 editor.$('tr.row_selected').removeClass('row_selected'); 4 putNullValue(); 5 $("#e_Attributes").dialog("open"); 6 });
当点击add按钮的时候，将对话框中的选中行样式去掉，将弹出框里面的内容全部清除，最后打开dialog。
编辑操作：
1 //编辑 2 $("#edit").click(function () { 3 var productAttributeID = $("#productAttributeID").val(); 4 if (productAttributeID != "" && productAttributeID != null) { 5 $("#e_Attributes").dialog("open"); 6 } 7 8 });
单击编辑按钮的操作看着很简单，因为我们在单击选中行的时候已经将工作做好了---得到选中行的值，并且赋给dialog中相应的元素。所以只用打开dialog即可。
删除操作：
1 //删除 2 $("#delete").click(function () { 3 var productAttributeID = $("#productAttributeID").val(); 4 var productID = $("#productID").val(); 5 if (productAttributeID != null && productAttributeID != "") { 6 if (confirm("Delete?")) { 7 $.ajax({ 8 type: "GET", 9 url: "@Url.Action("DeleteAttribute", "Product")", 10 data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 11 dataType: "html", 12 cache: false, 13 success: function (result) { 14 $("#d_Attributes").html(result); 15 $("#productAttributeID").val(null); 16 } 17 }); 18 } 19 } 20 });
删除操作使用异步更新，删除时弹出的警告框代码为 if(confirm("需要显示的内容")){}。
现在我们需要的操作已经完成。
