将输入值保存在子行中 - DataTables

Posted 2023-05-07

【中文标题】将输入值保存在子行中 - DataTables

【英文标题】：Save values of inputs in child rows - DataTables

【发布时间】：2016-01-28 05:47:03

【问题描述】：

我在 Form 中有 responsiveDataTable。 DataTables 在小型设备上生成 child rows。在这一行中，我有一些输入控件。这会导致两个问题。

第一个问题：**来自隐藏子行的值不会进入表单数据。**

第二个问题：** 值在编辑此输入并隐藏行后消失。**

有人可以帮帮我吗？

谢谢

更新

.DataTable()

之前的简化tbody

<tbody>
    <tr>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>
            <input name="1" type="text"/>
        </td>
        <td>
            <input name="2" type="text"/>
        </td>
        <td>
            <input name="3" type="text" value="example"/>
        </td>
    </tr>               
</tbody>

.DataTable()

之后

<tbody>    
    <tr role="row" class="odd">
        <td class="sorting_1">System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
    </tr>
</tbody>

并展开

<tbody>  
  <tr role="row" class="odd parent">
    <td class="sorting_1">System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>              
  </tr>
  <tr class="child">
    <td class="child" colspan="3">
      <ul data-dtr-index="0">
        <li data-dtr-index="3">
          <span class="dtr-title">Age:</span>
          <span class="dtr-data">
            <input name="1" type="text" style="background-image: ; background-       attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </span>
         </li>
         <li data-dtr-index="4">
           <span class="dtr-title">Start date:</span>
           <span class="dtr-data">
             <input name="2" type="text"></span>
         </li>
         <li data-dtr-index="5">
           <span class="dtr-title">Salary:</span>
           <span class="dtr-data">
             <input name="3" type="text" value="example">
           </span>
         </li>
       </ul>
     </td>
  </tr>
</tbody>

所有简化代码看起来像 this fiddle。

注释

对于我们的一些内部问题，我不能使用 DataTables Ajax 方法 - 它会非常慢并且违反应用程序逻辑。这就是为什么我 尝试通过经典表单从 DataTable 传递数据。

【问题讨论】：

如果不查看创建子行的代码，就无法理解这一点。

我刚刚更新了我的问题。我建议在 fiddle 查看代码并尝试将其提交 un/expanded。

这是一个很好的问题，我想我可能会有答案。如果您不介意等待一两天，我会在这里发布解决方案。

非常感谢，我会很高兴有任何线索。所以现在，我只知道通过这些步骤解决第二个问题：获取输入值（在 focusout 上）-> 通过 DT.data() 从表中获取数据-> 在此数据中更改此特定输入的值-> DT.clear( ) -> DT.rows.add(edited data) -> DT.draw()... 但是这个解决方案会在每次编辑时折叠表格行

【参考方案1】：

解决方案

下面不是一个理想的解决方案，但至少它有效。我没有测试隐藏的表单元素，而且这个解决方案不适用于同一单元格中的多个表单元素。

您需要使用columnDefs 来定位包含表单元素的所有列，并使用render 选项定义一个函数，该函数将返回包含当前表单字段值的html。这是在子行中呈现正确的表单字段所必需的。

另外，当用户更改子行中表单域的值时，需要更新父表单域。

$(document).ready(function ()
   var table = $('#example').DataTable(
      'columnDefs': [
         
            'targets': [1, 2, 3, 4, 5],
            'render': function(data, type, row, meta)
               if(type === 'display')
                  var api = new $.fn.dataTable.Api(meta.settings);

                  var $el = $('input, select, textarea', api.cell( row: meta.row, column: meta.col ).node());

                  var $html = $(data).wrap('<div/>').parent();

                  if($el.prop('tagName') === 'INPUT')
                     $('input', $html).attr('value', $el.val());
                     if($el.prop('checked'))
                        $('input', $html).attr('checked', 'checked');
                     
                   else if ($el.prop('tagName') === 'TEXTAREA')
                     $('textarea', $html).html($el.val());

                   else if ($el.prop('tagName') === 'SELECT')
                     $('option:selected', $html).removeAttr('selected');
                     $('option', $html).filter(function()
                        return ($(this).attr('value') === $el.val());
                     ).attr('selected', 'selected');
                  

                  data = $html.html();
               

               return data;
            
         
      ],
      'responsive': true
   );

   // Update original input/select on change in child row
   $('#example tbody').on('keyup change', '.child input, .child select, .child textarea', function(e)
       var $el = $(this);
       var rowIdx = $el.closest('ul').data('dtr-index');
       var colIdx = $el.closest('li').data('dtr-index');
       var cell = table.cell( row: rowIdx, column: colIdx ).node();
       $('input, select, textarea', cell).val($el.val());
       if($el.is(':checked')) $('input', cell).prop('checked', true); 
   );
);

演示

有关代码和演示，请参阅this jsFiddle。

链接

jQuery DataTables – Form inputs with Responsive extension。 Discussion on DataTables.net forum

【讨论】：

它有可能被形式化并变成一个插件。不是因为它是顽固的编程，而是因为很多很多人需要这个功能——我猜。

@davidkonrad，我正在考虑，但我想在想出插件之前给出答案。

@Gyrocode.com，感谢您的解决方案，它非常适合第二个问题。我将我的问题分成两个单独的问题，以便我可以将其标记为答案。我只有一个建议，如果你打算把它变成插件。如果您还可以在单​​元格中包含对多个输入/选择/文本区域的支持，那就太好了。

@DanielTreml，我没有测试隐藏的表单元素，这也不适用于单元格中的多个表单元素。我也会改进这个解决方案来支持它。

@DanielTreml，没问题。你能解释隐藏元素的问题吗？您是否动态修改值？你能分享一个例子吗，因为你发布的问题没有隐藏元素？