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