我正在将带有角6的角数据表与行选择扩展和检查类选项一起使用,以便我的表的第一列具有css复选框。我想要的是确定click事件是选中还是取消选中该框,我认为应该可以通过查看当前行的css类是否包含“ selected”来实现。
我能够进入该特定行的类列表,我认为未选择的日志classList.length
将为1(只是一个“偶数”或“奇数”的类),而对于选定的则为2( “偶选”或“奇选”)。但是,我看到的是它在取消选中而不是选中时显示了“ selected”类。
dtOptions:
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0,
defaultContent: ''
}],
select: {
style: 'os',
selector: 'td:first-child'
},
当用户单击td:first-child
时,它将使用CSS ::before
和::after
“检查”或“取消检查”,在我的行回调中,我仅在以下情况下执行处理函数用户点击了第一个单元格,而不是其他任何单元格。
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
$('td:first-child', row).unbind('click');
$('td:first-child', row).bind('click', () => {
self.someClickHandler(row, data, index);
});
return row;
}
然后在处理函数中:
let nodeList : NodeList = row.parentElement.getElementsByTagName("tr");
let elementList : Array<HTMLElement> = [];
if (nodeList) {
for (let i = 0; i < nodeList.length; i++) {
let node : Node = nodeList[i];
// Make sure it's really an Element
if (node.nodeType == Node.ELEMENT_NODE) {
elementList.push(node as HTMLElement);
}
}
}
console.log(elementList[index].classList.length);
我不确定为什么会看到与预期相反的情况-我将不胜感激。 :)