Angular表格组件 GridManager

#Angular表格组件 GridManager| 来源: 网络整理| 查看: 265

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 GridManagerjTool ENV

ES2015 + webpack + angular 1.x + GridManager

安装 npm install gridmanager-angular.1.x --save 复制代码项目中引用 es2015引入方式 import gridManager from 'gridmanager-angular-1.x'; 复制代码通过script标签引入复制代码示例复制代码 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: `

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章