动态创建的Tabulator表列大小不正确

如何解决动态创建的Tabulator表列大小不正确

我正在尝试使用制表符（4.4.3）使用JSON数据动态生成表，但遇到了一些麻烦。因此，表是在一个循环中创建的，因此，如果循环中只有一个表，则REDRAW函数的作用就像一个超级按钮，但是当有多个表时，重绘函数就会遇到麻烦。表格列的大小调整不正确。

我们使用了引导程序选项卡，并且在其中一个选项卡中，我们需要动态地创建多个表作为for循环中的for迭代中的代码。但是列的大小不能正确调整，使用选项卡的onclick函数放置的重绘函数只是制表符表之一。对于EG：如果我有多个表，则必须单击已经处于活动状态的同一选项卡才能再次启用onclick功能，以便其他表重绘自身。

我希望您能帮助我解决此问题。

下面是供参考的代码：

<body>
  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" onclick="tabulatorTechnicalChecklistTableShow();" href="#technicalchecklist"><label class="inline fWeight" th:text="#{label.Checklist}"></label></a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="technicalchecklist" class="tab-pane fade" style="display: none;">
      <div class="row">
        <div class="col-xl-12 col-md-12 mb-12">
          <div id="technicalChecklistTable"></div>
          <div id="techChecklistGroupingExample">
            <div id="addTechChecklistDivId"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
    function tabulatorTechnicalChecklistTableShow(){
       for(var i = 0; i < techChecklistGroupID; i++){
         var tempTechnicalChecklistTable = window["technicalChecklistTable_"+i];
         setTimeout(function(){tempTechnicalChecklistTable.redraw(true); },200);
         tempTechnicalChecklistTable.redraw(true);
       }
    }
</script>

function getTechChecklistGroupedData() {
  var techChecklistFirstTabulator = technicalChecklistTable;
  for (var i = 0; i < techChecklistGroupID; i++) {
    $("#techChecklistGroupingExample").each(function() {
      var titleKey = $('#addTechChecklistTitleID_' + i).attr('name');
      var titleValue = $('#addTechChecklistTitleID_' + i).val();
      if (titleKey != undefined && titleValue != undefined) {
        var tempData = window["technicalChecklistTable_" + i].getData();
        if (i == 0) {
          techChecklistFirstTabulator.clearData();
        }
        for (var j in tempData) {
          tempData[j]["groupName"] = titleValue;
          if (tempData[j]["rfxChecklistGroupId"] == "0" || tempData[j]["rfxChecklistGroupId"] == undefined) {
            tempData[j]["rfxChecklistGroupId"] = "0";
          }
        }
        techChecklistFirstTabulator.addData(tempData);
        alert("actual looks like:" + JSON.stringify(techChecklistFirstTabulator.getData()));
      }
    });
  }
  alert("actual looks like:" + JSON.stringify(techChecklistFirstTabulator.getData()));
  technicalChecklistTable = techChecklistFirstTabulator;
}

