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網格過濾下拉列表

回答

相關問題