2

ui-grid 3.0 でブール値をフィルタリングしたい。チュートリアルでは、テキスト フィールド以外のフィールドで値をフィルター処理する方法が見つかりませんでした。ブール値には、チェックボックスまたは標準の HTML 選択の方が便利ですが、これを実現する方法はありますか?

4

1 に答える 1

2

私は ui-grid 3.0 を使い始めましたが、あなたと同じ問題に直面していると思います。

「追加」列と「削除」列がブール値である4列のテーブルがあります。

コントローラーで「$templateCache」サービスを使用し、defineTable() メソッドを呼び出して、ブール値をフィルタリングするためにテンプレートを初期化しました。テンプレート 'ui-grid/uiGridCheckboxHeaderCell' を設定するために headerCellTemplate プロパティを使用しました。

これが私のコードの一部です。それが役立つことを願っています！

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]

于 2014-12-29T20:03:10.663 に答える