Full Stack Software Developer: [angularjs] ui-grid (column size resizeable) + spring + mongodb

주의점 :
ui-grid-resize-column 디렉티브를 넣어줘야 컬럼 사이즈 조절이 가능함.
ui-grid-move-columns 디렉티브를 넣으면 컬럼 간에 이동이 가능함.
그리고 컬럼을 동적으로 바꿔주려면
초기 컬럼 정의를 $scope 내에 $scope.columns 에다 정의하고,
필요한 시점에서
push 와 splice 로 컬럼을 넣어주면 된다.

DTO 에는 column와 value를 넣어줘서 보내주면 각각 셋팅하면 된다.

View(html)

<!doctype html>
<html ng-app="app">
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="styleSheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>

<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>

<script src="/js/myCtrl.js"></script>

<style>
</style>
</head>
<body>
 <div class="container">
  <div ng-controller="MainCtrl">
   <div id="grid1"
    ui-grid="gridOptions"
    ui-grid-resize-columns ui-grid-move-columns
    class="grid"></div>

   <div class="well">
   <button ng-click="click()" type="button" class="btn btn-primary">Click</button>

   </div>
  </div>
 </div>
</body>
</html>

Controller (myCtrl.js)

var app = angular.module('app', ['ngAnimate', 'ui.grid','ui.grid.resizeColumns', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, uiGridConstants) {

 $scope.startId = 0;
 
 $scope.columns = [{ field: 'id' }, { field: 'name' }];
 $scope.gridOptions = {
   enableSorting: true,
   enableFiltering:true,
   rowHeight: 30, 
   columnDefs: $scope.columns
 };
 
 $scope.click = function() {
  $scope.startId = $scope.startId + 20;
  $http({
   method: 'GET',
   url: '/mongodata?collection=mycoll&startId=' + $scope.startId + '&size=20'
  }).then(function successCallback(response) {
   $scope.gridOptions.data = response.data.values;
   $scope.columns.splice(1, $scope.columns.length-1);
   
   for (var i in response.data.colums) {
    $scope.columns.push(response.data.colums[i]);
   }
   
  }, function errorCallback(response) {
   alert(JSON.stringify(response));
  });
 } 
}]);

Spring Controller

@RequestMapping(value="/mongodata", method=RequestMethod.GET)
    @ResponseBody
    public UiGridDto mongodata(@RequestParam String collection, @RequestParam Integer startId, @RequestParam Integer size) {

     UiGridDto res = new UiGridDto();
     
     List<Map<String, Object>> values = new ArrayList<Map<String, Object>>();

  Document f = new Document("id", new Document("$gt", Integer.valueOf(startId)));
     
  FindIterable<Document> itr = Mongo.getInstance().getDB().getCollection(collection).find(f).limit(size);
  
  Set<String> allKeys = new HashSet<String>();
  
  itr.forEach(new Block<Document>() {
   @Override
   public void apply(Document t) {
    Set<String> keys = t.keySet();

    Map h = new HashMap<String, Object>();
    for (String key : keys) {
     h.put(key,  t.get(key));
     
     allKeys.add(key);
    }
    values.add(h);
   }
  });
  
     List<Map<String, Object>> columns = new ArrayList<Map<String, Object>>();
  for (String key : allKeys) {
   Map<String, Object> map = new HashMap<String, Object>();
   
   map.put("field",  key);
   map.put("width",  "*");
   map.put("resizable",  true);
   
   columns.add(map);
  }

  res.setColums(columns);
  res.setValues(values);
  
  return res;
    }

UI Grid DTO

public class UiGridDto implements Serializable{

 private static final long serialVersionUID = 3836028973603051148L;

 public UiGridDto() {
  
 }

 List<Map<String, Object>> colums;
 List<Map<String, Object>> values;
 
 Integer maxRows;

 public List<Map<String, Object>> getColums() {
  return colums;
 }

 public void setColums(List<Map<String, Object>> colums) {
  this.colums = colums;
 }

 public List<Map<String, Object>> getValues() {
  return values;
 }

 public void setValues(List<Map<String, Object>> values) {
  this.values = values;
 }

 public Integer getMaxRows() {
  return maxRows;
 }

 public void setMaxRows(Integer maxRows) {
  this.maxRows = maxRows;
 }
}

Full Stack Software Developer

nodejs

2016년 3월 13일 일요일

[angularjs] ui-grid (column size resizeable) + spring + mongodb

댓글 없음:

댓글 쓰기