function createTechChecklistDiv() {
  var markup = "";
  if (techChecklistGroupID == 0) {
    markup = "<div class='card mb-4'>" +
      "<div class='card-header' style='padding: 0.75rem 1.25rem;'>" +
      "<input type='text' id='addTechChecklistTitleID_" + techChecklistGroupID + "' name='addTechChecklistTitleID_" + techChecklistGroupID + "' class='form-control' onkeyup='validateSpecialCharsJSON(addTechChecklistTitleID_" + techChecklistGroupID + ");' placeholder='Title' style='width: 40%;display: inline-block;'>" +
      "<div id='addTechChecklistNewRowDiv_" + techChecklistGroupID + "'>" +
      "<input type='button' class='btn btn-info btnAlign' value='Add Criteria' onclick='addTabulatorRow(technicalChecklistTable_" + techChecklistGroupID + ");' />" +
      "</div>" +
      "</div>" +
      "<div id='addTechChecklistID_" + techChecklistGroupID + "'></div>" +
      "</div>";
  } else {
    markup = "<div class='card mb-4'>" +
      "<div class='card-header' style='padding: 0.75rem 1.25rem;'>" +
      "<input type='text' id='addTechChecklistTitleID_" + techChecklistGroupID + "' name='addTechChecklistTitleID_" + techChecklistGroupID + "' class='form-control' onkeyup='validateSpecialCharsJSON(addTechChecklistTitleID_" + techChecklistGroupID + ");' placeholder='Title' style='width: 40%;display: inline-block;'>" +
      "<i class='fa fa-close red' id='closeTechChecklistGroup_" + techChecklistGroupID + "' onclick='deleteCloneNode(this);' ></i>" +
      "<div id='addTechChecklistNewRowDiv_" + techChecklistGroupID + "'>" +
      "<input type='button' class='btn btn-info btnAlign' value='Add Criteria' onclick='addTabulatorRow(technicalChecklistTable_" + techChecklistGroupID + ");' />" +
      "</div>" +
      "</div>" +
      "<div id='addTechChecklistID_" + techChecklistGroupID + "'></div>" +
      "</div>";
  }
  $("#addTechChecklistDivId").append(markup);
}

function createTechChecklistGroupTabulator(jsonData) {
  window["technicalChecklistTable_" + techChecklistGroupID] = new Tabulator("#addTechChecklistID_" + techChecklistGroupID,{
    height: 380,data: jsonData,layout: "fitColumns",clipboard: true,clipboardcopyConfig: {
      columncalcs: false,},clipboardPasteAction: "replace",columns: [{
        title: "#",field: "num",formatter: "rownum",width: 5,headerSort: false,clipboard: false
      },{
        title: "Technical Checklist Id",field: "rfxChecklistId",visible: false
      },{
        title: "Rfx Header Id",field: "rfxHeaderId",{
        title: "Checklist",field: "questionnaire",widthGrow: 1,formatter: textAreaFormatter,bottomCalcFormatter: cellWithtextformatter,bottomCalcFormatterParams: "Total Weightage:"
      },{
        title: "Weightage(%)",field: "weightage",widthGrow: 0.2,bottomCalc: "sum",formatter: textfieldRangeFormatter,formatterParams: {
          validations: "numeric",columnName: "Weightage"
        }
      },{
        title: "",field: "cross",formatter: "buttonCross",width: 1,cellClick: function(e,cell) {
          var ROW = cell.getRow();
          ROW.delete();
        }
      },{
        title: "Group Name",field: "groupName",{
        title: "Rfx Technical Checklist Group Id",field: "rfxTechnicalChecklistGroupId",],});
}

function createTechChecklistGroupNonEditableTabulator(jsonData) {
  if (document.getElementsByName('rfxStatusId')[0].value == '2' ||
    document.getElementsByName('rfxStatusId')[0].value == '3') {
    window["technicalChecklistTable_" + techChecklistGroupID] = new Tabulator("#addTechChecklistID_" + techChecklistGroupID,{
      data: jsonData,placeholder: "Checklist not available",columns: [{
          title: "#",headerSort: false
        },{
          title: "Technical Checklist Id",visible: false
        },{
          title: "Rfx Header Id",{
          title: "Checklist",formatter: "textarea",bottomCalcFormatterParams: "Total Weightage:"
        },{
          title: "Weightage(%)",align: "left",});
  } else {
    window["technicalChecklistTable_" + techChecklistGroupID] = new Tabulator("#addTechChecklistID_" + techChecklistGroupID,{
      height: 380,columns: [{
          title: "Checklist",frozen: true
        },{
          title: "suppliers count",field: "supplierCount",index: "rfxChecklistId",rowFormatter: function(row) {
        var rowIndex = row.getIndex();
        if (rowIndex == "") {
          row.getElement().style.backgroundColor = "#afe1eb";
          row.getElement().classList.add("tabulator-header");
        }
      }
    });
  }
}

动态创建的Tabulator表列大小不正确

如何解决动态创建的Tabulator表列大小不正确

相关推荐