Angular DataTable获取选定的行类

时间:2018-07-29 13:18:54

标签: angular angular6 getelementsbytagname angular-datatables

我正在将带有角6的角数据表与行选择扩展和检查类选项一起使用,以便我的表的第一列具有css复选框。我想要的是确定click事件是选中还是取消选中该框,我认为应该可以通过查看当前行的css类是否包含“ selected”来实现。

我能够进入该特定行的类列表,我认为未选择的日志classList.length将为1(只是一个“偶数”或“奇数”的类),而对于选定的则为2( “偶选”或“奇选”)。但是,我看到的是它在取消选中而不是选中时显示了“ selected”类。

enter image description here

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);

我不确定为什么会看到与预期相反的情况-我将不胜感激。 :)

0 个答案:

没有答案