2015-12-14 19 views
1

我正在尋找一個有基本篩選器和自定義模板的好例子。我無法在教程網站上找到一個很好的示例。請參閱附加的plunk,在其中設置篩選並使用自定義標題模板。過濾是否需要嵌入到頁眉模板中?Angular UI Grid - 自定義頁眉模板和篩選

http://plnkr.co/edit/VMETPu30iiFc3GYmZZRS?p=preview

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    $scope.columns = [{ field: 'name', headerCellTemplate: '<div class="grand-total">Name</div>' }, { field: 'gender' }]; 
    $scope.gridOptions = { 
    enableSorting: true, 
    columnDefs: $scope.columns, 
    enableFiltering: true 
    }; 

    $scope.remove = function() { 
     $scope.columns.splice($scope.columns.length-1, 1); 
    } 

    $scope.add = function() { 
     $scope.columns.push({ field: 'company', enableSorting: false }); 
    } 

    $scope.splice = function() { 
     $scope.columns.splice(1, 0, { field: 'company', enableSorting: false }); 
    } 

    $scope.change = function() { 
    $scope.columns = [{ field: 'First', }, { field: 'Second' }, { field: 'third' }]; 
    $scope.gridOptions.columnDefs = $scope.columns; 
    } 

    $scope.unsplice = function() { 
     $scope.columns.splice(1, 1); 
    } 

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
     console.log(data) 
    }); 
}]); 

提前感謝!

回答

1

您可以創建一個自定義模板並將其添加到您的網格。嘗試此post您可以獲得一些ideas.I更新了博客post.you可以做這樣的事情。希望這會有所幫助。 Code Sample