Question

我在表单中有 responsive DataTable 。 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传递数据。

Answer 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以获取代码和演示。

<强>链接

保存子行中输入的值 - DataTables

1 个答案: