如何在单击按钮时将拖放区附加到数据-table
How to append drop-zone into data-table while button click
我是 angular 4 的新手,我试图在 data-table 行中点击按钮时添加拖放区,但它没有初始化拖放区可能是 [config]
DOM 未使用附加子项初始化的属性请有人帮忙
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);
}
不确定,这在 AngularJS 中是否可行,但我有一个库 link 供您使用。
图书馆下面的用户,这将帮助您满足您的需求。
我是 angular 4 的新手,我试图在 data-table 行中点击按钮时添加拖放区,但它没有初始化拖放区可能是 [config]
DOM 未使用附加子项初始化的属性请有人帮忙
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);
}
不确定,这在 AngularJS 中是否可行,但我有一个库 link 供您使用。 图书馆下面的用户,这将帮助您满足您的需求。