ui网格过滤下拉列表

我的列中的数据（通过下拉菜单提供）和列的过滤器应该匹配。所以我使用相同的数组来填充两者。然而，对于数据，我可以告诉网格字段名称用于editDropdownValueLabel和editDropdownIdLabel。过滤器属性是否有这样的事情？ui网格过滤下拉列表

我问，因为我正在设置单元格数据下拉值和从Web api调用中检索的数组中的过滤器，并且我的单元格数据下拉列表正确填充，但是我的过滤器都会说'未定义'，这导致我相信它不知道要使用的selectOptions数组属性中的什么字段。

当我定义我的网格时，我省去了单元格和过滤器的数组，因为我会填充web api调用返回的数据。

{ 
    name: 'Status', 
    field: 'Status', 
    width: 200, 
    editType: 'dropdown', 
    editableCellTemplate: 'ui-grid/dropdownEditor', 
    editDropdownIdLabel: 'Value', 
    editDropdownValueLabel: 'Value', 
    filter: { 
     type: uiGridConstants.filter.SELECT, 
     condition: uiGridConstants.filter.EXACT 
    } 
}

如何从Web API数据填充单元格下拉列表和过滤器下拉列表。

$scope.gridStore.columnDefs[i].editDropdownOptionsArray = response.data[colFieldName]; 
$scope.gridStore.columnDefs[i].filter.selectOptions = response.data[colFieldName];

来源

2017-02-03 user441521

没有看到您的更多的代码很难说究竟发生了什么，但在下面的例子我动态地添加了Status列的定义。

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']); 
 

 
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) { 
 

 
    $scope.myData = [{ 
 
    "Name": "Cox", 
 
    "Number": 41, 
 
    "Status": 1, 
 
    "Date": "10/06/1981" 
 
    }, { 
 
    "Name": "Lorraine", 
 
    "Number": 431, 
 
    "Status": 2, 
 
    "Date": "03/04/1983" 
 
    }, { 
 
    "Name": "Nancy", 
 
    "Number": 341, 
 
    "Status": 1, 
 
    "Date": "10/06/1981" 
 
    }]; 
 

 
    // grid setup 
 
    $scope.gridStore = { 
 
    data: $scope.myData, 
 
    enableSorting: true, 
 
    enableFiltering: true, 
 
    flatEntityAccess: true, 
 
    fastWatch: true, 
 
    enableHorizontalScrollbar: 1, 
 
    enableCellSelection: true, 
 
    enableCellEditOnFocus: true, 
 
    columnDefs: [{ 
 
     name: 'Number', 
 
     field: 'Number', 
 
     width: 100, 
 
     pinnedLeft: true, 
 
     enableCellEdit: false 
 
     }, { 
 
     name: 'Name', 
 
     field: 'Name', 
 
     width: 200, 
 
     pinnedLeft: true, 
 
     enableCellEdit: false 
 
     }, { 
 
     name: 'Date', 
 
     field: 'Date', 
 
     width: 100 
 
     } 
 
    ] 
 
    }; 
 
    
 
    this.typeLookup = function (val, arr) { 
 
    var result = arr.filter(function(v) { 
 
     return v.id === val; 
 
    })[0].type; 
 

 
    return result; 
 
    }; 
 

 

 
    /* simulate getting JSON settings data here ... */ 
 
    
 
    var jsonDef = { name: 'Status', field: 'Status', width: 150, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownIdLabel: 'id', editDropdownValueLabel: 'type', filter: { type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } }; 
 

 
    var options = [{ 
 
    id: 1, 
 
    type: 'Closed' 
 
    }, { 
 
    id: 2, 
 
    type: 'Pending' 
 
    }, { 
 
    id: 3, 
 
    type: 'Open' 
 
    }]; 
 

 
    $scope.gridStore.columnDefs.push(jsonDef); 
 
    
 
    var idx = $scope.gridStore.columnDefs.length - 1; 
 
    
 
    $scope.gridStore.columnDefs[idx].cellTemplate = '<div class="ui-grid-cell-contents">{{ grid.appScope.Main.typeLookup(COL_FIELD,' + JSON.stringify(options) + ') }}</div>'; 
 
    $scope.gridStore.columnDefs[idx].editDropdownOptionsArray = options; 
 
    $scope.gridStore.columnDefs[idx].filter.selectOptions = options.map(function(obj) { 
 
    var rObj = {'value': obj.id, 'label': obj.type}; 
 
    return rObj; 
 
    }); 
 
    
 
    /* end simulated JSON retrieval */ 
 

 
}]);

.grid { 
 
    height: 200px; 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="MainCtrl as Main"> 
 
    <div id="grid1" ui-grid="gridStore" ui-grid-edit class="grid"></div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2017-02-22 16:34:34

如果我从api调用返回的数据具有标签和值的propeties，那么它的工作原理。我没有意识到这是ui-grid寻找的属性。小写字母也是如此。这导致答案，所以你得到的信贷。谢谢！ – user441521

一个很棒的功能与下拉列表上的用户界面电网打交道时，我用的是我对待他们就像他们总是动态的，所以我不再需要处理OptionsArray，过滤器，标签等（这是一个疼痛与动态数据）。

当您计划在角度ui网格中扩展您的知识时，只需查看一下。

HTML：

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

控制器：

$scope.gridOptions = { 
    enableSorting: true, 
    enableFiltering: true, 
    enableCellEditOnFocus: true, 
    columnDefs: [ 
     { field: 'name', 
     sort: { 
      direction: 'desc', 
      priority: 1 
     } 
     }, 
     { field: 'gender', editType: 'dropdown', enableCellEdit: true, 
      editableCellTemplate: 'temp.html' }, 
     { field: 'company', enableSorting: false } 
]};

temp.html：

<div> 
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType"> 
     <option value="" selected disabled>Choose Gender</option> 
    </select> 
</div>

来源

2017-02-03 22:02:28

这项工作做得很好，当你有几列，但我有15，真舍不得对每一个的htm文件。它实际上是更少的代码，或者应该是，填充选项数组。任何想法如何走这条路？ – user441521

您是否尝试过在数据集中使用过滤器方法？ https://docs.angularjs.org/api/ng/filter/filter检查一下 - 这可能有帮助。 –

@KaushalPatel我想我不确定我会在哪里或为什么使用它？我有很好的数据阵列。它只是让这些数组作为我需要显示的列过滤器。现在他们显示了所有'未定义'，这似乎像ui-grid无法找出数组对象中用作标签/值的字段。 – user441521

ui网格过滤下拉列表

回答

相关问题