JQuery-向表中动态添加第三个展开行
JQuery - dynamically adding a 3rd expand row to a table
我使用JQuery中的DataTable创建了一个表(在documentReady上)。
table = $('#transaction').DataTable({
"ajax": {
"url": "servicingTransactionsLoad.do",
"type": "GET",
"dataSrc": function (json) {
for (var i = 0, ien = json.transactions.length; i < ien; i++) {
json.transactions[i].date = '<i class="icon-expand-handle color--secondary9 fa fa-plus"></i> ' + json.transactions[i].date;
}
return json.transactions;
}
},
"columns": [
{ "data": "date" },
{ "data": "description" },
{ "data": "channel" },
{ "data": "amount" }
],
"order": [
[ 0, "desc" ]
]
});
我有一个事件,当你点击行展开并提供额外信息时会触发:
$('#transaction tbody').on('click', 'tr', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tr.find('.icon-expand-handle').removeClass('fa-minus');
tr.find('.icon-expand-handle').addClass('fa-plus');
}
else {
// Open this row
row.child( createExpand2(row.data()) ).show();
tr.addClass('shown');
tr.find('.icon-expand-handle').removeClass('fa-plus');
tr.find('.icon-expand-handle').addClass('fa-minus');
}
});
createExpand2是一个构建一个表的方法,该表被添加为子表以提供额外的信息。
function createExpand2 (d) {
// `d` is the original data object for the row
return '<table width="100%" border="0" cellspacing="0" cellpadding="0">'+
'<tr>'+
'<td class="col-sm-3">Date Posted:'+
'<br>' + d.datePosted+'</td>'+
'<td class="col-sm-4">Merchant'+
'<br>' + d.merchantName + '</td>'+
'<td class="col-sm-3"></td>'+
'<td class="col-sm-3">Miles Value'+
'<br>'+ d.milesValue + '<br><a href="javascript:void(0);">Show calculation and detail</a></td>' +
'</tr>'+
'</table>';
}
现在,如果单击href链接,我需要将行扩展到第三级。我基本上想调用一个类似expand2的方法。它应该将相同的数据传递到方法中(因为我只会使用该对象的不同部分)。我不确定下一步是什么。目前,如果我点击第一个子项,我可以在控制台中看到一个错误(我认为这是因为如果你点击表的任何一行,就会触发事件)。那么,我是否只是用某种IF语句修改expand2(以确定我们是在主行还是在子行)?或者,当您单击href链接打开第三行并且仍然可以访问"d"数据对象时,我应该使用不同的事件方法(以及什么?)来捕获。
感谢
如果您使用jQuery方法而不是字符串创建第二级,您可以很容易地将点击事件附加到它上,然后使用它来扩展第三级
...
click_link = $('<a></a>').html('clickable link');
click_link.on('click', function(e){
// function to show 3rd row
createExpand3(table);
})
此链接显示动态构建行,您可以将单击侦听器添加到
https://jsfiddle.net/stevenkaspar/ysod0ghz/
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 在数组JS中查找三个重复项
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 如何替换javascript字符串中的前三个连字符
- 保存两个模型(属于第三个模型)和一个提交
- 有人知道如何使用highchart API实现三个或四个级别的动态下拉图吗
- 三个垂直堆叠的 Div,动态高度
- AngularJS,如何使两个输入字段'每当它们动态变化时,s的和总是等于第三个输入
- 添加第三个动态下拉菜单
- 相同表单中的三个或更多字段-如何动态添加/删除空白字段
- Jquery在动态表中对两个输入求和,并在第三个表中显示
- 动态纹理改变在三个JS中不起作用
- 动态颜色变化在三个JS中不起作用