## 一個完整的例子
#### HTML part
>頁面上引入指令
```js
<zhx-grid options="gridOptions"></zhx-grid>
```
#### module part
>在模塊上引入組件模塊
```js
var app = angualr.module('myModule',["zhxDataGrid"]);
```
#### Controller part
>在控制器中配置組件配置項
```js
$scope.gridOptions = {
gridData : data,
scope : $scope,
columnDefs : [
{ displayName : "序號", name: "zhxRowNumber" },
{ displayName : "用戶名", name: "account", enableSorting: true},
{ displayName : "公司", name: "company", width: 200 },
{ displayName : "入職日期", name: "entryDate",
filter : {
name : "date",
params : ["YYYY-MM-dd HH:mm:ss"]
}
}
],
flexHeight : 220,
sorter : function(order,desc){
$scope.entryDate.orderBy = order;
$scope.entryDate.descOrAsc = desc;
},
paginationConf : {
currentPage: 1,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50, 100, 200, 300],
onChange: function () {
$scope.log.pageSize = $scope.gridOptions.paginationConf.itemsPerPage;
$scope.log.pageNum = $scope.gridOptions.paginationConf.currentPage;
}
}
}
```
