addRows()で複数行追加するとgetInsertRows()の戻り値が0になる

文書番号 : 39478     文書種別 : 不具合     登録日 : 2016/07/27     最終更新日 : 2016/07/27
文書を印刷する
対象製品
SpreadJS 9J
状況
修正済み
詳細
AngularJS上で一度に複数行の追加を行うと、行追加と認識されない現象が発生します

【現象再現手順】
--------------------------------------------------
1. 以下の再現コードを実行します
2. ”add rows”ボタンを押下してSpreadJSに複数行を追加します
3. ”get count”ボタンを押下して追加された行の数を確認します

-”0 rows were added”と表示され、行追加が認識されていないことが確認できます。
--------------------------------------------------

【現象再現コード】
--------------------------------------------------
<!DOCTYPE html>
<html ng-app="SpreadApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
<meta charset="utf-8" />
  
  <!--jQuery References-->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-route.js" type="text/javascript"></script>
  
  <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>

  <script type='text/javascript' src='http://cdn.wijmo.com/jquery.wijmo-open.all.3.20153.83.min.js'></script>
  <script type='text/javascript' src='http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20153.83.min.js'></script>
  <script type='text/javascript' src='http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20153.83.min.js'></script>

  <!--SpreadJS Widgets CSS-->
  <link href="http://cdn.grapecity.com/spreadjs/32015219/css/spread.3.20152.19.css" rel="stylesheet" type="text/css" />
  <script src="http://cdn.grapecity.com/spreadjs/32015219/scripts/spread.all.3.20152.19.min.js" type="text/javascript"></script>
  <script src="http://cdn.grapecity.com/spreadjs/32015219/scripts/interop/angular.spread.3.20152.19.min.js" type="text/javascript"></script>

  
  
  <script type="text/javascript">
    var app = angular.module('SpreadApp', ['wijspread']);

    app.controller('appCtrl', function ($scope, $http) {      
      var modelView = new wijmo.data.AjaxDataView('http://demo.componentone.com/aspnet/NorthwindAPI/api/read/Product', {
        pageSize:10,
        ajax: { crossOrigin: true }
      });

      modelView.refresh();
      
      $scope.modeldata = modelView.toObservableArray();
      //$scope.modeldata = modelView;      

    });

    function addRows() {
      var spread = $("#ss").wijspread("spread");
      var activeSheet = spread.getActiveSheet();

      //activeSheet.addRows(0, 1);
      activeSheet.addRows(0, 2);      
    }

    function countAddedRows() {
      var spread = $("#ss").wijspread("spread");
      var activeSheet = spread.getActiveSheet();      

      var insRows = activeSheet.getInsertRows();
      alert(insRows.length + " rows were added.");
    }
  </script>
</head>
<body>
  <div ng-controller="appCtrl">    
    <wij-spread id="ss" style="width: 100%; height: 400px">
      <sheets>
        <sheet datasource="modeldata" name="Models">
          <columns>
            <column datafield="Product_ID" headertext="Product_ID"></column>
            <column datafield="Supplier_ID" headertext="Supplier_ID"></column>
            <column datafield="Category_ID" headertext="Category_ID"></column>
            <column datafield="Product_Name" headertext="Product_Name"></column>
          </columns>
        </sheet>
      </sheets>
    </wij-spread>
  </div>
  <input type="button" onclick="addRows();" value="add rows">
  <input type="button" onclick="countAddedRows();" value="get count">
</body>
</html>
--------------------------------------------------
回避方法
SpreadJS 9J SP1(Ver.3.20152.21)で修正済み
SpreadJS 9J SP1(Ver.3.20152.21)より前のバージョンでは次の回避方法が有効です。
------------------------------------------

下記いずれかの方法を実装することで現象を回避することが可能です。

【回避方法1】
addRows(row, 1)メソッドを、追加する行数分繰り返して実行する

【回避方法1 コード例】
--------------------------------------------------
//2行追加する場合の例:
sheet.addRows(row, 1);
sheet.addRows(row, 1);
--------------------------------------------------

【回避方法 2】
ObservableArrayではなく、Arrayを連結する

【回避方法 2 コード例】
--------------------------------------------------
//$scope.modeldata = geonameView.toObservableArray();
      
geonameView.subscribe(function (data) {
  $scope.modeldata = data;
  $scope.$apply();
});
--------------------------------------------------