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

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

本文关键字：handsontable 另一个 一行 绑定      更新时间：2023-09-26

我正在使用handsontable来方便地通过web浏览器更改大型表。问题是需要将更改绑定到唯一ID，例如RDBMS中的主ID。对于问题/示例/代码中的数据，custId与主键或唯一标识符一样好。

如何将数组changes:中的changes:值与custId..联系起来?

看起来我试图在hot5上调用一个函数，即使hot5正在渲染。[看起来不太可能，可能是根本原因]这就是为什么getchangedPin2返回null，这给我带来了问题的第二部分，是否有不同的方式来实现这一点…?

$(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

这个问题的答案可以解释你的情况。总之，您可以阅读这里的文档来理解Handsontable使用的排序插件。它利用了所谓的logicalIndex，因为data数组永远不会突变;相反，它们保留了第二个引用physicalIndex -es的数据结构。

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

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

其中instance应该是Handson实例，logicalIndex应该是changes[0][0]。

相关文章：