Есть ли способ привязать Tabulator к динамически созданному элементу <div>? - PullRequest
Новая
       24

Есть ли способ привязать Tabulator к динамически созданному элементу <div>?

0 голосов
/ 24 апреля 2020

Я пытаюсь привязать экземпляр плагина Tabulator к динамически созданному элементу <div>, но безрезультатно. У меня нет проблем с привязкой Tabulator к элементам stati c, созданным с помощью события загрузки страницы; однако мне нужно иметь возможность динамически создавать новые <div> элементы, содержащие таблицы Tabulator.

HTML для заполнителя <div> и код для динамически создаваемого <div>:

HTML: 

<div id="CrewLeaderDiv" name="CrewLeader"></div>

JavaScript для создания новой коллекции вложенных <div> элементов: 

        $("#CrewLeader").change(function (element) {
            var selOption = $("#CrewLeader > option:selected");
            window.leaderID = selOption.val();
            var crewLeaderName = selOption.text()

            // Create the Crew Leader Time Card.
            var sHtml = "<div class='card' style='margin: 10px;'>";
            sHtml += "<div class='card-header col-sm-12 roundBorder' style='padding:2px;'>";
            sHtml += "<span class='col-sm-3 ' style='float:left; font-size:16px; text-align:right;'>Crew Leader:&nbsp;&nbsp;</span>";
            sHtml += "<input id='CrewLeaderName' disabled class='col-sm-6 roundBorder' style='float:left; font-size:16px; font-weight:bold; color:darkred; height:100%; width:100%; text-align:center;' value='" + crewLeaderName + "' />";
            sHtml += "</div>";
            sHtml += "<div class='card-body col-sm-12 roundBorder' style='padding:4px; font-size:16px;'>Time Card Entries</div>";
            sHtml += "<div class='col-sm-12 roundBorder' id='CrewLeaderTable' style='font-size:12px;'></div>";
            sHtml += "<div class='btnCrewLeader'><button id='btnCrewLeader' class='btn btn-secondary' type='button'>Click to Enter Time</button></div>";
            sHtml += "</div>";
            $("#CrewLeaderDiv").html(sHtml);
        });

Строка s Html передается заполнителю #CrewLeaderDiv для создания карты Bootstrap и заполнителя (#CrewLeaderTable ) для таблицы Tabulator.

Обработчик события click для кнопки #btnCrewLeader управляет созданием Tabulator следующим образом: 

        $(document).on('click', '#btnCrewLeader', function () {
            //Remove the button.....
            $("div").remove(".btnCrewLeader");
            //Instantiate the Tabulator editable table
            $("#CrewLeaderTable").tabulator({
                height: "100%",
                layout: "fitColumns",
                //responsiveLayout: "hide",
                data: tabledata,
                columns: [
                    { title: "Phase", field: "phase", hozAlign: "center", editor: "select" },
                    { title: "Start Time", field: "start", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Finish Time", field: "finish", hozAlign: "center", sorter: "time", editor: timeEditor }
                ]
            });

У меня есть пара строк данных, хранящихся в " datatable "для тестирования.

Нажатие на кнопку запускает обработчик событий, но экземпляр Tabulator не создается.

Как уже отмечалось, я могу создавать таблицы Tabulator на stati * 1034. * элементы, но мне действительно нужно иметь возможность связываться с динамически созданными элементами. Я просмотрел документацию Табулятора, но не нашел ссылки на эту проблему.

Любая помощь будет принята с благодарностью.

1 Ответ

2 голосов
/ 27 апреля 2020

Вот пример, где я создаю новый div и прикрепляю его к основному документу. Затем я создаю Табулятор с ним. https://jsfiddle.net/8hcjbatz/

Это общая идея, где параметры будут вашими параметрами табулятора. 

  const div = document.createElement('div');
  document.body.appendChild(div);
  const table = new Tabulator(div, options);
...