无编辑插件的可数据内嵌编辑 [英] Datatable inline editing without editor plugin

问题描述

我正在使用数据表的编辑器插件，其代码如下：

数据表编辑器定义为：

  editor = new $ .fn.dataTable.Editor（{
 ajax：'/ contact /'+ Contact.id，
 table：＃ contact-datatable，
 fields：[{
 name：id，
}，{
 name：category，
 type：check 
选项：[
 {label：'Science'，value：Science}，
 {label：'Maths'，value：'Maths'}，
 {label： 经济学，价值：经济学，
] 
} 
 ................ 
] 
 }）; 
  

.....

<$ p $ （'click'，'tbody td：not（：first-child）'，function（e）{
editor.inline（这个，{submitOnBlur：true}）;
}）;

使用以下方式附加页面：当我们点击类别时，它显示一个编辑下拉菜单（使用编辑器插件）

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

任何人都可以通过编辑器插件帮助我在数据库中进行内联编辑？

以下是我没有编辑器的代码： p>

  Contact.dataTable = $（'＃contact-datatable'）。dataTable（{
ajax：{
url：'/ Contact / list /'+ Contact.id，
dataSrc：function（check）{
 check.id = Contact.id; 
 return json。检查; 
}，
}，
响应：true，
订单：[]，
列：[
 {数据：id}，
 {data：category} ，
 {data：course}，
] 
}）; 
  

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

我需要类别作为内联编辑器下拉列表，然后将有一个按钮来保存

解决方案

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

• 检测点击行（你已经这样做了）


• 从行中获取数据（不是很难）


• 使用该数据填充表单（可能在模式中）


• 更新服务器一旦表单被提交，新的值就会出现


• 更新服务器一次更新

该插件使所有这一切都容易，并允许您找出后端。上面的步骤并不是那么困难，但是我没有遇到任何事情，除了编辑器插件。通过步骤操作，您将到达那里。

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

Data table editor defined as:

        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 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:

• Detect click on row (you've already done this)
• Get the data from the row (not at all hard)
• Populate a form with that data (probably within a modal)
• Update the server with the new values once the form is submitted
• Update the row once the server has been updated

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屋！