克隆数据表中的选定行
Clone a selected row in DataTables?
本文关键字:数据表 更新时间:2023-09-26
我目前可以删除选定的行,现在我想复制/克隆选定的行。有时向数据表添加行可能很棘手,因为分页不会更新,因此克隆和追加。
http://jsfiddle.net/BWCBX/30/
jQuery
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');
}
为了尊重jquery数据表的分页,克隆方法应该调用fnAddData函数,
$('#clone').click( function() {
var anSelected = fnGetSelected( oTable );
console.log(anSelected);
var data=[];
$(anSelected).find('td').each(function(){data.push($(this).text());});
oTable.fnAddData( data );
} );
http://jsfiddle.net/BWCBX/32/
您还需要将用于选择的单击侦听器添加到这些新行中。
例如
$('#clone').click( function() {
var anSelected = fnGetSelected( oTable );
var data=[];
$(anSelected).find('td').each(function(){data.push($(this).html());});
var row=oTable.fnAddData( data );//returns the index of the row added
$(oTable.fnGetNodes(row)).click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
} );
http://jsfiddle.net/BWCBX/33/
我使用.clone()
jQuery实现,参见:jsfiddle
$('#clone').click(function(){
var anSelected = fnGetSelected( oTable );
anSelected.clone().insertAfter( $("table").find("tr").last());
$("table").find("tr").last().removeClass("row_selected");
});
希望这个帮助
相关文章:
- 用程序搜索JQuery数据表中的文本
- 具有rowGrouping的数据表无法隐藏列
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 将单击事件添加到数据表
- 使用带有参数的数据表sAjaxSource
- 对角度数据表中括号内的数字进行排序
- 动态构建一个数据表与scriplets
- jquery数据表的自定义ko绑定
- 预览数据表单
- 如何在数据表中设置从Ajax响应选中的复选框
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 数据表-隐藏/显示列
- 对损坏的子行进行排序的数据表
- 数据表排序但对行进行分组
- 数据表1.10,第列.转发器使用情况
- 如何将JSON编码的PHP数组发送到同一页面上的数据表
- jquery数据表在初始化时设置宽度
- Laravel数据表无效的JSON响应
- 数据表通过分析一列的值对其进行排序
- 如何通过下拉值更改来更改jquery数据表的值