Question

我正在尝试使用制表符（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",
        visible: false
      },
      {
        title: "Checklist",
        field: "questionnaire",
        widthGrow: 1,
        formatter: textAreaFormatter,
        headerSort: false,
        bottomCalcFormatter: cellWithTextFormatter,
        bottomCalcFormatterParams: "Total Weightage:"
      },
      {
        title: "Weightage(%)",
        field: "weightage",
        widthGrow: 0.2,
        headerSort: false,
        bottomCalc: "sum",
        formatter: textfieldRangeFormatter,
        formatterParams: {
          validations: "numeric",
          columnName: "Weightage"
        }
      },
      {
        title: "",
        field: "cross",
        formatter: "buttonCross",
        width: 1,
        headerSort: false,
        cellClick: function(e, cell) {
          var ROW = cell.getRow();
          ROW.delete();
        }
      },
      {
        title: "Group Name",
        field: "groupName",
        visible: false
      },
      {
        title: "Rfx Technical Checklist Group Id",
        field: "rfxTechnicalChecklistGroupId",
        visible: false
      },
    ],
  });
}

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,
      layout: "fitColumns",
      placeholder: "Checklist not available",
      columns: [{
          title: "#",
          field: "num",
          formatter: "rownum",
          width: 1,
          headerSort: false
        },
        {
          title: "Technical Checklist Id",
          field: "rfxChecklistId",
          visible: false
        },
        {
          title: "Rfx Header Id",
          field: "rfxHeaderId",
          visible: false
        },
        {
          title: "Checklist",
          field: "questionnaire",
          formatter: "textarea",
          widthGrow: 1,
          headerSort: false,
          bottomCalcFormatter: cellWithTextFormatter,
          bottomCalcFormatterParams: "Total Weightage:"
        },
        {
          title: "Weightage(%)",
          field: "weightage",
          formatter: "textarea",
          widthGrow: 0.2,
          bottomCalc: "sum",
          align: "left",
          headerSort: false
        },
      ],
    });
  } else {
    window["technicalChecklistTable_" + techChecklistGroupID] = new Tabulator("#addTechChecklistID_" + techChecklistGroupID, {
      height: 380,
      data: jsonData,
      layout: "fitColumns",
      placeholder: "Checklist not available",
      columns: [{
          title: "Checklist",
          field: "questionnaire",
          formatter: "textarea",
          widthGrow: 1,
          headerSort: false,
          frozen: true
        },
        {
          title: "Weightage(%)",
          field: "weightage",
          widthGrow: 0.2,
          headerSort: false,
          frozen: true
        },
        {
          title: "Technical Checklist Id",
          field: "rfxChecklistId",
          visible: false
        },
        {
          title: "Rfx Header Id",
          field: "rfxHeaderId",
          visible: false
        },
        {
          title: "Suppliers count",
          field: "supplierCount",
          visible: false
        },
      ],
      index: "rfxChecklistId",
      rowFormatter: function(row) {
        var rowIndex = row.getIndex();
        if (rowIndex == "") {
          row.getElement().style.backgroundColor = "#afe1eb";
          row.getElement().classList.add("tabulator-header");
        }
      }
    });
  }
}

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

0 个答案: