用于渲染大量数据的表格设计 Angular

2024-04-14

我是角度新手,期待创建一个将呈现大量数据的表。下面是我试图实现的表中的功能。有人可以指导如何解决这个问题吗?有没有实现它的开源项目?或者好的资源

  1. 通用搜索按钮可在所有列中搜索并在表格中显示结果

  2. 用户可以显示和隐藏某些列

  3. 选定列上的预填充过滤下拉列表。可以在一列中选择多个选项(就像在谷歌电子表格中一样)

  4. 对选择性/所有列进行排序(一次按单个字段排序)

  5. 分页可以选择一页中的结果数量

  6. 每行的编辑和删除操作

  7. 可扩展行以显示更多元数据

Thanks!


因为我发现了 ng2-admin 的 Angular2 模板(http://akveo.com/ng2-admin/#/pages/dashboard http://akveo.com/ng2-admin/#/pages/dashboard),我一直在使用他们的表,该表来自另一个名为 ng2-smart-table 的存储库(https://github.com/akveo/ng2-smart-table https://github.com/akveo/ng2-smart-table).

我发现这非常有效,尽管需要做一些工作才能真正实用。

我一直将此表放在半大数据环境中,总体上我已经实现了良好的响应时间,只出现了几个问题,因此如果您正确执行操作,大量数据实际上没有问题。

  1. 过滤和一般搜索:演示中已经有一个工作示例:https://akveo.github.io/ng2-smart-table/#/examples/using-filters https://akveo.github.io/ng2-smart-table/#/examples/using-filters.
  2. 用户隐藏/显示列:它需要一些编码,但很容易实现。
  3. 下拉过滤器和选项:可以作为同一链接上的示例(https://akveo.github.io/ng2-smart-table/#/examples/using-filters https://akveo.github.io/ng2-smart-table/#/examples/using-filters,关于“复选框、选择和完成器过滤器类型”的底部)。
  4. 排序:可用且可定制。 (https://akveo.github.io/ng2-smart-table/#/documentation https://akveo.github.io/ng2-smart-table/#/documentation)
  5. 分页:可用且可定制。 (https://akveo.github.io/ng2-smart-table/#/documentation https://akveo.github.io/ng2-smart-table/#/documentation)
  6. 对行的操作:可用并可通过角度组件轻松定制(https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers).
  7. 可扩展行:我没有亲自这样做过,但我知道这是可行的,因为我看到其他人用这张桌子这样做了。据我记得,它是为每个详细信息行使用另一个智能表来完成的,但这只是假设。

我推荐这个,因为它非常原始(并且文档并不完美),这意味着可以轻松定制以满足您的需求。我已经使用这个库近一年了,我有几种通用的智能表组件,它们非常易于设置和使用。


N.B:如果你确实是 Angular 的新手,请小心地正确理解概念和如何做事,因为管理表是你能做的最困难的工作之一,因为很容易创建一些既不实用也不高效的东西,尤其是如果您处理大量数据。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用于渲染大量数据的表格设计 Angular 的相关文章

  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • 如何在 Angular 2 应用程序中从 TypeScript/JavaScript 中的字符串获取类?

    在我的应用程序中 我有这样的内容 user ts export class User 现在 我这样做 应用程序组件 ts callAnotherFunction User 如果我将类名作为字符串 即 我该如何做到这一点 User 如果可能的
  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • 包 [email protected] 不满足其同级包的对等依赖性要求?

    我正在尝试在我的 Angular 2 应用程序中安装 ngrx store 模块 我正在使用 npm install 并收到以下错误 npm ERR peerinvalid The package email protected cdn c
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • 使用 Nginx 在 Docker 容器内部署带有路由器的 Angular2

    我正在尝试部署一个使用框架的路由器功能的 Angular 2 但在 docker 容器内使用 nginx 为其提供服务时遇到一些问题 由 angular cli 构建的 Angular 应用程序具有如下文件结构 dist 08c42df75
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • 使用服务中的可观察量测试错误情况

    假设我有一个订阅服务功能的组件 export class Component ngOnInit this service doStuff subscribe data IData gt doThings data error Error g
  • StaticInjectorError[e -> e]: NullInjectorError: 没有 e 的提供程序

    在我的 app module ts 中 NgModule declarations AppComponent imports BrowserModule MaterialModule FlexLayoutModule BrowserAnim
  • `[(ngModel)]` 与 `[(value)]`

    有什么区别
  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • Angular 6 中的 Http 错误处理

    我正在尝试使用 Angular 6 中的以下类来处理 http 错误 我从服务器收到 401 未经授权状态 但我没有看到控制台错误消息 HttpErrorsHandler ts 文件 import ErrorHandler Injectab
  • 构建:找不到“节点”的类型定义文件

    VS 2015 社区版 在家 npm 3 10 Angular 2 我试图在 ASP Net MVC 5 应用程序中获取 Angular2 设置 我开始使用的模板使用旧版本的 Angular 因此我更新了包引用 当我构建时 列表中的第一个错
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo
  • 如何在 Angular 项目中使用 Bootstrap?

    我开始我的第一次Angular应用程序和我的基本设置已完成 我怎样才能添加引导程序我的申请 如果您可以提供一个示例 那么这将是一个很大的帮助 如果您使用Angular CLI要生成新项目 还有另一种方法可以使 bootstrap 可访问角度

随机推荐

  • 从 ng-repeat 内部调用 angularjs 属性指令

    我有一个表列对象的集合 我正在使用 ng repeat 对其进行迭代 我正在根据用户想要查看的列动态构建表 每个 TH 标签都调用一个 可排序 指令 如下所示 th Heading th 当自定义属性的值被硬编码时 如上所述 这很好 但是
  • 确定 Any.Type 是否可选

    我正在尝试确定给定类型是否t Any Type 是一个可选类型 我正在使用这个测试 t is Optional
  • XAML 设计器未加载

    我正在尝试开发适用于 Windows 10 的通用应用程序 但 XAML 设计器无法加载 我尝试重新安装 Visual Studio 但似乎没有任何效果 Error System Runtime InteropServices COMExc
  • 如何强制 python 子图具有相等的宽度和单独的高度(gridspec 不起作用)?

    I have the following figure Equal aspect ratio for each of the axes is a requirement I d love the widths to match betwee
  • 将 JSON 时间戳字符串转换为 pandas dataframe 中的 python 日期

    我有一个从 JSON 读取的 pandas 数据框 其中一个日期列是一种奇怪的时间戳格式 如下所示 日期 1405961743000 0100 如何将整列转换为 python 日期 我已经能够使用 datetime 手动将该日期转换为 py
  • Android ToggleButton 自定义样式未应用

    我跟着这个例子 http www mokasocial com 2011 07 sexily styled toggle buttons for android 用于将一些自定义主题应用于我的切换按钮 但是当我运行我的应用程序时 我看到通用
  • 如何在 AWS API 调用中使用“NextToken”

    我遇到了一个小问题 我真的很难理解它是如何工作的 我正在编写一个工具 它基本上执行描述组织来收集我们的 AWS 组织中的所有帐户 根据文档here https boto3 readthedocs io en latest reference
  • 解决IContainer

    从应用程序的类内部获取 Autofac 容器的建议方法是什么 Autofac 是否提供解析类上的 IContainer 属性 或者在构建容器后是否需要全局存储该容器 你需要IComponentContext or ILifetimeScop
  • OpenCV 从相机捕获 YUYV,无需 RGB 转换

    我尝试使用 openCV c 从 LI USB30 V024 立体相机捕获左右图像 而不自动将其转换为 RGB 相机输出 YUYV 格式的图像 我尝试使用 videoCapture set CV CAP PROP CONVERT RGB f
  • 带有 *ngIf 内部的模板,更改模型后不起作用

    Problem Angular 2 2版本之后 我注意到我的应用程序的某些组件存在问题 即更新数据后 视图中的数据错误 它显示了正确大小的列表 但仅包含第一项的数据 示范 我创建这个 Plunker 有一个简单的例子 http plnkr
  • Chrome 屏幕截图仅在首先单击扩展程序时有效

    因此 我尝试编写一些代码 以便在按下我的网站上的按钮时可以截取页面的屏幕截图 代码可以工作 但唯一的问题是我必须先单击 chrome 扩展 然后才能单击按钮来截取屏幕截图 我猜这是因为活动选项卡未被调用 有任何想法吗 这是错误消息 运行 t
  • C# 如何将整型的项隐式转换为 double 的项?

    是否有任何 C 规范说明如何隐式转换整型类型的项 例如 int 的条款double应该可以工作吗 如果是这样 有人可以告诉我算法或指导我吗 C 6 0 规范草案 https learn microsoft com en us dotnet
  • 你能在 C 中#define 注释吗?

    我正在尝试做一个调试系统 但它似乎不起作用 我想要完成的是这样的 ifndef DEBUG define printd else define printd printf endif 有没有办法做到这一点 我有很多调试消息 但我不喜欢这样做
  • 编写一个简单的自定义编辑器需要多快?

    简单地说 我的意思是有按钮 bold italic 编号列表 要点列表 向左缩进 右缩进 拼写检查 显然由现成的 js 组件支持 我所说的自定义是指 拥有自定义图标 所以实际上只是自定义设计 无框架 从头开始编写 轻量级 兼容主流浏览器 这
  • ViewChild 与输入/输出 - Angular 最佳实践 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在我看来 几乎在所有我们指定组件的情况下 Inputs Output我们也可以没有任何 Inputs Outputs 而是使用 ViewChil
  • PySpark 将列除以其总和[重复]

    这个问题在这里已经有答案了 我试图将 PySpark 中的列除以它们各自的总和 我的数据框 此处仅使用一列 如下所示 event rates 1 10 461016949152542 2 10 38953488372093 3 10 609
  • heroku 应用程序在推送后仍然引用旧文件

    我最近在 Heroku 中遇到了这个非常奇怪的问题 我在本地开发和测试 然后将更改推送到 Heroku 尽管推送的文件已经更改 Heroku 确实识别了它并推送了新文件 但当我查看 Heroku 上的确切网页时 它的行为就好像它仍在使用我刚
  • 在 Xamarin iOS 中使用 Firebase Crashlytics

    任何人都可以帮助我如何使用适用于 Xamarin iOS 的 Xamarin Firebase iOS Crashlytics nuget 包 我的代码中随机出现 SIGSEGV 代码错误 但我无法找出实际问题 已经搜索了很多关于如何在 X
  • 如何在java swing中为某个类型的所有组件设置UI?

    我创建了自己的MyScrollbarUI类在我的应用程序中具有自定义滚动条外观 现在我必须做 scrollPane getHorizontalScrollBar setUI new MyScrollbarUI scrollPane getV
  • 用于渲染大量数据的表格设计 Angular

    我是角度新手 期待创建一个将呈现大量数据的表 下面是我试图实现的表中的功能 有人可以指导如何解决这个问题吗 有没有实现它的开源项目 或者好的资源 通用搜索按钮可在所有列中搜索并在表格中显示结果 用户可以显示和隐藏某些列 选定列上的预填充过滤