GridManager Angular 1.x
基於 Angular 1.x 的 GridManager 封裝, 用於便捷的在 Angular 中使用GridManager.
實現功能
- 寬度調整: 表格的列寬度可進行拖拽式調整
- 位置更換: 表格的列位置進行拖拽式調整
- 配置列: 可通過配置對列進行顯示隱藏轉換
- 表頭吸頂: 在表存在可視區域的情況下,表頭將一直存在於頂部
- 排序: 表格單項排序或組合排序
- 分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
- 使用者偏好記憶: 記住使用者行為,含使用者調整的列寬、列順序、列可視狀態及每頁顯示條數
- 序號: 自動生成序號列
- 全選: 自動生成全選列
- 匯出: 當前頁資料下載,和僅針對已選中的表格下載
- 右鍵選單: 常用功能在選單中可進行快捷操作
- 過濾: 通過對列進行過濾達到快速搜尋效果
API
該文件為原生GridManager的文件，angular-1.x版本除了在
columnData.textcolumnData.templatetopFullColumn.template中可以使用angular模版外，其它使用方式相同。
Demo
該示例為原生GridManager的示例，angular-1.x版本除了在
columnData.textcolumnData.templatetopFullColumn.template中可以使用angular模版外，其它使用方式相同。
Core code
ENV
ES2015 + webpack + angular 1.x + GridManager
安裝
npm install gridmanager-angular.1.x --save
複製程式碼專案中引用
- es2015引入方式
import gridManager from 'gridmanager-angular-1.x';
複製程式碼- 通過script標籤引入
<link rel="stylesheet" href="../node_modules/gridmanager-angular-1.x/css/gm-angular.css">
<script src="../node_modules/gridmanager-angular-1.x/js/gm-angular.js"></script>
複製程式碼示例
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/gridmanager-angular-1.x/css/gm-angular.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://unpkg.com/gridmanager-angular-1.x/js/gm-angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="AppController as vm">
<grid-manager option="option" callback="callback(query)"></grid-manager>
</body>
</html>
複製程式碼function AppController($window, $rootScope, $scope, $element, $gridManager){
$scope.testClick = (row) => {
console.log('click', row);
};
// 常量: 搜尋條件
$scope.TYPE_MAP = {
'1': 'HTML/CSS',
'2': 'nodeJS',
'3': 'javaScript',
'4': '前端雞湯',
'5': 'PM Coffee',
'6': '前端框架',
'7': '前端相關'
};
$scope.searchForm = {
title: '',
info: ''
};
/**
* 搜尋事件
*/
$scope.onSearch = () => {
console.log('onSearch');
$gridManager.setQuery('testAngular', $scope.searchForm);
};
$scope.onReset = () => {
$scope.searchForm = {
title: '',
info: ''
};
};
// 表格渲染回撥函式
// query為gmOptions中配置的query
$scope.callback = function(query) {
console.log('callback => ', query);
};
$scope.option = {
gridManagerName: 'testAngular',
width: '100%',
height: '100%',
supportAjaxPage:true,
isCombSorting: true,
disableCache: false,
ajax_data: function () {
return 'https://www.lovejavascript.com/blogManager/getBlogList';
},
ajax_type: 'POST',
columnData: [
{
key: 'pic',
remind: 'the pic',
width: '110px',
align: 'center',
text: '縮圖',
// ng template
template: `<a target="_blank" style="display:block; height:58.5px;" ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="點選閱讀[{{row.title}}]">
<img style="width:90px;margin:0 auto;" ng-src="https://www.lovejavascript.com/{{row.pic}}" alt="{{row.title}}">
</a>`
},{
key: 'title',
remind: 'the title',
align: 'left',
text: '標題',
sorting: '',
// 使用函式返回 ng template
template: function() {
return '<a class="plugin-action" target="_blank" ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="點選閱讀[{{row.title}}]">{{row.title}}</a>';
}
},{
key: 'type',
remind: 'the type',
text: '博文分類',
align: 'center',
width: '150px',
sorting: '',
// 表頭篩選條件, 該值由使用者操作後會將選中的值以{key: value}的形式覆蓋至query引數內。非必設項
filter: {
// 篩選條件列表, 陣列物件。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter時該引數為必設項。
option: [
{value: '1', text: 'HTML/CSS'},
{value: '2', text: 'nodeJS'},
{value: '3', text: 'javaScript'},
{value: '4', text: '前端雞湯'},
{value: '5', text: 'PM Coffee'},
{value: '6', text: '前端框架'},
{value: '7', text: '前端相關'}
],
// 篩選選中項，字串, 預設為''。 非必設項，選中的過濾條件將會覆蓋query
selected: '3',
// 否為多選, 布林值, 預設為false。非必設項
isMultiple: true
},
// isShow: false,
template: `<button type="button" ng-click="testClick(row)" ng-bind="TYPE_MAP[row.type]"></button>`
},{
key: 'info',
remind: 'the info',
width: '300px',
text: '簡介'
},{
key: 'username',
remind: 'the username',
align: 'center',
width: '100px',
text: '作者',
// 使用函式返回 dom string
template: `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看{{row.username}}的github">{{row.username}}</a>`
},{
key: 'createDate',
width: '130px',
text: '建立時間',
sorting: 'DESC',
// 使用函式返回 htmlString
template: function(createDate, rowObject){
return new Date(createDate).toLocaleDateString();
}
},{
key: 'lastDate',
width: '130px',
text: '最後修改時間',
sorting: '',
// 使用函式返回 htmlString
template: function(lastDate, rowObject){
return new Date(lastDate).toLocaleDateString();
}
},{
key: 'action',
remind: 'the action',
width: '100px',
align: 'center',
text: '<span style="color: red">操作</span>',
// 直接返回 htmlString
template: '<span class="plugin-action" ng-click="delectRowData(row, index)">刪除</span>'
}
]
};
/**
* 模擬刪除
* @param row
* @param index
*/
$scope.delectRowData = function(row, index) {
if(window.confirm(`確認要刪除當前頁第[${index}]條的['${row.title}]?`)){
console.log('----刪除操作開始----');
$gridManager.refreshGrid('testAngular');
// $element[0].querySelector('table[grid-manager="testAngular"]').GM('refreshGrid');
console.log('資料沒變是正常的, 因為這只是個示例,並不會真實刪除資料.');
console.log('----刪除操作完成----');
}
};
}
AppController.inject = ['$window', '$rootScope', '$scope', '$element', '$gridManager'];
angular
.module('myApp', ['gridManager'])
.controller('AppController', AppController);
複製程式碼呼叫公開方法
以下方法需要在已經存在gridManager例項的Angular環境下使用。
// 重新整理
$gridManager.refreshGrid('testAngular');
// 更新查詢條件
$gridManager.setQuery('testAngular', {name: 'baukh'});
// ...其它更多請直接訪問[API](http://gridmanager.lovejavascript.com/api/index.html)
複製程式碼檢視當前版本
import gridManager from 'gridmanager-angular-1.x';
console.log('GridManager', angular.module('gridManager').version);
複製程式碼