angularjs - 使用 UI Grid 3.0 过滤布尔值

Question

我想用 ui-grid 3.0 过滤布尔值。我没有在教程中找到如何使用文本字段以外的其他字段过滤值。复选框或标准 HTML 选择对于布尔值更方便，有没有办法实现这一点？

Answer 1

我开始使用ui-grid 3.0，我想我面临着和你一样的问题。

我有一个有 4 列的表，其中“已添加”和“已删除”列是布尔值。

我在控制器中使用了“$templateCache”服务，并调用了 defineTable() 方法来初始化我的模板以过滤布尔值。我使用 headerCellTemplate 属性来设置模板'ui-grid/uiGridCheckboxHeaderCell'。

这是我的代码的一部分。我希望它有帮助！

appRoot.controller('MyController', ['$scope', '$log', '$filter', '$timeout', 
                   '$templateCache', 'uiGridConstants', 
                   function ($scope, $log, $filter, $timeout, $templateCache, uiGridConstants) {

         ...


        // Define the GRID columns
        function defineTable() {

        $templateCache.put('ui-grid/uiGridCheckboxHeaderCell',
                "<div ng-class=\"{ 'sortable': sortable }\"><div class=\"ui-grid-vertical-bar\">&nbsp;</div><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\"><span>{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" class=\"ui-grid-column-menu-button\" ng-click=\"toggleMenu($event)\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ng-if=\"filterable\" class=\"ui-grid-filter-container\" ng-repeat=\"colFilter in col.filters\"><input type=\"checkbox\" class=\"ui-grid-filter-input\" ng-model=\"colFilter.term\" ng-click=\"$event.stopPropagation()\" ng-attr-placeholder=\"{{colFilter.placeholder || ''}}\"><div class=\"ui-grid-filter-button\" ng-click=\"colFilter.term = null\"><i class=\"ui-grid-icon-cancel\" ng-show=\"!!colFilter.term\">&nbsp;</i><!-- use !! because angular interprets 'f' as false --></div></div></div>"
            );


            // Table definition
            $scope.jdeObjectsGrid.columnDefs = [

                      { field: 'ObjectName', name: $filter('translate')('OBJECT_NAME'), enableFiltering: true, 
                        enableCellEdit:true,
                        editableCellTemplate:'ui-grid/dropdownEditor', editDropdownOptionsArray: $scope.objectNameList,
                        editDropdownIdLabel: 'id', editDropdownValueLabel: 'objectName',
                        aggregationType: uiGridConstants.aggregationTypes.count },

                      { field: 'ObjectDescription', name: $filter('translate')('OBJECT_DESCRIPTION'), enableFiltering: true},

                      { field: 'Added', name: $filter('translate')('NEW_RECORDS'), enableFiltering: true,
                        headerCellTemplate: "ui-grid/uiGridCheckboxHeaderCell",
                        cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" onclick="return false" /></div>'},

                      { field: 'Deleted', name: $filter('translate')('DELETED_RECORDS'), enableFiltering: true, 
                        headerCellTemplate: "ui-grid/uiGridCheckboxHeaderCell",                   
                        cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" /></div>'}
                    ];

        }

}

参考：

[ https://docs.angularjs.org/api/ng/service/ $templateCache]