JQuery DataTables Editor---页面内容修改&&数据库信息修改 （1）

我们使用jquery datatables 不光是为了对数据的展示，同时需要对数据惊行简单的操作，这个操作分为两个部分：1.页面内容的修改；2.对应的数据库信息的修改。

前一篇博文介绍了页面级的操作，这片文章主要是数据库内容的更改。

1. 需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

   

2. 分析：添加功能---单击add按钮，弹出对话框，添加新的内容。

编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。

删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。

3.  编码：

 Attributes//名称
 <table id="gridtable" class="gridtable">//声明jquery datatables
     <thead>
         <tr>
             <th>Name
             </th>
             <th>Value
             </th>
             <th>DisplayOrder
             </th>
         </tr>
     </thead>
     <tbody>
        .....//datatables内容，此处省略
     </tbody>
 </table>
 <input type="button" id="add" value="Add" />//添加按钮
 <input type="button" id="edit" value="Edit" />//编辑按钮
 <input type="button" id="delete" value="Delete" />//删除按钮

 <div id="e_Attributes">//声明dialog,异步更新
     @using (Ajax.BeginForm("Update", "Product", new AjaxOptions
 {
     UpdateTargetId = "d_Attributes",
     OnSuccess = "dialogClose",
     HttpMethod = "Post",
 }))
     {
         <table>
             <tbody>
                 <tr>
                     <td>Name</td>
                     <td>
                         <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td>
                 </tr>
                 <tr>
                     <td>Value</td>
                     <td>
                         <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td>
                 </tr>
                 <tr>
                     <td>DisplayOrder</td>
                     <td>
                         <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td>
                 </tr>
                 <tr>
                     <td>
                         <input id="submit" type="submit" name="submit" value="Submit" />
                         <input id="hiddenValue" type="hidden" name="hiddenValue" />
                     </td>
                 </tr>
             </tbody>
         </table>
     }
 </div>

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" class="gridtable">；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。
所需js的代码：

 <script type="text/javascript">
     function dialogClose() {
         $("#e_Attributes").dialog("close");
     }

     $("#e_Attributes").dialog({
         modal: true,
         autoOpen: false,
         show: {
             effect: "blind",
             duration:
         },
         hide: {
             effect: "explode",
             duration:
         },
         width:
     });

     var editor;

     $(function () {
         //声明datatable
         $("#gridtable").dataTable().fnDestroy();
         editor = $('#gridtable').dataTable({
             "bInfo":false,
             "bServerSide": false,
             'bPaginate': false,                      //是否分页。
             "bProcessing": false,                    //当datatable获取数据时候是否显示正在处理提示信息。
             'bFilter': false,                       //是否使用内置的过滤功能。
             'bLengthChange': false,                  //是否允许用户自定义每页显示条数。
             'sPaginationType': 'full_numbers',      //分页样式
         });
         //单击，赋值，改样式
         $("#gridtable tbody tr").click(function (e) {
             if ($(this).hasClass('row_selected')) {
                 $(this).removeClass('row_selected');
                 putNullValue()
             }
             else {
                 editor.$('tr.row_selected').removeClass('row_selected');
                 $(this).addClass('row_selected');
                 var aData = editor.fnGetData(this);
                 if (null != aData) {
                     putValue(aData);
                 }
             }
         });
         //双击
         $("#gridtable tbody tr").dblclick(function () {
             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);
             if (null != aData) {
                 putValue(aData);
             }

             $("#hiddenValue").val("edit");
             $("#e_Attributes").dialog("open");

         });
         //添加
         $("#add").click(function () {
             editor.$('tr.row_selected').removeClass('row_selected');
             putNullValue();

             $("#hiddenValue").val("add");
             $("#e_Attributes").dialog("open");
         });
         //编辑
         $("#edit").click(function () {
             var productAttributeID = $("#productAttributeID").val();
             if (productAttributeID != "" && productAttributeID != null) {
                 $("#hiddenValue").val("edit");
                 $("#e_Attributes").dialog("open");
             }

         });
         //删除
         $("#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);
                         }
                     });
                 }
             }
         });

         //赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了）
         function putNullValue() {
            。。。。。。／／此处省略
         }
         //赋值
         function putValue(aData) {
            。。。。。。//此处省略
         }
     });

     $.ajaxSetup({ cache: false });
 </script>

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。

添加功能效果图

编辑功能效果图：

删除效果图：

到此，功能已经全部实现，所需的代码也已经贴出。