Question

这里我使用wijmo网格为员工列表创建了示例程序，这里我的问题是我无法在gird中推送数据，注意：错误显示push undefined 提前致谢........................................

angular.module('app', ['wj']);



'use strict';

// declare app module
var app = angular.module('app');

// controller
app.controller('appCtrl', function ($scope, $http) {
  data = [];
  
  $scope.save=function(reg)
   { 
		var obj = [reg]; 
    
		$scope.data = new wijmo.collections.CollectionView(obj);
    }

    // create the filter and expose it to scope for customization
    $scope.initialized = function (s, e) {
        var flex = s;
        $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
        $scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
        $scope.$apply();
        $scope.filter.filterChanging.addHandler(function () {
            console.log('filter changing');
        });
        $scope.filter.filterChanged.addHandler(function () {
            console.log('filter changed');
        });
        $scope.filter.filterApplied.addHandler(function () {
            console.log('filter applied');
        });
    }

   

    // filters are localizable
 
    // invalidate all Wijmo controls
    // using a separate function to handle strange IE9 scope issues
 
    $scope.data = new wijmo.collections.CollectionView(data);

     
});

<!DOCTYPE html>
<html>

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
     <!-- Wijmo -->
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
  
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
  
    <link href="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/styles/vendor/wijmo.min.css" rel="stylesheet" />

    <!-- Wijmo-Angular interop -->
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
    
    
    
    
  </head>
<body ng-app="app" ng-controller="appCtrl">
 
    
    <table>
      <tr>
         <td>First Name</td>
        <td>:</td>
        <td><input type="text" ng-model="reg.fname">  </td>
        </tr>
      <tr>
         <td>Last Name</td>
        <td>:</td>
        <td><input type="text" ng-model="reg.lname">  </td>
        </tr>
      <tr>
         <td>Midle Name</td>
        <td>:</td>
        <td><input type="text" ng-model="reg.mname">  </td>
        </tr>
      
       <tr>
         <td><input type="submit" ng-click=save(reg)> </td>
      
        </tr>
      
      
    </table>
  
  
        <wj-flex-grid
            style="height:300px"
            initialized="initialized(s, e)"
            items-source="data">
                <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
                <wj-flex-grid-column header="fname" binding="fname" format='MMM/dd/yyyy'></wj-flex-grid-column>
                <wj-flex-grid-column header="lname" binding="lname" format="t"></wj-flex-grid-column>
                <wj-flex-grid-column header="mname" binding="mname"></wj-flex-grid-column>
                
        </wj-flex-grid>
      
        
         
         
    </div>

</html>

Answer 1

你应该定义newItemCreator函数，它不带参数：

.controller("appCtrl", function ($scope) {

  var data = new wijmo.collections.CollectionView([]);

  // here
  data.newItemCreator = function() { 
    var item = {};
    item = angular.copy($scope.reg);
    return item;
  };

  $scope.data = data;

  // create the filter and expose it to scope for customization
  $scope.initialized = function (s, e) {
      var flex = s;
      $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
      $scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
      $scope.$apply();
      $scope.filter.filterChanging.addHandler(function () {
          console.log('filter changing');
      });
      $scope.filter.filterChanged.addHandler(function () {
          console.log('filter changed');
      });
      $scope.filter.filterApplied.addHandler(function () {
          console.log('filter applied');
      });
  };

});

并在按钮上使用addNew（）方法：

<td><button type="button" ng-click=data.addNew()>Save</button></td>

如何在AngularJs中将数据推送到网格

1 个答案: