0

次のような 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]
              ];

どうすればこれを行うことができますか？

4

1 に答える 1

0

あなたは2次元配列を扱っています。コンテンツを更新して読み取ることができるように、コンテンツのあるセルへのインデックスを保持する必要があります。表示バージョン (入力) のセルには、対応する識別子 (おそらく 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 に答える