angularjs:ui-grid 不呈现超过 10 列 [英] angularjs: ui-grid not renders more than 10 columns
本文介绍了angularjs:ui-grid 不呈现超过 10 列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的控制器:
angular.module('it.works', ['ngResource']).controller 'ItWorksCtrl', ($scope, Task) ->$scope.worksTable = {数据:Task.query(),列定义:[{ 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')
当 in 看起来像这样(它有 10 列)时,它看起来不错.
但是如果我再添加一列(或将任何现有列加倍):
{ field: "performer", displayName: 'Исполнитель' },
看起来像这样:
因此,它仅呈现 4 列.但为什么?如何解决?
解决方案
我遇到了这个问题并解决了它.
首先,您应该将 ui-grid-auto-resize
添加到您的 html:
然后,您应该将 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 = {数据:Task.query(),列定义:[{ 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')
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')
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: 'Исполнитель' },
It becomes look like that:
So, it renders only 4 columns. But why? How to fix it?
解决方案 i have come with this issue and have solved it.
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>
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屋!
查看全文