将 handsontable 中所做的更改绑定到 handsontable 同一行中的另一个值

Question

我正在使用 handsontable 通过网络浏览器方便地更改大型 table。问题是更改需要绑定到唯一 ID，例如 RDBMS 中的主 ID。对于 question/example/code 中的数据，custId 与主键或唯一标识符一样好。

我如何将数组更改中的值：更改：关联到 custId..？

看起来我正在尝试调用 hot5 上的函数，即使正在渲染 hot5。 [看起来不太可能，并且可能是根本原因] 这就是为什么 getchangedPin2 returns null，这将我带到第二部分 pf 问题是有不同的方法来实现这个..?

$(document).ready(function () {
  container = document.getElementById('example');
  hot5 = new Handsontable(container, {
    data: request,
 dataSchema: {custID: null, areaCode: null, pinNo: null, importantStatus: null, subAreaCode: null},
    colHeaders:  ['custID', 'areaCode', 'pinNo', 'importantStatus', 'subAreaCode'],
    columns: [

      { data: 'custID'},
      { data: 'areaCode'},
      { data: 'pinNo'},
      { data: 'importantStatus'},
      { data: 'subAreaCode'}
   
     ],

  afterChange: function (changes, source) {
     if (source=== 'loadData') {
         return;
     }
     showValInConsole(changes);
     console.log("the changes "+ getchangedpinNo2(changes[0],'custID'));
   },
    columnSorting: true,
    minSpareRows: 1
  });
  
    var showValInConsole = function(changes){
     var rowIndex = changes[0];
     var col = changes[1];
     var oldCellValue = changes[2];
     var newCellValue = changes[3];
     var row_ref = getchangedPin2(changes[0],'custID');

         
     console.log(rowIndex + " " + col + " "+ oldCellValue + " "+ newCellValue + " " +getchangedPin2(rowIndex,'custID') );
  };
  
  var getchangedPin2 = function(row, col){
   var urnChanged2 = hot5.getDataAtRowProp(row, col);
   return urnChanged2;
  }; 
  
  });

<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"/>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<meta charset="ISO-8859-1">
    
    <script src="js/handsontable.full.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" media="screen" href="css/handsontable.full.css">
</head>
<body>
 <div id="hoTable"></div>
<input id="SubmitButton" type="button" value="Submit" />

</body>
</html>

注意：无法添加 handsontable.full.min.css 和 handsontable.full.js

Answer 1

有一个答案可以解释您的情况。总之，您可以阅读此处的文档来了解 Handsontable 使用的排序插件。它利用了他们所谓的 logicalIndex 因为 data 数组永远不会发生变化；相反，他们保留了第二个数据结构，其中引用了 physicalIndex-es.

这一切都归结为以下代码行：

physicalIndex = instance.sortIndex[logicalIndex][0];

您的 instance 应该是 Handson 实例，logicalIndex 应该是您的 changes[0][0]。

将 handsontable 中所做的更改绑定到 handsontable 同一行中的另一个值

Tying changes made in handsontable to another value in the same row in handsontable

javascript

jquery

handsontable