[英]Can i use a dropdown in ui-grid filling it with data from a database?
I'm facing some issue here when i try to use a dropdown inside a ui-grid passing to it fields from a database. 当我尝试使用ui-grid内的下拉列表从数据库传递到它的字段时,我在这里面临一些问题。 Following the docs , in the gridOptions.columnDefs, i have create an array of id and a value, like: 在文档之后 ,在gridOptions.columnDefs中,我创建了一个id和值的数组,如:
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
{ id: 1, gender: 'male' },
{ id: 2, gender: 'female' }
] },
but, in my case the "id" and the "value", must be fields from the database, as follows: 但是,在我的情况下,“id”和“value”必须是数据库中的字段,如下所示:
{ id: data.Id, gender: data.Nome }
It just don't work. 它只是不起作用。 Any ideas about how to solve this? 关于如何解决这个问题的任何想法? Thanks!! 谢谢!!
You could consider using Angular Grid - it allows you to have custom cell renderers, where you can have a cell renderer that's interactive. 您可以考虑使用Angular Grid - 它允许您拥有自定义单元格渲染器,您可以在其中使用交互式单元格渲染器。 I have it working in my job (can't post the code example as it belongs to the company I work for) however if this is an option I can mock something up and post it. 我有它在我的工作中工作(不能发布代码示例,因为它属于我工作的公司)但是如果这是一个选项我可以模拟一些东西并发布它。
Try something like this 尝试这样的事情
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: YourDataArray,
editDropdownIdLabel: 'Id',
editDropdownValueLabel: 'Nome'
YourDataArray could be a service call - for example, for me I have a call to MyServiceName.Get() - the objects returned might have properties like 'Id' and 'Nome' as in your question. YourDataArray可以是一个服务调用 - 例如,对我来说,我有一个MyServiceName.Get()的调用 - 返回的对象可能在你的问题中有像'Id'和'Nome'这样的属性。
Here is my approach. 这是我的方法。 It was based on this thread: 它基于这个主题:
https://github.com/angular-ui/ng-grid/issues/2808 https://github.com/angular-ui/ng-grid/issues/2808
1) I defined an uiGridFactory.js as this one: 1)我将uiGridFactory.js定义为:
angularFactories.factory('uiGridFactory', function ($http, $rootScope) {
var factory = {};
/* It returns a dropdown filter to help you show editDropdownValueLabel
*
* Parameters:
*
* - input: selected input value, it always comes when you select a dropdown value
* - map: Dictionary containing the catalog info. For example:
* $scope.languageCatalog = [ {'id': 'EN', 'description': 'English'}, {'id': 'ES', 'description': 'Español'} ]
* - idLabel: ID label. For this example: 'id'.
* - valueLabel: Value label. For this example: 'description'.
*
* 1) Configure cellFilter this way at the ui-grid colDef:
*
* { field: 'languageId', name: 'Language'), editableCellTemplate: 'ui-grid/dropdownEditor',
* editDropdownIdLabel: 'id', editDropdownValueLabel: 'description',
* editDropdownOptionsArray: $scope.languageCatalog,
* cellFilter: 'mapDropdown:row:row.grid.appScope.languageCatalog:"id":"description":languageCatalog' },
*
* 2) Append this snippet to the controller:
*
* .filter('mapDropdown', function(uiGridFactory) {
* return uiGridFactory.getMapDrowdownFilter()
* });
*
*/
factory.getMapDrowdownFilter = function() {
return function(input, map, idLabel, valueLabel) {
if (map != null)
{
for (var i = 0; i < map.length; i ++) {
if (map[i][idLabel] == input)
{
return map[i][valueLabel];
}
}
}
return "";
}
}
return factory;
});
2) Then I added the filter mapDropdown at the end of the controller that requires dropdown logic 2)然后我在需要下拉逻辑的控制器的末尾添加了过滤器mapDropdown
.filter('mapDropdown', function(uiGridFactory) {
return uiGridFactory.getMapDrowdownFilter()
});
3) I added this cellFilter to the column definition that contains the dropdown: 3)我将此cellFilter添加到包含下拉列表的列定义中:
columnDefs: [
{ field: 'id', 'ID')},
{ field: 'languageId', name: 'Language',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id', editDropdownValueLabel: 'description',
editDropdownOptionsArray: $scope.languageCatalog,
cellFilter: 'mapDropdown:row.grid.appScope.languageCatalog:"id":"description"' },
{ field: 'comments', 'Comments' }
]
where the mapDropdown() parameters are: mapDropdown()参数是:
a) the catalog map (row.grid.appScope.languageCatalog) a)目录图(row.grid.appScope.languageCatalog)
b) the ID label b)ID标签
c) the VALUE label c)VALUE标签
Note: In my example I used $scope.languageCatalog variable that was loaded from Database with a factory. 注意:在我的示例中,我使用了带有工厂从Database加载的$ scope.languageCatalog变量。 You have to implement your own. 你必须实现自己的。
factory.getLanguages = function (callback) {
$http.get(RESOURCES.REST_ADDRESS + 'getLanguages').
success(function (data, status, headers, config) {
callback(data);
}).
error(function (data, status, headers, config) {
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.