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

Question

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

这是 Controller 内部的定义:

(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;
      });
}
})();

这是我得到的 View :

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

知道为什么会发生这种情况吗？为什么一栏的内容出现在另一栏下方？它可能与本地化有关(在我的项目中我使用希伯来语)？

Answer 1

看来该问题可能与本地化/语言有关。假设页面设置为从右到左呈现文本，则可以在 this Plunkr 上重现该问题。 .

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

将以下 CSS 应用到网格将适当对齐列和标题:

.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