Question

我在数据表中使用'editor'插件，以下是代码：

数据表编辑器定义为：

        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 } );
            } );

使用此页面附加页面：当我们点击Category时，它会显示一个下拉列表进行编辑（使用编辑器插件）。

但问题是datatables的编辑器插件不是开源的，我的项目根本不允许应付插件。

任何人都可以帮助我使用'编辑'插件帮助我在数据表中进行内联编辑吗？

以下是我在没有编辑的情况下编写的代码：

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

Datatables摇滚！ SpryMedia让我们免费玩它！我不是100％肯定我已经使用了编辑器插件尽管购买它但我很高兴我以某种方式为其开发做出了贡献。我没有使用过这个插件的主要原因之一是因为我太过于无法承受它一段时间所以写了我自己的版本，这真的不那么难。步骤很简单：

检测点击行（您已经完成此操作）
从行中获取数据（完全没有硬）
使用该数据填充表单（可能在模态内）
提交表单后，使用新值更新服务器
服务器更新后更新行

该插件使这一切变得简单，并允许您找出后端。上面的步骤并不是那么困难，但除了编辑器插件之外，我没有遇到任何事情。完成这些步骤，你就可以到达那里。

Answer 2

我编写了自己的代码以进行内联编辑，并使其可以编辑完整的行并定义要由用户编辑的列。

此处：https://github.com/sinhashubh/datatable-examples

执行此操作的步骤：

即使在被单击的行/单元格上也可以单击。

           $("#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% " />');
            }
        }

在输入任何内容后按Enter键，绑定回车输入（您可以根据需要将其更改为保存按钮。

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

更新功能以使用参数调用服务器。

         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');
                }
            });
        }

无编辑器插件的数据表内联编辑

2 个答案: