JQuery Datatables(一)

最近項目中用了Bootstrap的樣式風格，控件用了JQuery Datatables，主要有幾下幾點目標：

1. 實現BootStrap風格的table，使用Ajax獲取數據，並有勾選項
2. 能夠實現全選，單擊勾選
3. 雙擊行彈出編輯對話框，點擊保存使用Ajax傳送到服務端保存
4. 實現批量刪除
5. 分頁操做（下次再記錄）
6. 查詢操做（下次再記錄）
7. 排序操做（下次再記錄）

第一部分：

編寫一個只有thead的table，tbody會在JS函數中自動生成。

HMTL代碼以下：

 1             <table id="example" class="table table-striped table-bordered table-hover">
 2                 <thead>
 3                 <tr>
 4                     <th class="center">
 5                         <label class="position-relative">
 6                             <input type="checkbox" class="ace"/>
 7                             <span class="lbl"></span>
 8                         </label>
 9                     </th>
10                     <th>公司名稱</th>
11                     <th>簡稱</th>
12                     <th>所在城市</th>
13                     <th>地址</th>
14                     <th>聯繫人</th>
15                     <th>聯繫電話</th>
16                 </tr>
17                 </thead>
18 
19             </table>

直接在該Table上加入JS代碼

 1 $('#example').dataTable({
 2     "oLanguage": {    //語言設置
 3         "sProcessing": "正在加載中......",
 4         "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
 5         "sZeroRecords": "對不起，查詢不到相關數據！",
 6         "sEmptyTable": "表中無數據存在！",
 7         "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
 8         "sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",
 9         "sSearch": "搜索",
10         "oPaginate": {
11             "sFirst": "首頁",
12             "sPrevious": "上一頁",
13             "sNext": "下一頁",
14             "sLast": "末頁"
15         }
16     },
17     bAutoWidth: false,    //自動適應寬度
18     "bFilter": false, //查詢
19     "bSort": true, //排序
20     "bInfo": false, //頁腳信息
21     "bLengthChange": false, //改變每頁顯示數據數量
22     "bServerSide": true, //服務器數據
23     "sAjaxSource": '/XXX/XXX/GetList',
24     "bProcessing": true, //當datatable獲取數據時候是否顯示正在處理提示信息。 
25     "bPaginate": true, //顯示分頁器
26     "iDisplayLength ": 10, //一頁顯示條數
27     "aoColumns": [
28         {
29             //自定義列
30             "sName":"Id",        //Ajax提交時的列明（此處不太明白，爲何用兩個屬性--sName，mDataProp）
31             "mDataProp": "Id",    //獲取數據列名
32             "sClass": "center",    //樣式
33             "bStorable": false,    //該列不排序
34             "render": function(data, type, row) {    //列渲染
35                 return '<label class="position-relative">' +
36                     '<input type="checkbox" class="ace" value="'+data+'"/>' +
37                     '<span class="lbl"></span>' +
38                     '</label>';
39             }
40         },
41         {
42             "sName": "Name",
43             "mDataProp": "Name",
44             "bSearchable": true,    //檢索可用
45             "bStorable": true
46         },
47         {
48             "sName": "CustomerSN",
49             "mDataProp": "CustomerSN",
50             "bSearchable": false,
51             "bStorable": false
52         },
53         {
54             "mDataProp": "City",
55             "sName": "City"
56         },
57         {
58             "sName": "Address",
59             "mDataProp": "Address"
60         },
61         {
62             "sName": "Contact",
63             "mDataProp": "Contact"
64         },
65         {
66             "sName": "ContactPhone",
67             "mDataProp": "ContactPhone"
68         }
69     ]
70 });

第二部分：

加入全選，點擊一行將Checkbox勾選功能，使用純JS實現

 1      $(document).on('click', 'th input:checkbox', function() {
 2         var that = this;
 3         $(this).closest('table').find('tr > td:first-child input:checkbox')
 4             .each(function() {
 5                 this.checked = that.checked;
 6                 $(this).closest('tr').toggleClass('selected');
 7             });
 8     });
 9     
10     //對行單擊添加監聽事件
11     $('#example tbody').on('click', 'tr', function () {
12         var tr = $(this).closest('tr');
13         var checkbox = tr.find('td:first-child input:checkbox')[0];
14         checkbox.checked = !checkbox.checked;
15 
16     });

全選，單擊勾選

 

第三部分：

首先創建一個模態框（用BootStrap實現），而後雙擊在JS中控制來顯示該模態框。最後用Ajax保存

 1 <div class="modal fade" id="newPopUp">
 2     <div class="modal-dialog">
 3         <div class="modal-content">
 4             <div class="modal-header">
 5                 <button type="button" class="close" data-dismiss="modal" aria-hidden="True">&times;</button>
 6                 <h4 class="modal-title" id="newCustomerLabel">新增客戶</h4>
 7             </div>
 8             <div class="modal-body">
 9                 <form class="form-horizontal" role="form" id="customerForm">
10                     <div class="form-group">
11                         <label for="inputName" class="col-sm-2 control-label">客戶名稱</label>
12                         <div class="col-sm-10">
13                             <input type="text" class="form-control" id="inputName" placeholder="客戶名稱"/>
14                         </div>
15                     </div>
16                     ...
17                 </form>
18             </div>
19             <div class="modal-footer">
20                 <button type="button" class="btn btn-success" onclick=" saveItem() ">保存</button>
21                 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
22             </div>
23         </div>
24     </div>
25 </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);
                ....
            }
        });
    }    

對行雙擊添加監聽事件

 1     //保存
 2     function saveItem() {
 3         var name = $('#inputName').val();
 4         ...
 5 
 6         $.ajax({
 7             url: "/XXX/XXX/Post",
 8             type: "POST",
 9             data: { "Name": name....},
10             success: function() {
11                 $('#newPopUp').modal('hide');
12                 reloadList();
13             }
14         });
15     }

保存操做

第四部分：

將勾選的項刪除，若是沒有勾選項目，彈出提示對話框，實現也很簡單。

 1     //刪除操做
 2     function deleteItem() {
 3         //在此用了BootStrap的一個插件，BootStrap.Message,並中文化
 4         $.messager.model = {
 5             ok: { text: "確認", classed: 'btn-info' },
 6             cancel: { text: "取消", classed: 'btn-danger' }
 7         };
 8         //獲取全部勾選ID
 9         var ids="";
10         $('#example').find('tr > td:first-child input:checkbox')
11             .each(function () {
12                 if (this.checked) {
13                     ids+=$(this).val()+",";  
14                 }
15             });
16         //若是沒有勾選，提示
17         if (ids === "") {
18             $.messager.alert("請選擇一行數據！");
19             return;
20         } else {
21             ids = ids.substr(0, ids.length - 1);
22         }
23 
24         $.messager.confirm("刪除", "確認要刪除嗎？", function () {
25             $.ajax({
26                 url: "/XXX/XXX/Delete",
27                 type: "Delete",
28                 data: { "ids": ids },
29                 success: function () {
30                     reloadList();//從新加載
31                 }
32             });
33         });
34     }

刪除操做

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

刷新