Skip to content

Latest commit

 

History

History
77 lines (62 loc) · 2.48 KB

README.md

File metadata and controls

77 lines (62 loc) · 2.48 KB

##Aui-gridx overview

Aui gridx(angularUI-gridx) is a powerful grid widget based on AngularJS. It is lightweight, easy-config, fast-rendering & native-tree support. Currently, it provides you with the feature of

  • sorting
  • pagination
  • tree
  • cell formatter & decorator Also, aui-gridx provides u with a design language (dlblue) theme.

How to create a grid using aui-gridx?

  • include angularJS
<script type='text/javascript' src='lib/angular.js'></script>
  • include aui-grid JS
<script type='text/javascript' src='aui-gridx/build.js'></script>
If you are using the source code version of the aui-grid, you can find the js file in /release/build.js.
  • include aui-grid CSS
<link rel='stylesheet' href='aui-grid/theme/Gridx.css'>
If you want to use the dlBlue please add below css file

<link rel='stylesheet' href='theme/dlBlue/gridx.css'>

In order to make the dlBlue theme working, you will need to add class "dlBlue" in the tag.

<body class='dlBlue'>
  • Creat your own angular app and inject dependency into it.
var app = angular.module('app', ['aui.grid']);

After all above steps, you are ready to create your own aui-gridx instance.

  • Using aui-ridx directive

gridOption here refers to the options feed to the grid instance. You will always need to feed aui-grid directive with data and structure(colum structure)

window.data = $scope.gridOption.data = [
          {name: "Tiancum", age: 43, id: 'item-3', country: 'US'},
          {name: "Jacob", age: 27, id: 'item-4', country: 'US'},
          {name: "Nephi", age: 29, id: 'item-5', country: 'US'},
          {name: "Enos", age: 34, id: 'item-6', country: 'US'},
          {name: "Enos", age: 34, id: 'item-14', country: 'US'},
     ];

     $scope.gridOption.columnStructs = [
          {id: 'name', field: 'name', name: 'my name', width: '200px'},
          {id: 'age', field: 'age', name: 'my age', width: '100px'},
          {id: 'id', field: 'id', name: 'my id', width: '200px'},
          {id: 'country', field: 'country', name: 'my  country', width: '110px', enableSorting: false}
     ];
  • give grid a width & height.

Please note that grid instance will always need a width and height to be rendering correcly.

.myGrid{
     width: 600px;
     height: 350px;
}

###Notes AUi-Gridx is still in the process of developing and not ready for production yet. We will soon adding features like