gpt4 book ai didi

jquery - 将输入值保存在子行中 - 数据表

转载 作者:行者123 更新时间:2023-12-03 23:05:24 30 4
gpt4 key购买 nike

我有 responsive 表单中的数据表数据表生成 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 .

Annotation

For some our internal problems I cannot use DataTables Ajax method -it would be very slow and against application logic. Thats why I amtrying pass data from DataTable by classic Form.

最佳答案

SOLUTION

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

您需要使用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); }
});
});

DEMO

参见this jsFiddle用于代码和演示。

LINKS

关于jquery - 将输入值保存在子行中 - 数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33391297/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com