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

发布时间：2020-12-17 17:21:15 所属栏目：安全来源：网络整理

导读：我有简单的控制器： angular.module('it.works',['ngResource']) .controller 'ItWorksCtrl',($scope,Task) - $scope.worksTable = { data: Task.query(),columnDefs: [ { field: "created_at",cellFilter: "date:'dd.MM.yyyy'",displayName: 'Дата со

我有简单的控制器：

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列),它看起来很好.

Correct view

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

{ field: "performer",

它看起来像那样：

enter image description here

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

解决方法

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

首先,你应该在你的html中添加ui-grid-auto-resize：

<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',($resource) ->
    $resource('/api/it_works/:id.json')

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!