gpt4 book ai didi

javascript - ui网格过滤下拉

转载 作者:行者123 更新时间:2023-11-29 21:10:42 25 4
gpt4 key购买 nike

我的列中的数据(由下拉列表提供)和列的过滤器应该匹配。所以我使用相同的数组来填充两者。但是,对于数据,我可以告诉 ui 网格要用于 editDropdownValueLabel 和 editDropdownIdLabel 的字段名称。过滤器属性有这样的东西吗?

我问是因为我正在设置单元格数据下拉值和从网络 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];

最佳答案

在没有看到更多代码的情况下,很难准确地说出发生了什么,但在下面的示例中,我动态添加了 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>

关于javascript - ui网格过滤下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42033611/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com