我正在寻找有关 Angular UI Grid 功能的帮助。具体来说,我正在研究 过滤 ,尽管我能够 像我 在其网站上 的 示例中 那样在应用程序中使用自由格式文本字段成功实现排序,但 我希望能有所帮助,找到一种方法来使用预先填充的 文本字段 进行排序某些列的下拉菜单 。
需要说明的是: 通过预填充,我的意思是我希望通过我的代码填充下拉列表。我很好,如果解决方案包含硬编码数据,但我的最终目标是让预填充包含要排序的列的 唯一 数据值集:)
我已经在KendoUI(例如Kendodropdownlist)中看到了此功能,但是我对该解决方案附带的价格标签不感兴趣。我想坚持上面提到(和链接)的AngularUI网格。在StackOverflow上,我发现了一个类似的问题,但是不幸的是,它似乎并没有受到太大的关注。我希望通过对要查找的内容进行更详细的说明,我将得到比在此找到的更完整的答案。
这是我的控制器中当前的内容:
var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate', 'ngTouch', 'ui.grid' ]); simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) { $scope.columns = [ { field : 'trans_detail', displayName : 'Transaction' }, { field : 'cust_name', displayName : 'Customer' }, { field : 'quantity', displayName : 'Quantity', filters : [ { condition : uiGridConstants.filter.GREATER_THAN, placeholder : 'greater than' }, { condition : uiGridConstants.filter.LESS_THAN, placeholder : 'less than' } ] }, { field : 'today_date', displayName : 'Current Date' } ]; $scope.gridOptions1 = { enableSorting : true, enableFiltering : true, columnDefs : $scope.columns, onRegisterApi : function(gridApi) { $scope.grid1Api = gridApi; } }; $http.get("../services/Coherence/Cache").success(function(data) { $scope.gridOptions1.data = data; }); } ]);
以下是输出-带有自由格式的文本字段
对于此特定示例,“客户”,“数量”和“当前日期”列可能会保留为自由格式下拉列表,但我真的很希望能够使用预先填充的交易下拉列表进行过滤(并将其放在我的工具箱中)当然用于未来的项目!)。
谢谢!
您可以使用此处记录的内置selectOptions过滤器功能:http ://ui- grid.info/docs/#/tutorial/103_filtering
例:
angular.module('exampleApp', ['ui.grid']) .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) { var animals = [ { id: 1, type: 'Mammal', name: 'Elephant' }, { id: 2, type: 'Reptile', name: 'Turtle' }, { id: 3, type: 'Mammal', name: 'Human' } ]; var animalTypes = [ { value: 'Mammal', label: 'Mammal' }, { value: 'Reptile', label: 'Reptile'} ]; $scope.animalGrid = { enableFiltering: true, columnDefs: [ { name: 'type', field: 'type', filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT } }, { name: 'name', name: 'name'} ], data: animals }; }]); <link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <div ng-app="exampleApp"> <div ng-controller="exampleCtrl"> <h1>UI Grid Dropdown Filter Example</h1> <div ui-grid="animalGrid" class="grid"></div> </div> </div>