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

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

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

我需要'Category'作为内联编辑器下拉菜单,然后会有一个按钮来保存

Answer 1

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

• 检测点击行(你已经完成了这个)
• 从行中获取数据(完全没有硬)
• 使用该数据填充表单(可能在模态内)
• 提交表单后,使用新值更新服务器
• 更新服务器后更新行

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

Answer 2

I wrote my own code for editing inline and made it such that you can edit complete row and define the columns you want to be editable by user.

here : https://github.com/sinhashubh/datatable-examples

Steps to do this:

1. Handle click even on the clicked row/cell.

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

2. On pressing Enter after inputting anything, bind enter input (You can change it to maybe a save button as you like.

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

3. Update function to make call to server with parameters.

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