使用Bootstrap 3在AngularJS中表示网格或表格的最佳方法？

作者: 记忆短浅♡思念不变
发布时间: 2025-06-15 11:05:06 (22天前)
转自：

8 条回复

0#
回复此人
明天会更好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://adaptv.github.io/adapt-strap/"> 适应表带 </A> 。这里是 <a href="http://jsfiddle.net/kashjs/gt8Ljspf/"> 小提琴 </A> 。 </p> <P> 它非常轻巧，具有动态的行高。 </p> <pre> <code> <ad-table-lite table-name="carsForSale" column-definition="carsTableColumnDefinition" local-data-source="models.carsForSale" page-sizes="[7, 20]"> </ad-table-lite> </code> </pre> </DIV>

编辑
1#
回复此人
你瞎啊！撞我心了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 正如其他答案所述：对于带搜索的表格，选择和分页“ 的<strong> NG-网 </强> “是最好的选择。我遇到的一些事情我会提到在实施时可能有用： </p> <P> 要设置env： </p> <OL> <LI> <P> <a href="http://www.json-generator.com/" rel="nofollow noreferrer"> http://www.json-generator.com/ </A> 生成JSON数据。它是一个非常酷的工具，可以让您的示例数据集更快地进行开发。 </p> </LI> <LI> <P> 您可以检查此plunker以实现您的实施。我已修改为包括：搜索，选择和分页 <a href="http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview" rel="nofollow noreferrer"> http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview </A> </p> </LI> </醇> <P> 您可以查看有关Smart table的本教程，提供您需要的所有信息： <a href="http://lorenzofox3.github.io/smart-table-website/" rel="nofollow noreferrer"> http://lorenzofox3.github.io/smart-table-website/ </A> </p> <P> 接下来的问题是的<strong> <code> bootstrap 3 </code> </强> ：它不完全，但这个模板看起来不错。 - 你可以使用 <a href="https://github.com/angular-ui/bootstrap/tree/master/template" rel="nofollow noreferrer"> https://github.com/angular-ui/bootstrap/tree/master/template </A> 所有模板都写得很好。 </p> <P> 我可以继续讨论如何将bootstrap 3转换为angularjs，但已经在以下链接中提到过： </p> <UL> <LI> <a href="https://stackoverflow.com/questions/16327846/bootstrap-3-with-angularjs"> Bootstrap 3与当前的AngularJS bootstrap指令兼容吗？ </A> </LI> <LI> <a href="https://github.com/angular-ui/bootstrap/issues/331" rel="nofollow noreferrer"> https://github.com/angular-ui/bootstrap/issues/331 </A> </LI> </UL> <P> 请注意，关于智能桌，你必须检查它是否准备好你的角度版本 </p> </DIV>

编辑
2#
回复此人
Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Kendo网格和Wijmo一样好。我知道Kendo为他们的数据源附带了Angular绑定，我认为Wijmo有一个Angular插件。两者都不是免费的。 </p> </DIV>

编辑
3#
回复此人
张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用bootstrap 3类并使用ng-repeat指令构建表 </p> <P> 的<strong> 例： </强> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> angular.module('App', []); function ctrl($scope) { $scope.items = [ ['A', 'B', 'C'], ['item1', 'item2', 'item3'], ['item4', 'item5', 'item6'] ]; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="App"> <div ng-controller="ctrl"> <table class="table table-bordered"> <thead> <tr> <th ng-repeat="itemA in items[0]">{{itemA}}</th> </tr> </thead> <tbody> <tr> <td ng-repeat="itemB in items[1]">{{itemB}}</td> </tr> <tr> <td ng-repeat="itemC in items[2]">{{itemC}}</td> </tr> </tbody> </table> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> <P> 的<strong> 实例： </强> <a href="http://jsfiddle.net/choroshin/5YDJW/5/" rel="noreferrer"> http://jsfiddle.net/choroshin/5YDJW/5/ </A> </p> <P> 的<strong> 更新： </强> </p> <P> 或者你可以随时尝试流行 <a href="http://angular-ui.github.io/ng-grid/" rel="noreferrer"> NG-网 </A> ，ng-grid有利于排序，搜索，分组等，但我还没有对大规模数据进行过测试。 </p> </DIV>

编辑
4#
回复此人
afs-loliaholic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用“数千行”，您最好的选择显然是进行服务器端分页。当我稍后查看不同的AngularJs表/网格选项时，有三个明显的收藏： </p> <UL> <LI> <a href="https://github.com/angular-ui/ng-grid" rel="noreferrer"> NG-网 </A> </LI> <LI> <a href="https://github.com/esvit/ng-table" rel="noreferrer"> NG-表 </A> </LI> <LI> <a href="https://github.com/lorenzofox3/Smart-Table" rel="noreferrer"> 智能表 </A> </LI> </UL> <P> 这三个都很好，但实施方式不同。你选择哪一个可能更多地基于个人偏好而不是其他任何东西。 </p> <P> <a href="https://github.com/angular-ui/ng-grid" rel="noreferrer"> NG-网 </A> 可能是最知名的，因为它与angular-ui有关，但我个人更喜欢 <a href="https://github.com/esvit/ng-table" rel="noreferrer"> NG-表 </A> ，我真的很喜欢他们的实现以及如何使用它们，并且他们有很好的文档和示例，并且正在积极地进行改进。 </p> </DIV>

编辑
5#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 到目前为止，TrNgGrid工作得很好。以下是我更喜欢ng-grid并移动到此组件的原因 </p> <UL> <LI> <P> 它使表元素可以被boottatched并使用bootstrap .css的所有功能（ng-grid使用jQuery UI主题）。 </p> </LI> <LI> <P> 简单，记录良好的网格选项。 </p> </LI> <LI> <P> 服务器大小分页工作 </p> </LI> </UL> </DIV>

编辑
6#
回复此人
镜乃Kagamino | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 尝试了ngGrid，ngTable，trNgGrid和 <a href="http://lorenzofox3.github.io/smart-table-website/"> 智能表 </A> ，我得出的结论是 <a href="http://lorenzofox3.github.io/smart-table-website/"> 智能表 </A> 到目前为止是AngularJS-wise和Bootstrap-wise的最佳实现。它的构建方式与使用标准角度构建自己的天真表格完全相同。最重要的是，他们添加了一些指令，帮助您进行排序，过滤等。他们的方法也使得扩展自己变得非常简单。事实上，他们使用常规的html标签表和行标准ng-repeat以及标准引导程序进行格式化，这使我成为明显的赢家。 </p> <P> 他们的JS代码依赖于angular，如果你愿意，你的html可以依赖于bootstrap。 JS代码总共为4 kb，如果你想要占用更小的空间，你甚至可以轻松地从那里挑选东西。 </p> <P> 其他网格将在不同区域给你幽闭恐惧症，智能表只是感觉开放和重点。 </p> <P> 如果您非常依赖内联编辑和其他高级功能，那么您可以使用ngTable更快地启动和运行。但是，您可以在Smart Table中轻松添加此类功能。 </p> <P> 不要错过 <a href="http://lorenzofox3.github.io/smart-table-website/"> 智能表 </A> ！ </p> <P> 除了自己使用Smart Table之外，我与Smart Table没有任何关系。 </p> </DIV>

编辑

登录后才能参与评论