[英]Update text inputs with Datatable row info and edit row from dialog
我有一个要从对话框中编辑的数据表。 用户应选择一行,然后打开对话框。 对话框文本输入应与选定行td匹配。 在这里,您可以编辑/更改输入(通过单击单击以启用字段)并保存更改以更新表。 http://jsfiddle.net/BWCBX/5/我有工作代码来选择一行并(在这种情况下将其删除)对其进行操作。 如何更新文本输入并从这些输入编辑表格? 提前致谢。
var oTable;
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length !== 0 ) {
oTable.fnDeleteRow( anSelected[0] );
}
} );
/* Init the table */
oTable = $('#example').dataTable( );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}
您可以像这样更新输入和数据表
HTML将id添加到输入
<div id="dialog" title="Properties">
<table>
<tbody>
<tr>
<th>Rendering engine</th>
<td><input id="rendering" type='text' /></td>
</tr>
<tr>
<th>Browser</th>
<td><input id="browser" type='text' /></td>
</tr>
</tbody>
</table>
<input type='button' value='Edit' class='editBtn' />
<input type='button' value='Save Changes' class='saveBtn' />
</div>
JS
var properties;//all td from .row_selected
$( "#opener" ).click(function() {
properties=fnGetSelected( oTable ).find("td"); //update selected row
$( "#dialog" ).dialog( "open" );
$( ".saveBtn" ).hide();
//update the input fields
$("#rendering").val(properties.eq(0).html());
$("#browser").val(properties.eq(1).html());
$( ".editBtn" ).show();
$("div#dialog input:text").attr("disabled", "disabled");
});
//update the dataTable with the input values and close #dialog
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#rendering").val());
properties.eq(1).html($("#browser").val());
$( "#dialog" ).dialog( "close" );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.