Question

我很难为我的表创建网格视图，其数据来自数据库，作为JSON格式的响应。 UI和Javascript代码都在同一个文件中。我已经在应用程序的根路径上使用npm包安装了ng-grid。

的index.html

<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script>
<script src="ng-grid-2.0.11.min.js"></script>

 <table style="width:50%" class="table table-bordered">
      <thead>
         <tr>
           <th>Select</th>
           <th>FR_ID</th>
           <th>FR_Client</th>
           <th>FR_Source</th>
           <th>FR_Destination</th>
         </tr>
       </thead>

       <tbody>
          <tr ng-repeat="search in searches">
            <td><input type="checkbox" /></td>
            <td>{{search.id}}</td>
            <td>{{search.client}}</td>
            <td>{{search.source}}</td>
            <td>{{search.destination}}</td>
          </tr>
        </tbody>

   </table>
            <div class="small-12 columns">
                    <div class="submitButton" id="submitButton" ng-app="searchapp">
                        <div style="visibility:hidden;">{{y=name}}</div>

                        <input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" />
                    </div>
                </div>
            </div>

角：

     <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl', function ($scope, $http){

             $scope.seachRecords = function (y) {
                var httpRequest = $http({
                    method: 'GET',
                    url: '/user/search?seachString='+y,

                }).then(function (response, status) {

                    var responsetest = JSON.stringify(response.data);

                    $scope.searches = response.data;

                }, function myError(data, status) {
                    $scope.searches = data;     
                });
            }
        });
    </script>

我可以创建下面的表格，如附图所示，但我试图获取网格视图但无法形成它，请建议更改。

Answer 1

JSON数据应该可以使用网格视图，如下所示

<div data-ng-grid="searches"></div>

注意：'responsetest'变量似乎未使用。

响应可以直接附加到“搜索”。网格视图需要“数据”属性来访问搜索数据。

角

$scope.searches = JSON.stringify(response);

Answer 2

试试这个？

HTML：

<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script>
<script src="ng-grid-2.0.11.min.js"></script>

<div ng-grid="searches"></div>

<div class="small-12 columns">
  <div class="submitButton" id="submitButton" ng-app="searchapp">
      <div style="visibility:hidden;">{{y=name}}</div>

      <input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" />
  </div>
</div>

JS：

 <script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl', function ($scope, $http){
       $scope.seachRecords = function (y) {
          var httpRequest = $http({
              method: 'GET',
              url: '/user/search?seachString='+y,

          }).then(function (response, status) {

              var responsetest = JSON.stringify(response.data);

              $scope.searches = {
                data: response.data
              }

          });
      }
    });
</script>

执行ng-grid后： http://angular-ui.github.io/ui-grid/

在Angular js中创建网格视图

2 个答案: