Jquery UI Datatable:以文本框为列向表中添加行
本文关键字:添加行 Datatable UI 文本 Jquery | 更新日期: 2023-09-27 18:14:39
我试图添加一行到数据表没有运气与文本框和复选框作为列。我能够轻松地添加其他列,但一个与文本框和复选框不知道如何做到这一点。计算文本框和复选框id,并将其类型附加到第一列值。我想知道实现这一目标的好方法是什么?我不希望克隆一行,因为可能有场景,我的表可能没有任何数据。什么好主意吗?
下面是客户端代码:$(function () {
var tableOpts = {
"sPaginationType": "full_numbers",
"sScrollY": "150px",
"bFilter": false,
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('id', aData[0]);
var txtBox = $(nRow).find("input[type=text]");
txtBox.attr('id', 'text-' + aData[0]);
var checkBox = $(nRow).find("input[type=checkbox]");
checkBox.attr('id', 'check-' + aData[0]);
}
}
var table1 = $('#table1').dataTable(tableOpts);
$('#divButton').find('.toggle').on('click', function () {
table1.fnAddData([4, 'Windows 7',7.1]);
});
});
这是JSFiddle
你可以试试:
$(function () {
var tableOpts = {
"sPaginationType": "full_numbers",
"sScrollY": "150px",
"bFilter": false,
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('id', aData[0]);
var txtBox = $(nRow).find("input[type=text]");
txtBox.attr('id', 'text-' + aData[0]);
var checkBox = $(nRow).find("input[type=checkbox]");
checkBox.attr('id', 'check-' + aData[0]);
}
}
var table1 = $('#table1').dataTable(tableOpts);
var textbox = '<input type="text" class="txtBox">';
var checkbox = '<input type="checkbox">';
$('#divButton').find('.toggle').on('click', function () {
table1.fnAddData([table1.fnSettings().fnRecordsTotal() + 1, 'Windows 7',7.1, textbox, checkbox]);
});
});
这是FIDDLE
您应该使用列呈现,而不是fnCreatedRow
/createdRow
。下面是一些如何插入各种<form>
<input>
元素的示例:
...
aoColumnDefs : [
{ aTargets : [1],
mRender : function(data, type, full) {
return '<input type="text" value="'+data+'"/>'
}
},
{ aTargets : [2],
mRender : function(data, type, full) {
return '<input type="checkbox" checked="checked"/>'
}
},
{ aTargets : [3],
mRender : function(data, type, full) {
return '<textarea>'+data+'</textarea>'
}
}
]
使用了"老式"匈牙利符号,它在1.9中都有效。X和1.10。X版本的数据表。一个小的演示(只是将aoColumnDefs
添加到现有的演示中,它除了演示之外没有任何意义)-> http://jsfiddle.net/f6fqa641/