沒有編輯器插件的數據表內聯編輯

Question

我正在為數據表使用“編輯器”插件，以下是代碼：

數據表編輯器定義為：

        editor = new $.fn.dataTable.Editor( {
        ajax: '/contact/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                    name: "id",
                  }, {
                    name: "category",
                    type: "check",
                    options: [
                              { label: 'Science', value: "Science" },
                              { label: 'Maths', value: 'Maths' },
                              { label: 'Economics', value: 'Economics' },
                             ]
                 }
                    ................
              ]
    });

.....

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
            } );

用這個附加頁面：當我們點擊類別時，它會顯示一個用於編輯的下拉列表（使用編輯器插件）。

但問題是數據表的編輯器插件不是開源的，我的項目根本不允許付費插件。

任何人都可以幫助我在沒有“編輯器”插件的情況下在數據表中進行內聯編輯嗎？

以下是我在沒有編輯器的情況下編寫的代碼：

Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/Contact/list/' + Contact.id,
                "dataSrc": function(check) {
                   check.id = Contact.id;
                   return json.check;
                  },
                },
            "responsive": true,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "category" },
                { "data": "course" },
                ]
        } );

類別和課程將是一個下拉列表 - 這必須是內聯編輯。 下面附上一個頁面示例。

我需要“類別”作為內聯編輯器下拉菜單，然后會有一個按鈕來保存

Answer 1

數據表搖滾！ SpryMedia讓我們免費玩它！ 我不是100％肯定我已經使用了編輯器插件盡管購買它但我很高興我以某種方式為其開發做出了貢獻。 我沒有使用過這個插件的主要原因之一是因為我太過於無法承受它一段時間所以寫了我自己的版本，這真的不那么難。 步驟很簡單：

• 檢測點擊行（你已經完成了這個）
• 從行中獲取數據（完全沒有硬）
• 使用該數據填充表單（可能在模態內）
• 提交表單后，使用新值更新服務器
• 更新服務器后更新行

該插件使這一切變得簡單，並允許您找出后端。 上面的步驟並不是那么困難，但除了編輯器插件之外，我沒有遇到任何事情。 完成這些步驟，你就會到達那里。

Answer 2

我編寫了自己的內聯編輯代碼，使得您可以編輯完整的行並定義您希望用戶可編輯的列。

這里： https ： //github.com/sinhashubh/datatable-examples

執行此操作的步驟：

1. 即使在單擊的行/單元格上也可以單擊。

     $("#dtexample tbody").on('click', 'tr td', function (e) { RoweditMode($(this).parent()); }); function RoweditMode(rowid) { var prevRow; var rowIndexVlaue = parseInt(rowid.attr("indexv")); if (editIndexTable == -1) { saveRowIntoArray(rowid); rowid.attr("editState", "editState"); editIndexTable = rowid.rowIndex; setEditStateValue(rowid, rowIndexVlaue + 2); } else { prevRow = $("[editState=editState]"); prevRow.attr("editState", ""); rowid.attr("editState", "editState"); editIndexTable = rowIndexVlaue; saveArrayIntoRow(prevRow); saveRowIntoArray(rowid); setEditStateValue(rowid, rowIndexVlaue + 2); } } function saveRowIntoArray(cureentCells) { $.each(ColumnData, function (index, element) { if (element.Editable == true) { var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html(); EditRowData[element.Name] = htmlVal; } }); } function setEditStateValue(td1, indexRow) { for (var k in EditRowData) { $($(td1).children('.' + k)[0]).html('<input value="' + EditRowData[k] + '" class="userinput" style="width: 99% " />'); } } 

2. 在輸入任何內容后按Enter鍵，輸入enter輸入（您可以根據需要將其更改為可能的保存按鈕。

     $("#dtexample tbody").on('keyup', 'input.userinput', function (e) { if (e.keyCode == 13) { updateRowData(this.parentNode.parentNode); } }); 

3. 更新功能以使用參數調用服務器。

     function updateRowData(currentCells) { var table = $("#dtexample").DataTable(); var row = table.row(currentCells); rowid = currentCells.getAttribute('id'); var UpdateRowData = []; $.each(ColumnData, function (index, element) { if (element.Editable==true) { UpdateRowData.push({ 'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val() }); } }); console.log(UpdateRowData); UpdateRowData.push({ 'pname': 'rowid', 'pvalue': rowid }); var parameter = ""; for (i = 0; i < UpdateRowData.length; i++) { if (i == UpdateRowData.length - 1) parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue; else parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&"; } $.ajax({ type: 'POST', url: '/WebService.asmx/UpdateTableData', data: parameter, success: function (data) { var table = $('#dtexample').DataTable(); table.draw('page'); } }); } 

Answer 3

編輯器許可證讓我很不爽，所以我來這里是為了拯救你的許可證。

這是我的做法：

1. 創建表格時，將“editable”類添加到您要編輯的任何元素

   example = new DataTable('#example', { columns: [ { data: 'domain', name: 'domain' }, { data: 'owner1', name: 'owner1', className: 'editable' }, { data: 'owner2', name: 'owner2', className: 'editable' }, { data: 'description', name: 'description', className: 'editable' }, { data: 'account_state', name: 'account-state' }, ], });

2. 為您進入/退出 td 時創建鼠標事件。 我選擇用鼠標懸停創建一個輸入元素，因為我不希望到處都是實際的 html 輸入

   // when the mouse enters a cell, create an editor. $('#example').on('mouseenter', 'td.editable', function (e) { e.preventDefault() // I'm a noob, don't know what this means // I think there is some delay on when the events trigger // so sometimes the cell still contains the input element and this check // prevents accidently creating another input element if (e.target.localName != 'input') { let row = e.target._DT_CellIndex.row let col = e.target._DT_CellIndex.column if (!e.target.children.length) { e.target.innerHTML = `<input id="${row}-${col}" type="text" class="editor" value="${e.target.innerHTML}">` } } }) // when the mouse exits the editor, write the data into the table and redraw $('#example').on('mouseleave', 'td.editable', function (e) { e.preventDefault() if (e.target.localName != 'input') { let row = e.target._DT_CellIndex.row let col = e.target._DT_CellIndex.column data_table.cell(row, col).data(e.target.firstElementChild.value) data_table.draw() // up to you } else { // forces write when there is an event delay let [row, col] = e.target.id.split('-') data_table.cell(Number(row), Number(col)).data(e.target.value) } data_table.draw() })

就是這樣！

我的表最多大約有 2000 個條目（絕對仍然可用），但我確信有性能改進，我很想知道它們！