How to filter my data? (ng-grid)

后端 未结 3 916
夕颜
夕颜 2020-12-23 14:31

I think this is most likely very simple but I cannot find any clear documentation on how to add a filter outside of the \'filterText\' that is shown on their website. What I

3条回答
  •  春和景丽
    2020-12-23 15:22

    This is my solution!!

    It found with ng-grid in html:

    
    

    in js:

    //pagination
    $scope.filterOptions = {
        filterText: $scope.miinput,
        useExternalFilter: true
    }; 
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [10, 25, 50],
        pageSize: 10,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){  
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.vocabulario = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {     
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };
    
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    
    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    
    //cada vez que escribo en el input
    $scope.$watch('miinput', function () {
        if ($scope.miinput !== "") {
            $scope.pagingOptions.currentPage=1;
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.miinput);
        }else{
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    
    
     //
     $scope.gridOpciones = { 
        data: 'vocabulario',
        showGroupPanel: true,
        enableCellSelection: true,
        enableRowSelection: true,
        enableCellEdit: true,
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [
        {field:'I', displayName:'Id', width:60,resizable: true}, 
        {field:'T', displayName:'Type',visible:false,resizable: true},
        {field:'N', displayName:'Level',width:60},
        {field:'L', displayName:'List',width:100},
        {field:'P', displayName:'English',minWidth: 400},
        {field:'R', displayName:'Spanish', minWidth: 400}]
     };
    

    //JSON

     [
    {"I": "3001", "T": "F", "N": "3", "L": "01 a", "P": "HE IDO ALL\u00cd DOS VECES ESTA SEMANA", "R": "I'VE GONE THERE TWICE THIS WEEK"},
    {"I": "3002", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L ME HA LLAMADO VARIAS VECES HOY", "R": "HE'S CALLED ME SEVERAL TIMES TODAY"},
     {"I": "3003", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS LLEGADO A UNA CONCLUSI\u00d3N", "R": "WE'VE REACHED A CONCLUSION"},
     {"I": "3004", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS DECIDIDO CANCELAR EL PROYECTO", "R": "WE'VE DECIDED TO CANCEL THE PROJECT"},
     {"I": "3005", "T": "F", "N": "3", "L": "01 a", "P": "NO HAN HECHO NADA", "R": "THEY HAVEN'T DONE ANYTHING"},
     {"I": "3006", "T": "F", "N": "3", "L": "01 a", "P": "HE PROBADO MUCHAS DIFERENTES PROFESIONES", "R": "I'VE TRIED MANY DIFFERENT PROFESSIONS"},
     {"I": "3007", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L HA PERDIDO LA VOZ", "R": "HE'S LOST HIS VOICE"}, 
    {"I": "3008", "T": "F", "N": "3", "L": "01 a", "P": "ELLA NO HA VENIDO POR AQU\u00cd \u00daLTIMAMENTE"}
    ]
    

提交回复
热议问题