Question

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

Answer 1

我开始使用ui-grid 3.0，我认为我遇到了和你一样的问题。

我有一个包含4列的表格，其中＆＃39;已添加＆＃39;并且＆＃39;已删除＆＃39;列是布尔值。

我使用了＆＃39; $ templateCache＆＃39;我的控制器中的服务，并调用defineTable（）方法初始化我的模板，以过滤布尔值。我使用headerCellTemplate属性来设置模板＆＃39; ui-grid / uiGridCheckboxHeaderCell＆＃39;。

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

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]

使用UI Grid 3.0过滤布尔值

1 个答案: