Datatable内联编辑，无需编辑器插件。

5 浏览
0 Comments

Datatable内联编辑，无需编辑器插件。

我之前在数据表格中使用了“editor”插件，以下是代码：

数据表格编辑器定义如下：

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

.....

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

附上页面：当我们点击“Category”时，它会显示一个下拉框以进行编辑（使用了编辑器插件）。

但问题在于datatables的编辑器插件不是开源的，而且我的项目不允许使用付费插件。

有人能帮我实现datatables中的行内编辑，而不使用“editor”插件吗？

以下是我不使用编辑器编写的代码：

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" },
                ]
        } );

“Category”和“Course”将是一个下拉框 - 这必须是行内编辑。下面附上一个页面示例。

我需要“Category”作为一个行内编辑器的下拉框，然后会有一个保存按钮。

0