sample grid

by Kuitos Lau

HTML

<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<link rel="stylesheet" href="//114.215.169.170:8080/dist/ccms-components.css">
<script src="//unpkg.com/ccms-components/ccms-components.js"></script>
<link rel="stylesheet" href="//unpkg.com/ccms-components/ccms-components.css">
<main ng-controller="ctrl as app">
  <strong style="display: block;">表格宽高由用户设定,默认继承自父容器</strong>
  <button type="button" ng-click="app.refreshGrid()">refresh</button>
  <cc-grid opts="app.dataGridOpts"></cc-grid>
</main>

SCSS

main {
  display: flex;
  height: 100%;
  flex-flow: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  grid {
    flex: 1;
  }
}

JavaScript

angular.module('app', ['ccms.components', 'ngResource'])

.controller('ctrl', function($scope, $resource, $timeout, $q, $ccGrid) {

  this.clickEntity = (entity, column) => alert(entity, column);

  this.refreshGrid = () => {
    members.push({
      name: 'x',
      age: Math.floor(Math.random() * 100),
      gender: 'xxx'
    });
    this.dataGridOpts.externalData = $q(resolve => resolve(members));
    $ccGrid.refresh(this.dataGridOpts)
  };


  let members = [{
    name: 'l',
    age: 10,
    gender: '男'
  }, {
    name: 'k',
    age: 10,
    gender: '男'
  }, {
    name: 'lk',
    age: 10,
    gender: '不详'
  }];

  this.dataGridOpts = {
    showPagination: false,
    externalData: $q(resolve => resolve(members)),
    columnsDef: [{
      cellTemplate: '<span style="color:blue" ng-bind="entity.name | uppercase" ng-click="app.clickEntity(entity, column)"></span>',
      displayName: '姓名',
      align: 'center',
      width: '100px'
    }, {
      field: 'age',
      displayName: '年龄',
      align: 'center'
    }, {
      field: 'gender',
      displayName: '性别',
      align: 'right'
    }]
  };
});