angularjs:ui-grid不会渲染超过10列 [英] angularjs: ui-grid not renders more than 10 columns

问题描述

我有一个简单的控制器:

I have simple controller:

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列)，看起来不错.

When in looks like that (it have 10 columns), it looks fine.

但是，如果我再添加一列(或将现有列增加一倍):

But if I add one more column (or double any existing):

{ field: "performer", displayName: 'Исполнитель' },

它看起来像这样:

因此，它仅呈现4列.但为什么?如何解决?

So, it renders only 4 columns. But why? How to fix it?

推荐答案

我已经解决了这个问题.

i have come with this issue and have solved it.

首先，您应该将ui-grid-auto-resize添加到您的html中:

First, you should add ui-grid-auto-resize to your html:

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

然后，您应该在您的js中添加ui.grid.autoResize:

Then, you should add ui.grid.autoResize to your 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')

这篇关于angularjs:ui-grid不会渲染超过10列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！