Question

我使用数据表V1.10和角度数据表V7

我的数据表显示3个操作按钮（编辑，删除，读取）。

效果很好

但是在如下响应模式下：

失败：

这是显示按钮的代码：

  columnDefs: [
                {
                    orderable: false,
                    // className: 'my_class', // classname définit une checkbox par dessus une case vide [object Object] (data: null)
                    targets: [0],
                    render: function(data, type, full, meta) {
                        return'<input type="checkbox" class="unique-class mat-checkbox mat-accent mat-checkbox-anim-checked-unchecked ' +
                            'mat-checkbox-inner-container mat-checkbox-inner-container-no-side-margin">';
                    }
                },
                {
                    targets: [4],
                    visible: true,
                    data: 'action',
                    render: function(data, type, full, meta) {
                        console.log(type);
                        return '<a id="id" class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer">' +
                            '<i class="material-icons">create</i></a>' +
                            '<a class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer">' +
                            '<i class="material-icons">delete</i></a>' +
                            '<a class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter">' +
                            '<i class="material-icons">visibility</i></a>'
                    }
                }
            ],

对于rowCallback事件：

rowCallback: (row: Node, data: any[] | Object, index: number) => {
                const self = this;
                console.log(row);
                console.log($('td:hidden', row).find('a.btn-edit'));
                console.log($('td', row).find('a.btn-edit'));
                // 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', () => {
                const elt = $('td', row).find('[type="checkbox"]');
                if (elt) {
                    elt.unbind('click');
                    elt.bind('click', () => {
                        if (elt[0].checked) {
                            that.selectedList.push(data as Contact)
                        } else {
                            const itemIndex = this.selectedList.indexOf(data as Contact);
                            that.selectedList.splice(itemIndex, 1);
                        }
                        console.log(that.selectedList.length + ' éléments sélectionés');
                        this.selectedList.forEach((item) => {
                            console.log(item)
                        })
                    });
                }
                const eltedit = $('td', row).find('a.btn-edit');
                if (eltedit) {
                    console.log('trouvé td');
                    eltedit.unbind('click');
                    eltedit.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }
                const eltedit2 = $('td:hidden', row).find('a.btn-edit');
                console.log($('#id').css('display'));
                if (eltedit2) {
                    console.log('trouvé td hidden');
                    eltedit2.unbind('click');
                    eltedit2.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }

eltedit竞争作品
响应模式的eltedit2常量失败。

当我检查元素时，我注意到在响应模式下，显示：无属性出现：

我认为正是这个属性避免了点击事件的检测...

如何解决？

编辑我添加了这样的日志

const eltedit2 = $('td:hidden', row).find('a.btn-edit');
console.log($('td:hidden', row).find('a.btn-edit').length);

并且长度值为1，因此找到了元素。所以我想问题出在“解除绑定”功能

编辑2 如果我改变

if (eltedit2) {
                    console.log('trouvé td hidden');
                    eltedit2.unbind('click');
                    eltedit2.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }

作者：

if (eltedit2) {
                console.log('trouvé td hidden');
                $('table').unbind('click');
                $('table').bind('click', () => {
                    console.log(data);
                    this.crudContact(data, 2);
                });
            }

除了它始终是最后选择的记录之外，它都起作用...

Answer 1

我发现此有用的链接http://jsfiddle.net/Guruprasad_Rao/891mdyvy/1/

现在我获得了以响应模式和Web模式管理数据库的解决方案

在columnDefs部分的第一点，添加数据属性，如下所示：

{
   targets: [4],
   visible: true,
   data: 'action',
   render: function(data, type, full: Contact, meta) {
   const contact = JSON.stringify(data).split('"').join('\'');
   return '<a data-contact="'+ contact + '" class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer">' +
          '<i class="material-icons">create</i></a>' +
          '<a data-contact="' + contact + '"  class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer">' +
          '<i class="material-icons">delete</i></a>' +
          '<a data-contact="' + contact + '" class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter">' +
          '<i class="material-icons">visibility</i></a>'
    }
}

第二点，在rowCallback点中，检测单击事件并检索数据内容，如下所示：

$('table').unbind('click');
$("table").on('click','a.btn-edit', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});
$("table").on('click','a.btn-remove', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});
$("table").on('click','a.btn-read', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});

它在响应模式和“网络”模式下均可工作

数据表响应式行回调

1 个答案: