Табулятор Добавить столбец с кнопкой в ​​каждой строке - PullRequest
Новая
       14

Табулятор Добавить столбец с кнопкой в ​​каждой строке

0 голосов
/ 06 декабря 2018

Я использую библиотеку javaScript под названием Tabulator , пытаясь добавить столбец и позволить пользователям иметь возможность загружать 1 файл изображения в каждой строке.

(я использую только JavaScript не Jquery ) Я видел эту ссылку https://github.com/olifolkerd/tabulator/issues/153, которая очень помогла, но не охватила все это.

Я дошел до добавления нового столбца с кнопкой вв каждой строке, но мне нужно иметь возможность добавить какой-то идентификатор для каждой строки, чтобы я мог выбрать его и подключить к Форма , которая будет публиковать изображение на моем внутреннем сервере.

Я не смог найти никакого документа о том, как я могу сделать это с этой библиотекой, но я нашел несколько ответов, которые позволили мне до этого. 

var openButton = function(value, data, cell, row, options){ //plain text value
var button ='<button>upload ID </button>';

    button.addEventListener('click',function(){
    console.log("button is working");
});

return button;
};

Я продолжаю получать сообщение об ошибке на моей консоли button.addEventListener is not a function

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

я наконец-то понял,

сначала нужно добавить переменную, содержащую функцию 

var the_Function = function(cell, formatterParams, onRendered){ //plain text value

  //var formA = '<form class="" action="/upload" method="post">'
  //var inputFn = '<input type="file" id="imgupload" />' ;
  //var uploadBtnn = '<button type="submit" id="OpenImgUpload">ID upload</button></form>'
//return uploadBtnn
return "<i class='fa fa-print'>function_trigger</i>";
};

, затем мы должны добавить форматер к столбцу 

table.addColumn({title:"ID", field: "ID" ,formatter:the_Function,width:100, align:"center",cellClick:function(e, cell){ 

//button's function for example 
var Btn = document.createElement('Button');
Btn.id = "Btn_Id";
console.log(Btn);


}
0 голосов
/ 06 декабря 2018

Вы не можете прикрепить прослушиватели событий к строковым значениям.

Сначала необходимо создать элемент, добавив его к .innerHTML другого элемента DOM.

Затем вам потребуетсяприкрепите прослушиватель события click к самому документу, а не к элементу, который вы динамически создали, потому что addEventListener будет работать только для элементов, являющихся частью дерева HTML, когда изначально загружен javascript. 

function add_button() {

var uid = "btn_" + document.querySelectorAll("button").length;
var button ='<button id='+ uid +'>upload ID </button>';
document.getElementById("buttons").innerHTML += button;


document.addEventListener('click',function(e){
    if(e.target && e.target.id== uid){
       console.log("button " + uid + " is working");
    }
});
}

add_button();
add_button();
<div id="buttons">
</div>
...