數據表響應rowcallback

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 incnt works
• 響應模式的eltedit2常量失敗。

當我檢查元素時，我注意到在響應模式下，顯示：none屬性出現：

我認為這是避免點擊事件檢測的屬性...

怎么解決？

編輯我添加了這樣的日志

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

它適用於響應模式和“Web”模式