0

我有一个看起来像这样的二维数组：

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]
              ];

我怎么能这样做？

4

1 回答 1

0

您正在使用二维数组。您需要为包含内容的单元格保留索引，以便更新和阅读它们。显示版本（输入）中的单元格将需要具有相应的标识符，可能是 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];
}

现在在输入元素的父级上放置一个侦听器（您可能希望将它们放在一个表中以保持它们整洁），当您收到更改事件时，查看它的来源并在需要时更新数组。将函数或公式放入单元格中以获得计算值并不需要更多的努力。

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

依此类推……您需要添加与视图通信的函数。

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

于 2013-07-08T22:39:58.463 回答