Handsontable JSON 返回未定义

Posted

技术标签:

【中文标题】Handsontable JSON 返回未定义【英文标题】:Handsontable JSON returns undefined 【发布时间】:2016-09-20 20:47:08 【问题描述】:

我对 Handsontable 和 JS,尤其是 JSON 的使用相当陌生。任何帮助,将不胜感激。在第 131 行的调试器中,'data[row].temp_source_data' = undefined。 我似乎无法弄清楚为什么没有返回值。我已经包含了 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;
  

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

不,我没有。感谢您的提醒! 没问题!很高兴这是一个简单的修复。 :)

以上是关于Handsontable JSON 返回未定义的主要内容,如果未能解决你的问题,请参考以下文章

如何从handsontable返回JSON格式的数据?

Meteor 错误,未定义 Handsontable

使用handsontable将数据保存到json文件

自定义单元格渲染器操作未在 handsontable 中触发

自定义渲染器未应用于 Table 渲染 handsontable

Javascript Handsontable - 未捕获的类型错误:无法读取未定义的属性“insertBefore”