Question

我有一个看起来像这样的2D数组：

var header = [A, B, C]
var allData = [
                [A1, B1, C1]
                [A2, B2, C2]
                [A3, B3, C3]
              ];

对数组的保存要大得多，而且有很多空索引。

我使用AngularJS创建了各种各样的电子表格。它由输入文本框组成，其中框的值是数组中的值。

<script>
    sheet= function($scope, $parse){
    $scope.columns = header;
    $scope.rows = allData.length;
    $scope.cells = {};
    $scope.values = allData.map(function(c,row){
        return c.map(function(data, ind){
            return {
                content: data,
                model: null,
            };
        });
    });
    };
</script>

<div ng-app ng-controller="sheet">
    <center><table>
        <tr class="column-label">
            <td ng-repeat="column in columns">{{column}}</td>
        <tr ng-repeat="value in values">
            <td class="row-label" ng-repeat="data in value">
                <div>
                    <input type="text" ng-model="data.content" value="{{data.content}}">
                </div>
            </td>
        </tr>
    </table></center>
</div>

但是，由于这些数组索引中的许多都是空的，因此用户必须填写它们。我想弄清楚如何在用户输入数据时动态更改allData数组 - 或者可能不是动态地，但在某种程度上，他可以点击一个按钮，然后在将信息发送到服务器之前更新阵列。

例如，如果用户将“C2”更改为“2C”，我希望将allData数组更新为：

var allData = [
                [A1, B1, C1]
                [A2, B2, 2C]
                [A3, B3, C3]
              ];

我怎么能这样做？

Answer 1

您正在使用二维数组。您需要将索引保存到包含内容的单元格，以便您可以更新和读取它们。显示版本中的单元格（输入）将需要具有相应的标识符，可能是ID。对于包含内容的单元格，您只需要数组中的成员。

因此，编写一些通用的读写函数，根据索引设置和获取值，例如

var base = [];

function setValue(rowIdx, colIdx, value) {
  var col; 
  var row = base[rowIdx];

  if (typeof row == 'undefined') {
    row = base[rowIdx] = [];
  }
  col = row[colIdx];

  if (typeof col == 'undefined') {
    col = row[colIdx] = [];
  }
  col[colIdx] = value;
}

function getValue(rowIdx, colIdx) {
  var col; 
  var row = base[rowIdx];

  if (typeof row == 'undefined') {
    return row;
  }
  col = row[colIdx];

  if (typeof col == 'undefined') {
    return col;
  }
  return col[colIdx];
}

现在将一个侦听器放在输入元素的父节点上（您可能希望将它们放在一个表中以保持它们整洁）并且当您获得更改事件时，请查看它来自何处并在需要时更新阵列。将函数或公式放入单元格中计算值不需要花费太多精力。

然后，您需要一个函数来更新 base 数组中的显示，因此在一个地方进行的更改会流向其他计算单元格。您甚至可以使每个单元成员成为一个对象，该对象不仅具有值，而且还有一个计算值的公式，因此您可以保存更新的值和生成它的公式。并且您可以进一步添加对具有涉及特定单元格的公式的单元格的引用，以便更新单元格意味着只更新相关的公式单元格。

等等......您需要添加与视图通信的功能。

上面只是一个例子，您可能应该创建一个单独的对象来保存所有方法和数据，可能使用模块模式，但原型方法也可以。

从输入标签更改Javascript中的数组

1 个答案: