GridManager Angular 1.x
基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用 GridManager.
列表项目
实现功能
宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下, 表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格 ajax 分页, 包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为, 含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载, 和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果
API
该文档为原生 GridManager 的文档，angular-1.x 版本除了在 columnData.text columnData.template topFullColumn.template 中可以使用 angular 模版外，其它使用方式相同。
API
Demo
该示例为原生 GridManager 的示例，angular-1.x 版本除了在 columnData.text columnData.template topFullColumn.template 中可以使用 angular 模版外，其它使用方式相同。
简单的示例
复杂的示例
Core code
GridManager
jTool
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);