javascript - 在同一页面中加载多个带有自定义标题的手持设备

Question

我必须在同一页面中加载多个 handsontable，并使用具有标题分组功能的自定义标题。

我使用以下代码初始化两个具有不同组标题的 handsontable -

$(document).ready(function() {

  /* function */

  function model(ldo, scn, line, container, f_e, fcl_lcl, spod, pod, iso, commodity, wgt, imdg, unno, temp, or, oog, stow_ind, ts, pol, shipper, bkg_ref, awk_cargo, remark) {
    return {
      name: {
        ldo: ldo,
        scn: scn,
        line: line,
        container: container,
        f_e: f_e,
        fcl_lcl: fcl_lcl,
        spod: spod,
        pod: pod,
        iso: iso,
        commodity: commodity,
        wgt: wgt,
        imdg: imdg,
        unno: unno,
        temp: temp,
        or: or,
        oog: oog,
        stow_ind: stow_ind,
        ts: ts,
        pol: pol,
        shipper: shipper,
        bkg_ref: bkg_ref,
        awk_cargo: awk_cargo,
        remark: remark
      }
    };
  }

  /* ------  */

  /* Events */
  var container_sizes = ['20-HC', '40-GP'];
  var container_count = [3, 5]
    //Loading excel sheet
  for (var i = 0; i < container_sizes.length; i++) {
    var data = [];
    for (var j = 0; j < container_count[i]; j++) {
      var row_data = model("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
      data.push(row_data);
    }
    var header_string = container_sizes[i] + ' sized containers';
    var container = $("#container-entry");
    container.handsontable({
      data: data,
      dataSchema: model,
      colHeaders: ["LDO", "SCN", "LINE", "CONTAINER", "F/E", "FCL/LCL", "SPOD", "POD", "ISO", "COMMODITY", "WGT", "IMDG", "UNNO", "TEMP", "OR", "OOG", "STOW IND.", "TS", "POL", "SHIPPER", "BKG REF", "AWK CARGO", "REMARK"],
      rowHeaders: true,
      manualColumnResize: true,
      columns: [{
        data: 'name.ldo'
      }, {
        data: 'name.scn'
      }, {
        data: 'name.line'
      }, {
        data: 'name.container'
      }, {
        data: 'name.f_e'
      }, {
        data: 'name.fcl_lcl'
      }, {
        data: 'name.spod'
      }, {
        data: 'name.pod'
      }, {
        data: 'name.iso'
      }, {
        data: 'name.commodity'
      }, {
        data: 'name.wgt'
      }, {
        data: 'name.imdg'
      }, {
        data: 'name.unno'
      }, {
        data: 'name.temp'
      }, {
        data: 'name.or'
      }, {
        data: 'name.oog'
      }, {
        data: 'name.stow_ind'
      }, {
        data: 'name.ts'
      }, {
        data: 'name.pol'
      }, {
        data: 'name.shipper'
      }, {
        data: 'name.bkg_ref'
      }, {
        data: 'name.awk_cargo'
      }, {
        data: 'name.remark'
      }],
      afterRender: function() {
        container.find('thead').find('tr').before(
          '<tr id="header-grouping"><th colspan="24">' + header_string + '</th></tr>');
      },
      beforeRender: function() {
        $('#header-grouping').remove();
      },
      stretchH: "all"
    });

  }

});

button#upload {
  position: relative;
  float: right;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-right: 75px;
}
button#reset {
  position: relative;
  float: left;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-left: 75px;
}

<h4>Copy and paste container related data</h4>


<div id='container-entry'></div>

<button type="reset" id="reset" class="btn btn-default btn-file btn-sm">
  Reset
</button>
<button type="submit" id="upload" class="btn btn-primary btn-file btn-sm">
  Upload
</button>

但是当我运行代码或加载页面时，我不断收到以下错误。

 TypeError: element.classList is undefined

错误回溯到 handsontable js 的以下行(第 9782 行)。

return element.classList.contains(className);

我无法理解错误的原因。如果有人跟随我朝着正确的方向前进，这将对我有所帮助。

这是一个演示 - https://jsfiddle.net/ni8mr/x1bnuqjy/

Answer 1

我找到了解决办法。问题是由于在同一个 div 上添加两个 handsonTable 而引起的。所以我在默认 div 之后添加了另一个 div，然后问题就解决了。

我问题中的代码有点乱。所以我在这里演示了一个简单的演示 - https://jsfiddle.net/ni8mr/2a0k4ror/

这是代码-

$(document).ready(function() {

  var $container = $("#example");
  $container.handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $container.find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });

  $("<div id='example1'></div>").insertAfter("div#example");
  $("#example1").handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $("#example1").find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });


});

<div id="example"></div>

这里还有一个遵循我的确切代码的演示 - https://jsfiddle.net/ni8mr/2a0k4ror/1/