在 ui-grid 中显示数据的一些问题

Question

我在教程项目中使用 ui-grid。

控制器内部定义如下：

(function () {
      "use strict"; 
angular.module("workPlan").controller("workPlanListController",["$http","$log",workPlanListController]);

function workPlanListController($http,$log) {
    var self = this;

    this.gridOptions = {
        expandableRowTemplate: 'expandableRowTemplate.html',
        //expandableRowHeight: 150,
        enableColumnMenus: false,
        enableSorting: true,
        enableFiltering: true,
        onRegisterApi: function (gridApi) {
            gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                if (row.isExpanded) {
                    row.entity.subGridOptions = {
                        columnDefs: [{ name: 'name' },
                                     { name: 'gender' },
                                     { name: 'company' }]
                    };

                    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                      .success(function (data) {
                          row.entity.subGridOptions.data = data;
                      });
                }
            });
        }
    }
  this.gridOptions.columnDefs = [
      { name: 'PId', field: 'id'},
      { name: 'PName',field: 'name'},
      { name: 'PAge', field: 'age'}];



    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
      .success(function (data) {
          self.gridOptions.data = data;
      });
}
})();

这是我得到的视图：

但是有问题，如上图所示，字段id的内容出现在PAge列下，并且PAge 字段的内容出现在 PId 列下。

知道为什么会这样吗？为什么一栏的内容出现在另一栏的下面？会不会和本地化有关（在我的项目中我使用的是希伯来语）？

Answer 1

有错别字：{ 名称：'PId'，字段：'id'，}

删除逗号，也许可以。

问候克里斯蒂安

Answer 2

    (function () {
        "use strict";

    angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.expandable',
    'ui.grid.selection', 'ui.grid.pinning']).controller('MainCtrl',
    function($scope,$http,$log) {

        $scope.name = 'World';
        // Do things

        $scope.gridOptions = {
            expandableRowTemplate: 'expandableRowTemplate.html',
            //expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: true,
            onRegisterApi: function (gridApi) {
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            columnDefs: [{ name: 'name' },
                                         { name: 'gender' },
                                         { name: 'company' }]
                        };

                        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                          .success(function (data) {
                              row.entity.subGridOptions.data = data;
                          });
                    }
                });
            }
        }
        $scope.gridOptions.columnDefs = [
          { name: 'PId', field: 'id'},
          { name: 'PName',field: 'name'},
          { name: 'PAge', field: 'age'}];

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
          .success(function (data) {
              $scope.gridOptions.data = data;
          });

    });


    }());

HTML:
======
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>


    <script src="app.js"></script>
  </body>
</html>

CSS:
====
.grid {
  width: 100%;
  height: 400px;
}

expandableRowTemplate.html:
===========================

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

you refer this plunker http://plnkr.co/edit/TAbvGUsDKS6pcbEkGWV6?p=preview
or replace the js file. it will work well.

Answer 3

看起来这个问题可能与 localization/language 有关。假设页面设置为呈现文本 right-to-left，该问题可以在 this Plunkr.

上重现

不幸的是，它看起来像 ui-grid does not yet support RTL text，但有可用的解决方法。

将以下 CSS 应用于您的网格将适当地对齐您的列和 headers：

.grid[dir=rtl] .ui-grid-header-cell,
.grid[dir=rtl] .ui-grid-cell{
  float:right !important;
} 

.grid[dir=rtl] .ui-grid-scrollbar-vertical {
  width: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  right:inherit;
  left: 4px;
  top: 0;
}

Plunkr example

在 ui-grid 中显示数据的一些问题

Some problems displaying data in ui-grid

angularjs

localization

ng-grid

angular-ui-grid