GridManager Angular 1.x
> 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager.
列表项目
实现功能
- 宽度调整: 表格的列宽度可进行拖拽式调整
- 位置更换: 表格的列位置进行拖拽式调整
- 配置列: 可通过配置对列进行显示隐藏转换
- 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
- 排序: 表格单项排序或组合排序
- 分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
- 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
- 序号: 自动生成序号列
- 全选: 自动生成全选列
- 导出: 当前页数据下载,和仅针对已选中的表格下载
- 右键菜单: 常用功能在菜单中可进行快捷操作
- 过滤: 通过对列进行过滤达到快速搜索效果
API
> 该文档为原生GridManager的文档，angular-1.x版本除了在columnData.text columnData.template topFullColumn.template中可以使用angular模版外，其它使用方式相同。
Demo
> 该示例为原生GridManager的示例，angular-1.x版本除了在columnData.text columnData.template topFullColumn.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>
示例
1 <link rel="stylesheet" href="https://unpkg.com/gridmanager-angular-1.x/css/gm-angular.css"> 2 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 3 <script src="https://unpkg.com/gridmanager-angular-1.x/js/gm-angular.js"></script> 4 5 6 <grid-manager option="option" callback="callback(query)"></grid-manager> 7 8 9 10 11function AppController($window, $rootScope, $scope, $element, $gridManager){ 12 $scope.testClick = (row) => { 13 console.log('click', row); 14 }; 15 16 // 常量: 搜索条件 17 $scope.TYPE_MAP = { 18 '1': 'HTML/CSS', 19 '2': 'nodeJS', 20 '3': 'javaScript', 21 '4': '前端鸡汤', 22 '5': 'PM Coffee', 23 '6': '前端框架', 24 '7': '前端相关' 25 }; 26 27 $scope.searchForm = { 28 title: '', 29 info: '' 30 }; 31 32 /** 33 * 搜索事件 34 */ 35 $scope.onSearch = () => { 36 console.log('onSearch'); 37 $gridManager.setQuery('testAngular', $scope.searchForm); 38 }; 39 40 $scope.onReset = () => { 41 $scope.searchForm = { 42 title: '', 43 info: '' 44 }; 45 }; 46 47 // 表格渲染回调函数 48 // query为gmOptions中配置的query 49 $scope.callback = function(query) { 50 console.log('callback => ', query); 51 }; 52 53 $scope.option = { 54 gridManagerName: 'testAngular', 55 width: '100%', 56 height: '100%', 57 supportAjaxPage:true, 58 isCombSorting: true, 59 disableCache: false, 60 ajax_data: function () { 61 return 'https://www.lovejavascript.com/blogManager/getBlogList'; 62 }, 63 ajax_type: 'POST', 64 65 columnData: [ 66 { 67 key: 'pic', 68 remind: 'the pic', 69 width: '110px', 70 align: 'center', 71 text: '缩略图', 72 // ng template 73 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}}]"> 74 <img style="width:90px;margin:0 auto;" ng-src="https://www.lovejavascript.com/{{row.pic}}" alt="{{row.title}}" src=""> 75 </a>` 76 },{ 77 key: 'title', 78 remind: 'the title', 79 align: 'left', 80 text: '标题', 81 sorting: '', 82 // 使用函数返回 ng template 83 template: function() { 84 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>'; 85 } 86 },{ 87 key: 'type', 88 remind: 'the type', 89 text: '博文分类', 90 align: 'center', 91 width: '150px', 92 sorting: '', 93 // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项 94 filter: { 95 // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。 96 option: [ 97 {value: '1', text: 'HTML/CSS'}, 98 {value: '2', text: 'nodeJS'}, 99 {value: '3', text: 'javaScript'}, 100 {value: '4', text: '前端鸡汤'}, 101 {value: '5', text: 'PM Coffee'}, 102 {value: '6', text: '前端框架'}, 103 {value: '7', text: '前端相关'} 104 ], 105 // 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆盖query 106 selected: '3', 107 // 否为多选, 布尔值, 默认为false。非必设项 108 isMultiple: true 109 }, 110 // isShow: false, 111 template: `<button type="button" ng-click="testClick(row)" ng-bind="TYPE_MAP[row.type]"></button>` 112 },{ 113 key: 'info', 114 remind: 'the info', 115 width: '300px', 116 text: '简介' 117 },{ 118 key: 'username', 119 remind: 'the username', 120 align: 'center', 121 width: '100px', 122 text: '作者', 123 // 使用函数返回 dom string 124 template: `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看{{row.username}}的github">{{row.username}}</a>` 125 },{ 126 key: 'createDate', 127 width: '130px', 128 text: '创建时间', 129 sorting: 'DESC', 130 // 使用函数返回 htmlString 131 template: function(createDate, rowObject){ 132 return new Date(createDate).toLocaleDateString(); 133 } 134 },{ 135 key: 'lastDate', 136 width: '130px', 137 text: '最后修改时间', 138 sorting: '', 139 // 使用函数返回 htmlString 140 template: function(lastDate, rowObject){ 141 return new Date(lastDate).toLocaleDateString(); 142 } 143 },{ 144 key: 'action', 145 remind: 'the action', 146 width: '100px', 147 align: 'center', 148 text: '<span style="color: red">操作</span>', 149 // 直接返回 htmlString 150 template: '<span class="plugin-action" ng-click="delectRowData(row, index)">删除</span>' 151 } 152 ] 153 }; 154 155 /** 156 * 模拟删除 157 * @param row 158 * @param index 159 */ 160 $scope.delectRowData = function(row, index) { 161 if(window.confirm(`确认要删除当前页第[${index}]条的['${row.title}]?`)){ 162 console.log('----删除操作开始----'); 163 $gridManager.refreshGrid('testAngular'); 164 // $element[0].querySelector('table[grid-manager="testAngular"]').GM('refreshGrid'); 165 console.log('数据没变是正常的, 因为这只是个示例,并不会真实删除数据.'); 166 console.log('----删除操作完成----'); 167 } 168 }; 169} 170AppController.inject = ['$window', '$rootScope', '$scope', '$element', '$gridManager']; 171 172angular 173 .module('myApp', ['gridManager']) 174 .controller('AppController', AppController);
调用公开方法
> 以下方法需要在已经存在gridManager实例的Angular环境下使用。
1// 刷新 2$gridManager.refreshGrid('testAngular'); 3 4// 更新查询条件 5$gridManager.setQuery('testAngular', {name: 'baukh'}); 6 7// ...其它更多请直接访问[API](http://gridmanager.lovejavascript.com/api/index.html)
查看当前版本
1import gridManager from 'gridmanager-angular-1.x'; 2console.log('GridManager', angular.module('gridManager').version);