1

Мне нужно чтобы в таблице была одна колонка - "Ошибки", и в ячейке были вместе id и name, например так:

534gfd74 - cannot shut down because a modal dialog is ac...

И чтобы фильтр работал сразу и по id и по name.

Вопрос: как объединить несколько колонок в одну, и чтобы фильтр работал по всем объединенным колонкам?

$scope.GridOptions = {
        enableFiltering: true,
        enableScrollbars: false,
        enableHorizontalScrollbar: 2,
        enableVerticalScrollbar: 2,
        enableRowHeaderSelection: false,
        enableFullRowSelection: true,
        multiSelect: false,
        enableRowSelection: true,
        noUnselect: true,
        columnDefs: [{
            field: 'Errors',
            headerCellTemplate: 'ui-grid/uiGridHeaderCell-Bootstrap',
            filters: [
                {
                    placeholder: 'Название ошибки'
                }
            ],
            cellTemplate: "<div>{{row.entity.Errors.id}}<br />{{row.entity.Errors.error}}</div>",
        }],
        data: [
            { Errors: { id: '453vcfsd8fsd8', name: 'cannot shut down because a modal dialog is active. Close the active dialog and try again.' } },
            { Errors: { id: '534gfd74', name: 'is not a valid file name.' } },
        ]
 };
2
  • т.е. сделать так: data:[{Errors:'ff68s2346 - cannot shut down because a modal dialog...'}]? 12 июл 2016 в 11:31
  • нет так не получается, потому что фильтр ищет с начала строки т.е. в данном случае получается поиск только по id мне нужно и по name. Можно настроить чтобы фильтр искал по подстроке а не только с начала? 12 июл 2016 в 11:59

1 ответ 1

2

Можно воспользоваться свойством condition - которое представляет собой функцию, принимающую искомую строку, и текущий объект и возвращающая true если объект подходит и false если нет.

Функция может выглядеть так:

condition: function(serachTerm, entity) {
  return ~entity.id.indexOf(serachTerm) || ~entity.name.indexOf(serachTerm);
}

Рабочий пример:

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

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants',
    function($scope, $http, uiGridConstants) {
      var today = new Date();
      var nextWeek = new Date();
      nextWeek.setDate(nextWeek.getDate() + 7);

      $scope.highlightFilteredHeader = function(row, rowRenderIndex, col, colRenderIndex) {
        if (col.filters[0].term) {
          return 'header-filtered';
        } else {
          return '';
        }
      };

      $scope.gridOptions = {
        enableFiltering: true,
        enableScrollbars: false,
        enableRowHeaderSelection: false,
        enableFullRowSelection: true,
        multiSelect: false,
        enableRowSelection: true,
        noUnselect: true,
        columnDefs: [{
          field: 'Errors',
          filters: [{
            placeholder: 'Название ошибки',
            condition: function(serachTerm, entity) {
              return ~entity.id.indexOf(serachTerm) || ~entity.name.indexOf(serachTerm);
            }
          }],
          cellTemplate: "<div>{{row.entity.Errors.id}}<br />{{row.entity.Errors.error}}</div>",
        }],
        data: [{
          Errors: {
            id: '453vcfsd8fsd8',
            name: 'cannot shut down because a modal dialog is active. Close the active dialog and try again.'
          }
        }, {
          Errors: {
            id: '534gfd74',
            name: 'is not a valid file name.'
          }
        }, ]
      };
    }
  ])
  .filter('mapGender', function() {
    var genderHash = {
      1: 'male',
      2: 'female'
    };

    return function(input) {
      if (!input) {
        return '';
      } else {
        return genderHash[input];
      }
    };
  });
.grid {
  width: 350px;
  height: 200px;
}
.header-filtered {
  color: blue;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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">
<div ng-app="app" ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>

5
  • Это то что нужно, спасибо. 12 июл 2016 в 12:19
  • почему-то некоторые символы, например .(точка) не ищет. И все что после точки не ищет. Хотя точка экранируется \. 12 июл 2016 в 12:38
  • @endovitskiiy, в моем пример все ищет, и ничего не экранируется, если вы что-то поменяли - стоит показать что именно и где, возможно даже задать новый вопрос
    – Grundy
    12 июл 2016 в 12:42
  • я понял почему не искалось, все работает правильно. 12 июл 2016 в 12:46
  • @endovitskiiy, ну хорошо тогда :)
    – Grundy
    12 июл 2016 в 12:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.