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

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

类别和类(class)将是一个下拉列表 - 这必须是内联编辑。下面附上一个页面示例。

我需要“类别”作为内联编辑器下拉菜单，然后会有一个按钮来保存

Answer 1

数据表摇滚! SpryMedia 让我们免费玩它!尽管购买了编辑器插件，但我不能 100% 确定我是否使用过它，但我很高兴我以某种方式为它的开发做出了贡献。我没有使用该插件的主要原因之一是因为我太瘦了，暂时买不起它，所以写了我自己的版本，这真的没那么难。步骤非常简单:

检测点击行(你已经这样做了)

从行中获取数据(一点也不难)

使用该数据填充表单(可能在模式中)

提交表单后使用新值更新服务器

更新服务器后更新行

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