Angular表格组件 GridManager-Angular-1.x

最新推荐文章于 2024-05-13 09:39:25 发布
最新推荐文章于 2024-05-13 09:39:25 发布
阅读量721 收藏 1
点赞数
分类专栏： 表格组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17835/article/details/105101387
版权
本文档介绍了如何在Angular 1.x环境中使用GridManager组件，包括其实现的功能、API、示例代码和安装步骤。提供简单和复杂示例，以及调用公开方法的方法。
摘要由CSDN通过智能技术生成

GridManager Angular 1.x

基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager.

image

实现功能

功能 描述
宽度调整 表格的列宽度可进行拖拽式调整
位置更换 表格的列位置进行拖拽式调整
配置列 可通过配置对列进行显示隐藏转换
表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部
列固定 指定某列固定在左侧或右侧
排序 表格单项排序或组合排序
分页 表格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>

示例

<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"
最低0.47元/天 解锁文章
写个程序换个饼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GridManager-Angular-1.x:GridManager by Angular-1.x
04-30
GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. 实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部 列固定 指定某列固定在左侧或右侧 排序 表格单项排序或组合排序 分页 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 用户偏好记忆 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 序号 自动生成序号列 全选 自动生成全选列 导出 静态数据导出、动态数据导出、已选数据导出 打印 当前页打印 右键菜单 常用功能在菜单中可进行快捷操作 过滤 通过对列进行过滤达到快速搜索效果 合并 同一列下相同值的单
angular 表单控件组
李卓书
05-10 307
import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-root', // templateUrl: './app.component.html', template: ` <form [formGroup]="loginForm"> 账号: <input t
angularjs 封装的表格组件
qq_25919495的博客
02-11 866
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>an-table</title> <script src="./angular.js"></script&g.
ngxdatatable是一个用来展示大型复杂数据的Angular组件
08-07
ngx-datatable是一个用来展示大型复杂数据的Angular组件。它实现了你期待的所有功能。datatable可以提供过滤，排序，分页等功能。
Angular表格神器ui-grid应用详解
08-29
总结起来，Angular表格神器ui-grid是一个功能强大的表格组件，它能够满足各种复杂的表格需求，包括但不限于数据展示、交互、排序、过滤和自定义样式。通过恰当的配置和模板设计，ui-grid能帮助开发者创建出用户体验...
Angular-angular1-webpack-starter.zip
09-18
Angular-angular1-webpack-starter.zip,基于组件的angular（1.x）web开发与webpack和es6.angular1-webpack-starter,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
ngVue：在Angular 1.x中使用Vue2组件
01-31
ngVue可以在现有的Angular应用程序中使用，并有助于将应用程序的视图部分从Angular 1.x迁移到Vue 2。 其动机类似于ngReact的动机： 由于页面上有大量的作用域观察器，因此AngularJS应用程序存在性能瓶颈，但是...
基于Angular和AngularMaterial的树形表格组件
08-10
世界上最好用的基于 Angular 和 Angular Material 的树形表格组件
推荐使用Angular Smart Table组件
最新发布
gitblog_00020的博客
05-13 785
推荐使用Angular Smart Table组件 项目地址:https://gitcode.com/akveo/ng2-smart-table Angular Smart Table是一款由Akveo团队精心打造的高性能表格组件。它提供了强大的数据处理和操作功能，适用于各种Web应用的开发需求。 项目介绍 ng2-smart-table是一个基于Angular的智能表格组件，集成了数据过滤、排序...
最棒的Angular2表格控件
09-01
最好的Angular2表格控件，满足更小、更快、更熟悉的基本要求，感兴趣的小伙伴们可以参考一下
angular1.x 实现表格的增删改查
Think More 的博客
10-31 986
实现表格的增删改查 .add{ position:relative; top:-40px; left:1000px; } 管理信息： 搜索： 添加 姓名 年龄 城市 操作 {{x.name}} {{x.age}} {{x.city}} 修改 删除 添加信息 姓名： 年龄： 城市： 关闭 保存 修改
可以改动的option组件_跨框架的表格组件: 一套代码多框架运行
weixin_39728221的博客
12-03 162
这几年来，一直在思考怎么做出一款功能强大且配置简易的原生JS表格组件。 为此做了很多功能，也对这些功能做过多轮的优化以达到配置简易的愿景。而在开发过程中，总有个绕不过去的坎: 框架模板无法解析。这是一个什么概念呢？当在框架环境中渲染表格组件，这个表格内的模板只能使用原生JS，无法使用任何框架特性。 这也就意味着，当在表格模板内使用框架组件时将无法渲染。如下所示，通过模板配置一个Vue的Button...
gridmanager使用于本地数据，使用function来模拟返回后端数据。
qlin_11的博客
12-05 387
function m(settings, params) {} 参数里包含了基础配置和分页排序信息。 注意：尾页使用此形式则不生效，需要将尾页按钮隐藏。 官网案例调整（直接copy到光网的在线编辑器中查看效果）： 真实应用，内含有排序和校验和排序逻辑
探索 ng-table：数据驱动的 Angular 表格解决方案
gitblog_00017的博客
03-22 421
探索 ng-table：数据驱动的 Angular 表格解决方案 ng-tableSimple table with sorting and filtering on AngularJS项目地址:https://gitcode.com/gh_mirrors/ng/ng-table 是一个强大且灵活的 AngularJS 模块，它允许开发人员以数据驱动的方式创建功能丰富的表格组件。如果你在寻找一个...
【angular+bootstrap】angular初级的时间选择器
weixin_38169769的博客
09-01 554
近期的一个项目，是用angular来写的，本来框架就是第一次接触，使用相关插件的时候就感觉更加没有头绪了，其中一个插件就是时间选择器。比较好用时间选择器就是bootstrap里面的datetimepicker和daterangepicker（详情见bootstrap里面的时间选择器笔记）。 项目需要的是一个可以选择时间段的时间选择器，按照比较正规的做法，是应该用directive...
Angular1.x基础知识
baidu_30907803的博客
03-08 1602
总结Angular1.x的基础知识
angular兼容性问题的解决（ie6，ie7....，火狐，谷歌，360，等亲测兼容）
cao849861802的博客
06-13 8487
在使用angular包的时候，会遇到一些兼容性问题，下面的代码是一个解决了兼容性问题的一段代码。代码如下：&lt;!--[if lte IE 8]&gt; &lt;!DOCTYPE html&gt;&lt;![endif]--&gt;&lt;html id="ng-app" class="ng-app:TestApp" ng-app="TestApp"&gt;&lt;head&
IE6-IE9兼容性问题列表及解决办法:锁表头的JQuery方案和非JQuery方案(不支持IE6,7,8)...
weixin_33922672的博客
05-31 144
鉴于从IE8开始，IE不再支持css的expression了，所以以前依靠它完成锁表头的代码就全部失效了，面对新的浏览器，一切又要重新来过了。 现在所能找到的对于锁表头的方案主要有两种路子：一种是使用JQuery，另一种是使用纯js的，因各个公司情况不一样，各取所需吧！ 而这两条路中每一条又带有多种实现思路，先仅举两个思路如下： 1.另外拷贝一份table的head，然后将它安置在table的最上...
ng-book2：Angular 2入门指南 - 最新版r41
在实际操作部分，“Writing Your First Angular 2 Web Application”带领读者创建一个简单的Reddit克隆项目，逐步学习如何使用TypeScript（Angular 2的首选编程语言），以及如何利用angular-cli工具进行项目初始化。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值