javascript - Handsontable JSON 返回未定义

Question

我对 Handsontable 和 JS，特别是 JSON 的使用相当陌生。任何帮助，将不胜感激。在调试器的第 131 行中，“data[row].temp_source_data”= 未定义。 我似乎无法弄清楚为什么没有返回值。我已经包含了 js 文件。谢谢!

var hot;
var hotContainer;
var invalidCells = 0;
var forceRender = false;
var vendorSites = [];
var defaultVendorSite;
var gValidPo = true;
var supplier_number = [];
var data = [];
var errorIcon = '<i class="fa fa-exclamation-triangle fa-lg" style="color:red;"></i>';

// Create empty handsontable instance
function createEmptyHot(pRegion){
  setHotContainer(pRegion);
  hotContainer.height = getMaxHeight();
  assembleHot(hotContainer, data, getMaxHeight(hotContainer));
}

function setHotContainer(pId){
    hotContainer = document.getElementById(pId);
}

// Get max height of the handsontable instance
function getMaxHeight(){
  var maxHeight = (window.innerHeight - jQuery(hotContainer).offset().top * .8);
  return maxHeight;
}

//Assemble the handsontable instance
function assembleHot(pContainer, pData, pHeight){
    // Hook functions
    // Handle before change event
    function handleBeforeChange(changes, source) {
        var prop = "supplier_number";
        var row;
        var val;
        for (var i = 0; i < changes.length; i++) {
          if (changes[i][1] === prop && changes[i][2] !== changes[i][3]) {
            row = changes[i][0];
            val = changes[i][3];
            if (hot.getData()[row].supplier_site) {
             hot.getData()[row].supplier_site = '';
           }
            apex.server.process('GET VENDOR SITES',
                                {x01: val},
                                {async: false,
                                 dataType: "json",
                                 success:function(pData){
                                   hot.getData()[row].temp_source_data = pData;
                                   console.log(pData);  //DR
                                 }
                                }
                               );
          }
        }
    }

    hot = new Handsontable(pContainer, {
    data:pData,
    rowHeaders:true,
    colHeaders: [
      "<strong>Supplier Number<span class='required'>*</span></strong>",
      "<strong>Supplier Site</strong>",
      "<strong>Invoice Date</strong>",
      "<strong>Invoice Number</strong>",
      "<strong>Task Number</strong>",
      "<strong>Project Number</strong>",
      "<strong>Line Description</strong>",
      "<strong>Expenditure Type</strong>",
      "<strong>Ext Price</strong>",
      "<strong>Tax Amount</strong>",
      "<strong>Status</strong>"
    ],
    contextMenu:true,
    minSpareRows:pHeight / 28,
    minCols:16,
    maxCols:16,
    height:pHeight,
    beforeChange: handleBeforeChange,
    columns: [
     {
       data:"supplier_number",

     },
    {
      data:"supplier_site",
      type:"dropdown",
      source:vendorSites,
      width:250
    },
    {
      data:"invoice_date",
      type:"date",
      dateFormat:"MM.DD.YYYY"
    },
    {
      data:"invoice_num"
    },
    {
      data:"task_num"
    },
    {
      data:"project"
    },
    {
      data:"line_description"
    },
    {
      data:"expenditure_type",
      width: 250
    },
    {
      data:"ext_price",
      type:"numeric",
      format:"$0,0.00",
      language:"en"
    },
    {
      data:"tax_amount",
      type:"numeric",
      format:"$0,0.00",
      language:"en"
    },
    {data:"status",
     readOnly:true,
     renderer:invalidRowRenderer}
  ],
  cells: function(row, col, prop){
    if (prop === 'supplier_site') {
      var cellProperties = this;
      var vendorSites    = data[row].temp_source_data;
      var vendorSitesArr = [];
      if (vendorSites && vendorSites.length) {
        for (var i = 0; i < vendorSites.length; i++) {
          vendorSitesArr.push(vendorSites[i].supplier_site);
        }
        cellProperties.source = vendorSitesArr;
        hot.getData()[row][prop] = vendorSitesArr[0];
      }
    }
  }
});
}

// Renderers

 function invalidRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
   $(td).empty();
    var isInvalid = instance.getData()[row].has_error;
    if (isInvalid) {
      $(td).append(errorIcon);
      td.style.textAlign = 'center';
    }
    td.style.backgroundColor = '#E8E8E8';
}

/* If row has error, append error icon and highlight row kakhi.
function errorInRowRenderer(instance, td, row, col, prop, value, cellProperties) {
 Handsontable.renderers.TextRenderer.apply(this, arguments);
   var isInvalid = instance.getData()[row].has_error;
   if (isInvalid) {
     $(td).append(errorIcon);
     td.style.textAlign = 'center';
   }
   td.style.backgroundColor = '#E8E8E8';
   row.style.backgroundColor = 'kakhi';
}
*/

// Get all handsontable data

function getHotData(){
  return hot.getData();
}

// Do ajax with Handsontable data

function doAjax(){
  var data = JSON.parse(JSON.stringify(getHotData()));
  // Remove empty lines
  for (var i = 0; i < data.length; i++){
    if (jQuery.isEmptyObject(data[i])){
      data.splice(i, 1);
      i--;
    }
  }
}

// Validate handsontable data before submit

function validateHotData(){
  var data = {data:[]};
  var tempObj;
  for (var i = 0; i < hot.getData().length; i++ ){
    delete hot.getData()[i].has_error;
    if (!isEmptyRow(i)) {
      tempObj = {};
      tempObj = JSON.parse(JSON.stringify(hot.getData()[i]));
      tempObj.hot_idx = i;
      data.data.push(tempObj);

    }
  }
  apex.server.process('STAGE DATA',
                      {p_clob_01: JSON.stringify(data)},
                      {success:function(pData) {
                        // If we have invalid rows, flag them
                        if (pData.length > 0) {
                          for (var i = 0; i < pData.length; i++) {
                            rownum = pData[i].rownum;
                            hot.getData()[rownum].has_error = true;
                          }
                          hot.render();
                        } else {
                          for (var i = 0; i < hot.getData().length; i++) {
                            delete hot.getData()[i].has_error;
                          }
                          hot.render();
                        }
                       }
                      }
                     )

}

function handleSubmit(){
  forceRender = true;
  // Validate the data set
  var validity = validateHotData();
  if (validity){
    doAjax();
  }
}

// Utility - determine if a hot row is empty
function isEmptyRow(row) {
  delete hot.getData()[row].temp_source_data;
  delete hot.getData()[row].status;
  delete hot.getData()[row].has_error;
  if (jQuery.isEmptyObject(hot.getData()[row])) {
    return true;
  } else {
    return false;
  }
}

Answer 1

您是否尝试过使用hot.getSourceData()而不是hot.getData()？

他们最近在最新版本中更改了 hot.getData() 的功能，这给其他人带来了类似的问题。