JQuery Datatables(一)

最近项目中用了Bootstrap的样式风格，控件用了JQuery Datatables，主要有几下几点目标：

1. 实现BootStrap风格的table，使用Ajax获取数据，并有勾选项
2. 可以实现全选，单击勾选
3. 双击行弹出编辑对话框，点击保存使用Ajax传送到服务端保存
4. 实现批量删除
5. 分页操作（下次再记录）
6. 查询操作（下次再记录）
7. 排序操作（下次再记录）

第一部分：

编写一个只有thead的table，tbody会在JS函数中自动生成。

HMTL代码如下：

             <table id="example" class="table table-striped table-bordered table-hover">
                 <thead>
                 <tr>
                     <th class="center">
                         <label class="position-relative">
                             <input type="checkbox" class="ace"/>
                             <span class="lbl"></span>
                         </label>
                     </th>
                     <th>公司名称</th>
                     <th>简称</th>
                     <th>所在城市</th>
                     <th>地址</th>
                     <th>联系人</th>
                     <th>联系电话</th>
                 </tr>
                 </thead>

             </table>

直接在该Table上加入JS代码

 $('#example').dataTable({
     "oLanguage": {    //语言设置
         "sProcessing": "正在加载中......",
         "sLengthMenu": "每页显示 _MENU_ 条记录",
         "sZeroRecords": "对不起，查询不到相关数据！",
         "sEmptyTable": "表中无数据存在！",
         "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
         "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
         "sSearch": "搜索",
         "oPaginate": {
             "sFirst": "首页",
             "sPrevious": "上一页",
             "sNext": "下一页",
             "sLast": "末页"
         }
     },
     bAutoWidth: false,    //自动适应宽度
     "bFilter": false, //查询
     "bSort": true, //排序
     "bInfo": false, //页脚信息
     "bLengthChange": false, //改变每页显示数据数量
     "bServerSide": true, //服务器数据
     "sAjaxSource": '/XXX/XXX/GetList',
     "bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
     "bPaginate": true, //显示分页器
     "iDisplayLength ": 10, //一页显示条数
     "aoColumns": [
         {
             //自定义列
             "sName":"Id",        //Ajax提交时的列明（此处不太明白，为什么用两个属性--sName，mDataProp）
             "mDataProp": "Id",    //获取数据列名
             "sClass": "center",    //样式
             "bStorable": false,    //该列不排序
             "render": function(data, type, row) {    //列渲染
                 return '<label class="position-relative">' +
                     '<input type="checkbox" class="ace" value="'+data+'"/>' +
                     '<span class="lbl"></span>' +
                     '</label>';
             }
         },
         {
             "sName": "Name",
             "mDataProp": "Name",
             "bSearchable": true,    //检索可用
             "bStorable": true
         },
         {
             "sName": "CustomerSN",
             "mDataProp": "CustomerSN",
             "bSearchable": false,
             "bStorable": false
         },
         {
             "mDataProp": "City",
             "sName": "City"
         },
         {
             "sName": "Address",
             "mDataProp": "Address"
         },
         {
             "sName": "Contact",
             "mDataProp": "Contact"
         },
         {
             "sName": "ContactPhone",
             "mDataProp": "ContactPhone"
         }
     ]
 });

第二部分：

加入全选，点击一行将Checkbox勾选功能，使用纯JS实现

      $(document).on('click', 'th input:checkbox', function() {
         var that = this;
         $(this).closest('table').find('tr > td:first-child input:checkbox')
             .each(function() {
                 this.checked = that.checked;
                 $(this).closest('tr').toggleClass('selected');
             });
     });

     //对行单击添加监听事件
     $('#example tbody').on('click', 'tr', function () {
         var tr = $(this).closest('tr');
         var checkbox = tr.find('td:first-child input:checkbox')[0];
         checkbox.checked = !checkbox.checked;

     });

全选，单击勾选

第三部分：

首先建立一个模态框（用BootStrap实现），然后双击在JS中控制来显示该模态框。最后用Ajax保存

 <div class="modal fade" id="newPopUp">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="True">&times;</button>
                 <h4 class="modal-title" id="newCustomerLabel">新增客户</h4>
             </div>
             <div class="modal-body">
                 <form class="form-horizontal" role="form" id="customerForm">
                     <div class="form-group">
                         <label for="inputName" class="col-sm-2 control-label">客户名称</label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputName" placeholder="客户名称"/>
                         </div>
                     </div>
                     ...
                 </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-success" onclick=" saveItem() ">保存</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
             </div>
         </div>
     </div>
 </div>

模态框

    //对行双击添加监听事件
    $('#example tbody').on('dblclick', 'tr', function () {
        var tr = $(this).closest('tr');
        var id = tr.find('td:first-child input:checkbox').val();//获取Checkbox的值
        editItem(id);
    });
    //编辑
    function editItem(id) {
        //更改模态窗口名称
        var modal = $('#newPopUp');
        modal.find('#newCustomerLabel').text("编辑");
        $.ajax({
            url: "/XXX/XXX/GetItem",
            type: "GET",
            data: { "Id": id },
            success: function (result) {
               //赋值
                $('#inputName').val(result.Name);
                ....
            }
        });
    }    

对行双击添加监听事件

     //保存
     function saveItem() {
         var name = $('#inputName').val();
         ...

         $.ajax({
             url: "/XXX/XXX/Post",
             type: "POST",
             data: { "Name": name....},
             success: function() {
                 $('#newPopUp').modal('hide');
                 reloadList();
             }
         });
     }

保存操作

第四部分：

将勾选的项删除，如果没有勾选项目，弹出提示对话框，实现也很简单。

     //删除操作
     function deleteItem() {
         //在此用了BootStrap的一个插件，BootStrap.Message,并中文化
         $.messager.model = {
             ok: { text: "确认", classed: 'btn-info' },
             cancel: { text: "取消", classed: 'btn-danger' }
         };
         //获取所有勾选ID
         var ids="";
         $('#example').find('tr > td:first-child input:checkbox')
             .each(function () {
                 if (this.checked) {
                     ids+=$(this).val()+",";
                 }
             });
         //如果没有勾选，提示
         if (ids === "") {
             $.messager.alert("请选择一行数据！");
             return;
         } else {
             ids = ids.substr(0, ids.length - 1);
         }

         $.messager.confirm("删除", "确认要删除吗？", function () {
             $.ajax({
                 url: "/XXX/XXX/Delete",
                 type: "Delete",
                 data: { "ids": ids },
                 success: function () {
                     reloadList();//重新加载
                 }
             });
         });
     }

删除操作

    //刷新
    function reloadList() {
        var tables = $('#example').dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    }

刷新