没有编辑器插件的数据表内联编辑 [英] Datatable inline editing without editor plugin

问题描述

我在数据表中使用了编辑器"插件，代码如下:

I was using 'editor' plugin for data table and following was the code:

数据表编辑器定义为:

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

用这个附加页面:当我们点击类别时，它会显示一个用于编辑的下拉菜单(使用编辑器插件).

Attaching the page with this: When we click on Category, it shows a dropdown for editing (using editor plugin).

但问题是数据表的编辑器插件不是开源的，我的项目根本不允许付费插件.

But the problem is datatables' editor plugin is not opensource and my project doesn't allow a payable plugin at all.

谁能帮我在没有编辑器"插件的情况下对数据表进行内联编辑?

Can anyone please help me for inline editing in datatables with out 'editor' plugin?

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

Following is the code I wrote without 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 and Course will be a dropdown - and this has to be edit inline. Below attached a page example.

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

I need 'Category' as an inline editor dropdown and then there will be a button to save

推荐答案

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

Datatables rock! And SpryMedia let us play with it for free! I'm not 100% sure I've used the Editor Plugin despite buying it but I am pleased that I've contributed to its development in some way. One of the main reasons I've not used the plugin is because I was too skint to afford it for a while so wrote my own versions and that's really not that difficult. The steps are quite simple:

• 检测点击行(你已经完成了)
• 从行中获取数据(一点也不难)
• 使用该数据填充表单(可能在模态中)
• 提交表单后用新值更新服务器
• 更新服务器后更新行

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

The plugin makes all that easy and allows you to figure out the backend as well. The steps above aren't all that difficult but I've not come across something that does it all for you except for the Editor Plugin. Work through the steps and you'll get there.

这篇关于没有编辑器插件的数据表内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！