Я работаю с angular ui-grid версии 3.0 и не могу найти способ получить индекс строки, чтобы добавить столбец нумерации в сетку. Я хотел бы помочь мне.
Как получить индекс строки в angular ui-grid 3.0
Ответ 1
Невозможно легко получить индекс строки, так что это зависит от того, что вы пытаетесь сделать. Что вы ожидаете от нумерации, когда кто-то сортирует данные - вы хотите, чтобы номера оставались такими, какие они были в исходных данных, или вы хотите, чтобы они изменились и соответствовали новому порядку сортировки?
В FAQ http://ui-grid.info/docs/#/tutorial/499_FAQ мы находим:
Вопрос в том, чего вы действительно пытаетесь достичь. Вам нужен фактический индекс строки или вы хотите отображать последовательный идентификатор во всех ваших строках?
Если последнее, вы можете сделать это, просто добавив столбец-столбец к своим данным:
$scope.myData.forEach( function( row, index){
row.sequence = index;
});
Если вы хотите показать индекс строки внутри внутренних элементов сетки, это зависит от того, какой из внутренних функций вы хотите. Вы можете получить индекс строки в grid.rows, который будет отображать строку как она находится в списке исходных строк (не фильтруется и не сортироваться), или индекс строки в grid.renderContainers.body.visibleRowCache(фильтруется и сортировка) или индекс рендеринга строки в отображаемых в настоящее время строках (данная виртуализация, как правило, является особенно бесполезным числом).
Если вы в порядке, что всякий раз, когда кто-то сортирует или фильтрует, цифры будут меняться, тогда вы можете сделать это с помощью cellTemplate, что было бы примерно так:
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'
Ответ 2
cellTemplate: ' {{rowRenderIndex + 1}} '
Ответ 3
проблема первого решения состоит в том, что он не работает должным образом с нумерацией страниц. шаблон ячейки столбца индекса должен быть примерно таким, чтобы иметь правильный индекс на каждой странице, а не начинаться с 1 на каждой странице:
{ field: 'index', displayName: 'Index', width: '50', cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)+(grid.options.paginationPageSize*(grid.options.paginationCurrentPage-1))+1}}</div>' }
это решение будет работать даже для нумерации страниц на стороне клиента или для нумерации страниц на стороне сервера
Ответ 4
используя этот способ для решения этой проблемы...
$http.get('./api/ioni_users')
.success(function(data) {
$scope.gridOptions.data = data;
angular.forEach(data, function(data, index) {
data["index"] = index+1;
//data.push({"index":index+1})
})
});
Ответ 5
Следующее работало для меня, поскольку мне нужно было видеть индекс строки, поскольку она связана со всем набором данных, а не только с тем, что было видимо для пользователя. Его можно очистить, но это исходный код, который я смог получить, используя формулу
((0/100)+((2*100)-100))+1 where
0 = rowIndex (Zero Based)
100 = pagination page size
2 = current page
+1 = because the array is zero based
cellTemplate: '<div class="ui-grid-cell-contents">{{(((grid.renderContainers.body.visibleRowCache.indexOf(row) / grid.options.paginationPageSize)*100)+((grid.options.paginationPageSize * grid.options.paginationCurrentPage) - grid.options.paginationPageSize)) + 1}} </div>'
Надеюсь, что это поможет.
Ответ 6
Используйте rowRenderIndex в своем шаблоне ячейки, это собственная переменная, доступная в каждой строке
Например
columnDefs: [
{
enableFiltering: false,
enableSorting: false,
field: "sn",
displayName: "Sn#",
cellTemplate:
"<div class=\"ui-grid-cell-contents\" >{{rowRenderIndex}} s</div>"
}
]