Angular表格组件 GridManager |
您所在的位置：网站首页 › 发财树摆放位置风水讲究图片 › Angular表格组件 GridManager |
| 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 ENVES2015 + 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: ` |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |