如何在按钮单击时将drop-zone附加到数据表中

时间:2018-02-19 09:27:45

标签: angular angular5

我是角度4的新手,尝试在数据表行内的按钮单击上附加drop-zone但是它没有初始化drop-zone可能是[config] DOM属性没有初始化为append child请有人可以帮助

    ngOnInit(): void {
    $("#main_datatable").DataTable({
        "ajax": 'assets/data.json',
        "columns": [{
                "data": "null",
                "defaultContent": '<button class="expansion_id" id="expansion_id"  >+</button>'
            },
            {
                "data": "firstName"
            },
            {
                "data": "lastName"
            }
        ],
        "rowCallback": (row: Node, data: any[] | Object, index: number) => {
            const self = this;
            $(row).addClass('row_' + data.id);
            $(row).attr('id', 'row_' + data.id);
            $('td:first', row).unbind('click');
            $('td:first', row).bind('click', () => {
                self.expanded(data.id);
            });
            return row;
        },
        pageLength: 2,
        pagingType: 'full_numbers',
    });
}
expanded(personId) {
    var el = document.getElementById("row_" + personId);
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.setAttribute("colspan", "4");
    var file_upload = '<dropzone style="width: 100%; height: 25vh;" [config]="config"   [message]="Click or drag file here to upload" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" (maxFilesReached)="onUploadCanceled($event)" ></dropzone>'
    td1.innerHTML = file_upload;
    tr.appendChild(td1);
    console.log(tr);
    el.after(tr);
}

1 个答案:

答案 0 :(得分:0)

不确定,这在AngularJS中是否可行,但我有一个库链接。 图书馆下方的用户,这将帮助您满足您的需求。

Click Here