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


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

  • 相关阅读:
    精选css动画库及其使用
    使用js reduce方法求数组中出现次数最多的元素
    文字横向滚动效果,公告效果
    判断是否是微信端
    移动端input/textarea输入框光标高度兼容及其他事项
    更新被拒绝,因为您当前分支的最新提交落后于其对应的远程分支
    Git 常见问题整理
    CentOS 7.0 安装配置LAMP服务器方法(Apache+PHP+MariaDB)
    centos7安装eclipse
    centos7安装mplayer的方法
  • 原文地址:https://www.cnblogs.com/zjf1987/p/JQuery_DataTables_Editor.html
Copyright © 2020-2023  润新知