保存子行中的输入值 - DataTable [英] Save values of inputs in child rows - DataTables
问题描述
我已经在表单中回复 DataTable >。 数据表在小型设备上生成子行。在这行中我有一些输入控件。这导致两个问题。
第一个问题： 隐藏的子行中的值不会进入Form数据。 / strong>
第二个问题： 编辑此输入和隐藏行后，值将消失。 / p>
有人可以帮我吗？
谢谢
更新
在之前简化tbody .DataTable（）
< tbody>
< tr>
< td>系统架构师< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< td>
< input name =1type =text//>
< / td>
< td>
< input name =2type =text/>
< / td>
< td>
< input name =3type =textvalue =example/>
< / td>
< / tr>
< / tbody>
之后 .DataTable（）
< tbody>
< tr role =rowclass =odd>
< td class =sorting_1> System Architect< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< / tr>
< / tbody>
并展开
code>< tbody>
< tr role =rowclass =odd parent>
< td class =sorting_1> System Architect< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< / tr>
< tr class =child>
< td class =childcolspan =3>
< ul data-dtr-index =0>
< li data-dtr-index =3>
< span class =dtr-title>年龄：< / span>
< span class =dtr-data>
< input name =1type =textstyle =background-image：; background- attachment：scroll; background-position：100％50％; background-repeat：no-repeat;> ;
< / span>
< / li>
< li data-dtr-index =4>
< span class =dtr-title>开始日期：< / span>
< span class =dtr-data>
< input name =2type =text>< / span>
< / li>
< li data-dtr-index =5>
< span class =dtr-title>工资：< / span>
< span class =dtr-data>
< input name =3type =textvalue =example>
< / span>
< / li>
< / ul>
< / td>
< / tr>
< / tbody>
所有简化的代码看起来像 这个小提琴。
strong>
对于我们的一些内部问题，我无法使用DataTables Ajax方法 -
它将非常慢，而且与应用程序逻辑。这就是为什么我是
尝试通过经典表单从DataTable传递数据。
解决方案
以下不是一个理想的解决方案，但至少它是有效的。我没有测试隐藏的表单元素，而且这个解决方案也不能在同一单元格中使用多个表单元素。
您需要使用 columnDefs 定位包含form元素的所有列，并使用 render 选项定义一个函数，返回包含当前的HTML表单字段值。这是必要的，以便在子行中呈现正确的表单字段。
此外，当用户更改子行中的表单字段的值时，需要更新父表单字段。
$（document）.ready（function（）{
var table = $ （'#example'）。DataTable（{
'columnDefs'：[
{
'targets'：[1，2，3，4，5]，
' '：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（）;
}
返回数据;
}
}
]，
'respond'：true
}）;
//更新子行
$（'＃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}）。
$（'input，select，textarea'，cell）.val（$ el.val（））;
if（$ el.is（'：checked'））{$（'input' ，cell）.prop（'checked'，true）;}
}）;
}）;
DEMO
请参阅此jsFiddle 代码和
LINKS
I have responsive DataTable in Form. DataTables generate child rows on small devices. In this rows I have some Input controls. And that causes two problems.
First problem: Values from hidden child rows does not get into Form data.
Second problem: Values disappear after editing this inputs and hide row.
Can someone please help me out?
Thanks
Update
Simplified tbody before .DataTable()
<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>
After .DataTable()
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
</tbody>
And expanded
<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>
All simplified code looks like 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 am trying pass data from DataTable by classic Form.
SOLUTION
Below is not an ideal solution but at least it works. I haven't tested hidden form elements and also this solution will not work with multiple form elements in the same cell.
You need to use columnDefs to target all columns containing form element and using render option define a function that will return HTML containing current form field value. This is necessary to render correct form field in child row.
In addition, parent form field needs to be updated when user changes value of the form field in child row.
$(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
See this jsFiddle for code and demonstration.
LINKS
这篇关于保存子行中的输入值 - DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
