angularjs:ui-grid不会渲染超过10列

Question

我有简单的控制器:

angular.module('it.works', ['ngResource'])

  .controller 'ItWorksCtrl', ($scope, Task) ->
    $scope.worksTable = {
      data: Task.query(),
      columnDefs: [
        { field: "created_at", cellFilter: "date:'dd.MM.yyyy'", displayName: '???? ????????' },
        { field: "task", cellFilter: "limitTo:300", displayName: '???????? ??????' },
        { field: "performer", displayName: '???????????' },
        { field: "task_type", displayName: '?????????' },
        { field: "is_orgtechnik_task", displayName: '??????????', cellTemplate: "<div class='ui-grid-cell-contents'><i class='fa {{ COL_FIELD == true && \"fa-check\" }}'></i></div>" },
        { field: "department", displayName: '?????????????' },
        { field: "customer", displayName: '????????' },
        { field: "customer_telephone", displayName: '??????? ?????????' },
        { field: "end_date", displayName: '???? ?????????', cellFilter: "date:'dd.MM.yyyy'" },
        { field: "task_status", displayName: '??????', cellTemplate: "<div class='ui-grid-cell-contents status-{{ COL_FIELD }}'>{{['? ???????? ??????????', '?????????', '???????????'][COL_FIELD]}}</div>"}


      ]
    }

  .factory 'Task', ($resource) ->
    $resource('/api/it_works/:id.json')

当看起来像(它有10列),它看起来很好.

但是,如果我再添加一列(或任何现有的两倍):

{ field: "performer", displayName: '???????????' },

它看起来像那样:

因此,它只呈现4列.但为什么？怎么解决？

Answer 1

我已经解决了这个问题并解决了它.

首先,你应该添加ui-grid-auto-resize到你的HTML:

  <div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize
                    ui-grid-selection class="grid"></div>

然后,你应该添加ui.grid.autoResize到你的js:

angular.module('it.works', ['ngResource','ngAnimate', 'ngSanitize',  'ui.grid', 'ui.grid.pagination','ui.grid.autoResize','ui.grid.selection', 'ui.grid.resizeColumns'])

  .controller 'ItWorksCtrl', ($scope, Task) ->
    $scope.worksTable = {
      data: Task.query(),
      columnDefs: [
        { field: "created_at", cellFilter: "date:'dd.MM.yyyy'", displayName: '???? ????????' },
        { field: "task", cellFilter: "limitTo:300", displayName: '???????? ??????' },
        { field: "performer", displayName: '???????????' },
        { field: "task_type", displayName: '?????????' },
        { field: "is_orgtechnik_task", displayName: '??????????', cellTemplate: "<div class='ui-grid-cell-contents'><i class='fa {{ COL_FIELD == true && \"fa-check\" }}'></i></div>" },
        { field: "department", displayName: '?????????????' },
        { field: "customer", displayName: '????????' },
        { field: "customer_telephone", displayName: '??????? ?????????' },
        { field: "end_date", displayName: '???? ?????????', cellFilter: "date:'dd.MM.yyyy'" },
        { field: "task_status", displayName: '??????', cellTemplate: "<div class='ui-grid-cell-contents status-{{ COL_FIELD }}'>{{['? ???????? ??????????', '?????????', '???????????'][COL_FIELD]}}</div>"}


      ]
    }

  .factory 'Task', ($resource) ->
    $resource('/api/it_works/:id.json')