没有编辑器插件的数据表内联编辑

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 个条目（绝对仍然可用），但我确信有性能改进，我很想知道它们！