Programming/Javascript

[Angular JS] UI-Grid Filter To Get Parameter

Figo Kim 2015. 5. 18. 22:18
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Angular JS 의 UI-grid를 쓰는 중이다.


UI-grid의 filter기능이 참 좋긴한데, filter값에 따라서  서버상에서의 데이터 출력이 달라저야 하는데,


angular의 service로 이를 구현해봤다..~~


별거 아니다..


그냥 까먹지 않기 위해서 정리해놓은거다...


Controller상에서의 Grid Option



		$scope.restaurantGrid={
				enableSorting:true,
				enableFiltering: true,
				enableRowHeaderSelection: false,
				multiSelect:false,
				paginationPageSizes:[10,25, 50,75],
				paginationPageSize:10,
				useExternalPagination: true,
				useExternalFiltering:true,
				columnDefs:[
					{field:'supplierNo',visible:false},
					{name:"Name",field:'name1', width:260},
					{name:"Address", field:'address',width:'*'},
					{name:"Zip Code",field:'zipcode1', width:160},
					{name:"Location", field:'location', width:220},
					{name:"Country", field:'country', width:240},
					{
						name:"Category" , field:'category', width:150
					}
				],
				onRegisterApi:function(gridApi){
					$scope.gridApi = gridApi;
					$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
						var grid = this.grid;
						$scope.currentPage = currentPage;


						$log.debug("Length of Columns" + grid.columns.length);
						gridCustomService.filterToParameter(grid);
						getRestaurantList(currentPage, pageSize);
					});
				}
		};


Service javascript file.

		$scope.restaurantGrid={
				enableSorting:true,
				enableFiltering: true,
				enableRowHeaderSelection: false,
				multiSelect:false,
				paginationPageSizes:[10,25, 50,75],
				paginationPageSize:10,
				useExternalPagination: true,
				useExternalFiltering:true,
				columnDefs:[
					{field:'supplierNo',visible:false},
					{name:"Name",field:'name1', width:260},
					{name:"Address", field:'address',width:'*'},
					{name:"Zip Code",field:'zipcode1', width:160},
					{name:"Location", field:'location', width:220},
					{name:"Country", field:'country', width:240},
					{
						name:"Category" , field:'category', width:150
					}
				],
				onRegisterApi:function(gridApi){
					$scope.gridApi = gridApi;
					$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
						var grid = this.grid;
						$scope.currentPage = currentPage;


						$log.debug("Length of Columns" + grid.columns.length);
						gridCustomService.filterToParameter(grid);
						getRestaurantList(currentPage, pageSize);
					});
				}
		};