datatables表格行內編輯的實現

時間 2019-11-21

標籤 datatables 表格編輯實現简体版

原文原文鏈接

Datatables是一款jquery表格插件，它是一個高度靈活的工具，靈活就意味着不少功能須要本身去實現，好比說行內編輯功能。css

Datatables本身是沒有行內編輯功能的，最簡單的是經過modal彈窗增改數據實現表格數據的修改，行內編輯我是經過操做DOM實現的，話很少說，先看效果圖以下：html

index.htmljquery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
10     <link href="datatables/css/dataTables.bootstrap.min.css" rel="stylesheet">
11     <style>
12         body,
13         html {
14             margin: 0;
15             padding: 0;
16         }
17 
18         .gridArea {
19             padding: 10px;
20         }
21     </style>
22 </head>
23 
24 <body>
25     <div class="gridArea">
26         <table id="myGrid" class="nowrap table table-striped table-bordered table-hover table-condensed" cellspacing="0"
27             width="100%">
28             <thead>
29                 <tr>
30                     <th>顯示名稱</th>
31                     <th>屬性名稱</th>
32                     <th>可爲空</th>
33                     <th>關聯關係</th>
34                     <th>屬性類型</th>
35                 </tr>
36             </thead>
37 
38         </table>
39     </div>
40 
41 
42     <script src="jquery/jquery-1.12.3.min.js"></script>
43     <script src="datatables/js/jquery.dataTables.min.js"></script>
44     <script src="datatables/js/dataTables.bootstrap.min.js"></script>
45     <script src="index.js"></script>
46 </body>
47 
48 </html>

index.js

 1 function createCombox(data) {
 2     var _html = '<select style="width:100%;">';
 3     data.forEach(function (ele, index) {
 4         _html += '<option>' + ele + '</option>';
 5     });
 6     _html += '</select>';
 7     return _html;
 8 }
 9 
10 $(function () {
11     var editTableObj;
12     var comboData = {
13         "2": ["是", "否"],
14         "3": ["ManyToOne", "OneToMany", "無"],
15         "4": ["String", "Long", "Integer", "Boolean", "Date", "當前實體"]
16     };
17     var setting = {
18         columns: [
19             { "data": "display" },
20             { "data": "name" },
21             { "data": "nullable" },
22             { "data": "relation" },
23             { "data": "type" }
24         ],
25         columnDefs: [{
26             "targets": [0, 1],
27             createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
28                 $(cell).click(function () {
29                     $(this).html('<input type="text" size="16" style="width: 100%"/>');
30                     var aInput = $(this).find(":input");
31                     aInput.focus().val(cellData);
32                 });
33                 $(cell).on("blur", ":input", function () {
34                     var text = $(this).val();
35                     $(cell).html(text);
36                     editTableObj.cell(cell).data(text)
37                 })
38             }
39         }, {
40             "targets": [2, 3, 4],
41             createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
42                 var aInput;
43                 $(cell).click(function () {
44                     $(this).html(createCombox(comboData[colIndex]));
45                     var aInput = $(this).find(":input");
46                     aInput.focus().val("");
47                 });
48                 $(cell).on("click", ":input", function (e) {
49                     e.stopPropagation();
50                 });
51                 $(cell).on("change", ":input", function () {
52                     $(this).blur();
53                 });
54                 $(cell).on("blur", ":input", function () {
55                     var text = $(this).find("option:selected").text();
56                     editTableObj.cell(cell).data(text)
57                 });
58             }
59         }],
60         data: [{
61             "display": "1",
62             "name": "",
63             "nullable": null,
64             "relation": null,
65             "type": null,
66         }],
67         ordering: false,
68         paging: false,
69         info: false,
70         searching: false,
71     };
72     editTableObj = $("#myGrid").DataTable(setting);
73 });

核心代碼如上，重點是columnDefsgit

官網上的說明是github

和 columnsOption 參數很像，這個參數容許你給指定列設置選項，應用到一個或這多個列。而不像 columnsOption 須要每列都要定義bootstrap

這個參數是一個列定義對象數組，經過使用 columnDefs.targets 選項，告訴Datatables是定義的是那一列，他能夠是下列狀況：數組

0或者正整數-列從左到右是從0開始

一個負數-列從右到左的索引(-1表明最後一列)

一個字符串-將字符串和類名匹配列

字符串"_all"-全部列

另外， targets能夠同時指定多列，接受一個數組（好比 targets: [ -1, -2 ] ）dom

createCell能夠操做指定的DOM，它的五個參數分別是：td節點，單元格里的數據，正行的數據對象，單元格的行索引，單元格的列索引。工具

由於序號列和單選佔據了0和1因此從2開始，target爲2和3的編輯形式是text，target爲4/5/6的編輯形式是select，其餘的編輯形式也能夠。ui

text形式的是點擊單元格的時候出現文本框而且手動讓其得焦，失去焦點的時候改變單元格的數據，這個很容易理解，惟一要注意的是，改變單元格數據的時候不能直接操做dom，那樣的話只是修改了頁面中節點內容，獲取表格數據的時候會發現表格數據仍是沒有變化。修改單元格的數據要用到table.cell().data()這個方法，能夠獲取和修改單元格的數據，cell的參數是要操做的單元格的dom節點，data不傳參數是獲取數據，傳入參數是修改數據。

select形式遇到了一個坑，就是在點擊單元格出現select下拉框後，發現下拉不下來，後來發現是由於點擊select下拉框的時候觸發了事件冒泡，致使又執行了一遍點擊單元格的事件，因此select又從新生成了一遍致使展不開。因此給select的點擊事件里加了阻止事件冒泡 e.stopPropagation()。另外原本打算點擊單元格的時候出現下拉框而且自動展開，選擇一項後select消失而且把數據放進去，結果發現select標籤貌似不支持js展開，看了下其它網上的例子都是本身用div模擬的select來展開的，退而求其次就點擊單元格後再次手動點擊select讓它展開，之後有需求再用模擬的方式修改。

Datatables確實功能不少，自由度很是高，可是文檔很分散，之後要多多整理才能熟練起來。

最後附一下Datatables中文網連接：http://www.datatables.club/

demo已上傳github：https://github.com/gaiyabing/datatable-edit-inline

預覽地址：https://gaiyabing .github.io/datatable-edit-inline/index.html