我正在使用UI Grid来显示一些数据.其中一列是文本,所以我有'包含'过滤功能完美.
我也在使用分页.UI-Grid的右角显示如下内容:
1 - 23 of 23 items
在我的页面功能(角度控制器端)中,我需要返回总项数,特别是该行的最后一个"23".我在文档中找不到任何内容(来自文档):
GridOptions(模块ui.grid.pagination中的api)
totalItems客户端分页时自动设置的项目总数,需要由用户为服务器端分页设置"
所以我尝试使用$scope.gridOptions.totalItems但不幸的是,当页面首次加载时它总是返回0.
我的解决方法是使用data.length,这将给我我需要的东西.经过进一步测试后,虽然我意识到在使用过滤后,分页页脚上的总项目会更改为匹配结果的总和.我还没有找到另一种方法来获得这个数字.
还有一件事:过滤完成后是否会触发事件,以便我可以检查$scope.gridOptions.totalItems？
有任何想法吗？提前致谢 :)
Angular UI-Grid有一个名为footerTemplate的属性,它可以提供创建自定义页脚模板的可能性.我尝试在字符串中输入html内容(带有一些文本的div),我也尝试在字符串中添加.html文件名,甚至是渲染div的ID,但它们似乎都不起作用.我也不清楚是否需要为此启用showGridFooter,所以我尝试了两者,但是footerTemplate根本没有显示,或者如果我将showGridFooter设置为true,它会显示默认的页脚(总行数)在网格中).我在这里错过了什么？
我正在使用位于ui-grid.info的角度网格ui-grid .
我正在尝试制作一个自定义过滤器,它将使用日期输入控件按日期过滤网格,一个用于小于,一个用于大于.
我似乎能够在columnDefs中使用它来获取我想要的控件{ field: 'mixedDate', cellFilter: 'date', filterHeaderTemplate: '<div>From <input type="date"> to <input type="date"></div>' }.当将这些东西放在不同的范围内时,我也可以通过设置data-ng-model ="colFilter.term"来进行某种过滤.尽管如此,过滤似乎并不均衡.
有没有人有这方面的代码可行或可以指向我正确的方向？
以下是关于他们自己网站上的主题的一些教程,但我不太确定如何操纵它们以满足我的需求或者甚至可能.
我正在尝试使用服务器端排序,服务器端分页和服务器端过滤来实现角度网格.使用ui-grid(不稳定),我添加了ui.grid.paging并使所有内容都运行起来.非常好,对开发人员的称赞.
但是.... $ scope.gridApi.core.on.filterChanged正在为每个按下的键触发,因此当我在givenname列中搜索"Patrick"时,会触发七个事件并且七个get-requests命中我的服务器.更糟糕的是,因为它是一个很大的集合,我正在过滤,这个操作相当昂贵,结果我甚至相互超越,就像最特定的过滤器获得最快的结果,在处理不太具体的结果之前触发成功.
我想放慢速度,比如"进入后停火".我是javascript和REST的新手,这是我的第一个真实世界项目.我真的很感激如何处理这个问题的任何想法.这感觉就像一个常见的场景,因此可能会有一些我缺少的标准解决方案或最佳实践.
你的,帕特里克.
我正在开发一个小型前端应用程序,它将在ui-grid中显示各种产品运输数据.
我有以下代码:
HTML:
<body ng-controller="MyCtrl">
<p ng-repeat="row in myData">{{row.name}} works at {{row.company}}</p>
<button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span>
<br/>
<br/>
<div id="grid1" ui-grid="gridOptions" external-scopes="editRows" ui-grid-edit ui-grid-row-edit ui-grid-pinning ui-grid-paging ui-grid-cellnav class="grid"></div>
</body>
AngularJS:
var app = angular.module('webapps', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.pinning', 'ui.grid.paging', 'ui.grid.cellNav']);
app.controller('MyCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
//Column definitions
$scope.columns = [
{ field: 'name', displayName: 'First Name', width: 300},
{ field: 'lastname', displayName: 'Last Name', width: 300 }, …我正在尝试将行保存功能与可扩展网格结合使用.目标是能够独立于父行保存子网格行.
$scope.gridOptions = {
expandableRowTemplate: 'components/grid/orderLineTemplate.html',
expandableRowHeight: 150,
expandableRowScope: {
subGridVariable: 'subGridScopeVariable'
},
columnDefs: [
{field: '_id'},
{field: 'number'}
]
};
$http.get(ORDER_API)
.success(function (data) {
for (var i = 0; i < data.length; i++) {
var rowScope = data[i];
rowScope.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{field: 'amount'},
{field: 'packageAmount'},
{field: 'carrierAmount'}
],
data: rowScope.orderLines,
saveRow : $scope.saveRow
}
}
$scope.gridOptions.data = data;
});
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
$scope.saveRow …如果在ui-grid中有一种方法我可以知道网格是否已完成更新行？(就像正在应用过滤器等)？我想在网格视图更改后运行一些函数.
我尝试了以下方法:
$scope.filteredRows = $scope.gridApi.core.getVisibleRows($scope.gridApi.grid);
$scope.$watch('filteredRows', function(){console.log('view updated');});
当网格刚刚完成启动时,上述方法有效,之后,它将不再起作用.
我也尝试过使用filterChangedapi:
$scope.gridApi.core.on.filterChanged($scope, function() {
console.log('filter changed');
foo();
});
此方法的问题在于虽然我可以在更改过滤器时收到通知,但是如果网格非常大,则需要一些时间来完成视图更新,在此foo()之前,在网格更新之前调用该函数完了.
任何想法将不胜感激.
我想在现有网格中添加一个新行.此外,正在推送的行应该是可编辑的.
我在代码下面累了,行已经添加了,但我希望添加可编辑的字段
$scope.addNewItem=function() {
$scope.data.push( { name: 'Test add ' });
};
有人可以帮助我吗？
我有一个使用内置过滤的一堆列的ui-grid.其中一列是"所有者".您可以单击一个按钮,显示"我的项目".单击该按钮时,应使用用户名填充"所有者过滤器"字段并过滤项目.我按照ui-grid文档中的说明设置过滤器如下:
$ scope.gridApi.grid.columns [3] .filters [0] ="somename";
但是"somename"永远不会出现在列过滤器标头中,并且数据永远不会刷新.我试过调用refresh()以及notifyDataChange,但似乎没有任何工作.
谢谢.
我有一个简单的UI网格,包含以下选项:
$scope.transactionGrid = {
enableSorting : true,
enableColumnResize : true,
enableScrollbars : true,
enablePaginationControls : false,
minRowsToShow : 6,
onRegisterApi : function(gridApi) {
$scope.gridEventsApi = gridApi;
}
};
我想隐藏具有特定值的行deleted: "y".
$scope.transactionGrid.data = [
{ Name: "First", deleted: "y" },
{ Name: "Second", deleted: "y" },
{ Name: "Third", deleted: "n" },
{ Name: "Fourth", deleted: "n" }
];
如果没有实际更改数据,是否可以从行中过滤掉？
angular-ui-grid ×10
angularjs ×10
javascript ×5
angular-ui ×2
footer ×1
html ×1
ng-grid ×1
visible ×1