Member 12783584 Ответов: 1

Фильтрация столбцов в UI-grid в angularjs не работает

Я использую ui grid для своего приложения. Я должен использовать фильтр столбцов. Я пытаюсь применить свойство enableFiltering к сетке, но оно не работает. Я что-то упустил?

Что я уже пробовал:

$область действия.файле griddata = [ {
название : "Морони",
возраст: 50 лет,
кафедра : "НR"
}, {
название : "Тианкум",
Возраст: 43 года,
отдел : "GM"
}, {
название : "Иаков",
Возраст : 27 лет
}, {
название : "Нефий",
Возраст: 29 лет
}, {
название : "Енос",
Возраст: 34 года
} ];

$область действия.columnDefs = [ {
имя : "имя",
поле : "Имя",

}, {
имя : "возраст",
поле: "возраст",
ширина: "30%"

}, {
название: "отдел",
поле: "отдел",
ширина: "30%",

} ]
$область действия.сетки = {
сведения : $охвата.файле griddata,
columnDefs : $охвата.columnDefs,
enableColumnMenus : накладные,
enableColumnMoving : правда,
enableFiltering : правда,

}

1 Ответов

Рейтинг:
2

Gokulprasad05 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.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">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridData = [ {
name : "Moroni",
age : 50,
department : 'HR'
}, {
name : "Tiancum",
age : 43,
department : 'GM'
}, {
name : "Jacob",
age : 27
}, {
name : "Nephi",
age : 29
}, {
name : "Enos",
age : 34
} ];

$scope.columnDefs = [ {
name : 'First Name',
field : 'name',

}, {
name : 'Age',
field : 'age',
width : "30%"

}, {
name : 'Department',
field : 'department',
width : "30%",

} ];
$scope.grid = {
data : $scope.gridData,
columnDefs : $scope.columnDefs,
enableColumnMenus : false,
enableColumnMoving : true,
enableFiltering : true,

}
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: gridData }" class="myGrid"></div>
</div>
</body>
</html>