Angular UI Grid - 自定义标题模板和过滤 [英] Angular UI Grid - Custom Header Template and Filtering

问题描述

我正在寻找一个具有基本过滤器和自定义模板的好例子.我在教程网站上找不到一个好的例子.请参阅我正在设置过滤并拥有自定义标题模板的附加 plunk.过滤需要嵌入到header模板中吗?

I'm looking for a good example of having a basic filter and having a custom template. I'm having trouble finding a good example on the tutorial sites. See attached plunk where I'm setting filtering and having a custom header template. Does the filtering need to be embedded into the header template?

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)
    });
}]);

提前致谢！

推荐答案

您可以创建自定义模板并将其添加到您的网格中.试试这个 post 你可以得到一些想法.我已经更新了博客文章中的一些代码.你可以做这样的事情.希望这会有所帮助.代码示例.

You can create a custom template and add it to your grid.Try this post you can get some ideas.I have updated some of the codes in blog post.you can do something like this.Hope this will help.Code Sample.

这篇关于Angular UI Grid - 自定义标题模板和过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！