阿里云新用户优惠

三十五、Column Moving列移动

2019-03-21 · 120 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 217 Column Moving ui.grid.moveColumns允许将列移动到其他位置。要启用，必须引入ui.grid.moveColumns模块，并在grid元素上包含ui-grid-move-columns指令。 api文档中提供了moveColumns特性的文档，特别是： columnDef gridOptions publicApi 默认情况下，启用后所有列均可移动，可以通过参数gridColumnMoving来禁用全部列的移动。也可在columnDefs中设置参数enableColumnMoving来针对某个列设置是否移动。可以通过拖放将列放到特定位置来调整列。或者，使用gridApi方法gridApi.colMovable.moveColumn（oldPosition，newPosition）也可用于移动列。列位置范围从0（最左边）到表格中的可见列数（最右边）。为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件： <script src="http://ui-grid.info/release/ui-grid.core.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.move-columns.min.js"></script> index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl as $ctrl"> <div class="grid" ui-grid="$ctrl.gridOptions" ui-grid-move-columns></div> </div> </body> </html> main.css .grid { width: 100%; height: 400px; } app.

阅读更多...

阿里云新用户优惠

三十四、Expandable grid 可扩展的表格

2018-12-18 · 579 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 216 Expandable grid ui.grid.expandable模块可以添加子表格。要显示子表格，您需要增加以下表格选项： api文档中提供了可扩展功能的文档，特别是： gridOptions publicApi $scope.gridOptions = { //This is the template that will be used to render subgrid. expandableRowTemplate: 'expandableRowTemplate.html', //This will be the height of the subgrid expandableRowHeight: 140, //Variables of object expandableScope will be available in the scope of the expanded subgrid expandableRowScope: expandableScope } expandableRowTemplate将是子表格的模板，expandableRowHeight是子表格的高度。 expandableRowScope可用于将变量添加到子表格的scope。然后可以从expandableRowTemplate访问这些变量。 grid api为子表格提供以下事件和方法： //rowExpandedStateChanged is fired for each row as its expanded: gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){ }); //Following methods can be used to expand/ collapse all rows of the grid: gridApi.

阅读更多...

阿里云新用户优惠

三十三、UI-Grid Tree View 树状图

2018-11-15 · 353 words · 2 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：tutorial: 215 tree view 在表格中可以创建树状视图，指定哪些数据行是节点，哪些是叶。请注意，最近treeView和分组有重大更改，大部分逻辑合并到treeBase模块中。这意味着您可能需要在代码中包含treeBase模块，并且某些事件和方法已移至grid.api.treeBase而不是grid.api.treeView。 api文档中提供了treeView功能的文档，包括treeView本身和treeBase文档中的共享函数。特别是： treeBase columnDef treeView gridOptions and treeBase gridOptions treeView publicApi and treeBase publicApi 树结构本身记录在treeBase中。在数据中，通过在给定行上设置属性$$treeLevel来设置节点。级别从0开始，随着数据向下移动而增加。可以通过rowExpanded事件逐条侦听加载数据。然后，还可以将其他数据拼接到指定的数据数组中。 Treeview允许排序，并将其实现为递归树排序 – 它对树的每个节点的子节点进行排序。 Treeview所有行（节点和叶子）都可以过滤，并确保任何可见行的所有父项也是可见的。请注意，过滤不会更改展开/折叠状态，仍需要展开节点以获取已过滤的行。 Treeview包括聚合逻辑，通过在columnDef上设置聚合属性来实现。聚合属性记录在columnDef中。有关更多详细信息，请参阅 complex trees 。 TreeView还正在开发中，仍然是内测版，但是已经包含在分发文件中可以使用。值得注意的是： – 在加载其他数据的同时显示沙漏或图标会很好，同时也意味着表格不知道是否正在添加其他数据需要注意的选项包括： treeIndent：随着树级别变深，展开按钮缩进的像素值（默认为10）。较大的值看起来更好 treeRowHeaderBaseWidth：树行标题的基本宽度（默认为30） showTreeExpandNoChildren：默认为true。即使没有子项也显示+，也允许你动态加载子项。如果设置为false，如果没有子项，则不会有+ 为了获得更好的性能，您可以选择加载ui-grid.core.js和特定的功能文件： <script src="http://ui-grid.info/release/ui-grid.core.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.tree-base.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.tree-view.min.js"></script> Example 在此示例中，大多数数据在初始页面加载时加载。然而，Guerrero Lopez下的节点仅在监听该行时才加载。它们有2秒的延迟来模拟从服务器加载。 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script> <script src="http://ajax.

阅读更多...

阿里云新用户优惠

三十二、UI-Grid Pagination 分页

2018-11-06 · 199 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 214 Pagination 启用分页后，数据会使用内置分页选择器显示在浏览的页面中。 api文档中提供了分页功能的文档，特别是： gridOptions publicApi 如果您想要基于服务器的分页，可以查看外部分页教程或考虑使用无限滚动，它还支持检索页面中的数据。为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件： <script src="http://ui-grid.info/release/ui-grid.core.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script> index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script> <script src="/release/ui-grid.js"></script> <script src="/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <p><strong>Grid with native pagination controls</strong></p> <div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div> <br /><br /> <p><strong>Grid pagination controlled via the API</strong></p> <div ui-grid="gridOptions2" ui-grid-pagination class="grid"></div> <p>Current page: {{ gridApi2.

阅读更多...

阿里云新用户优惠

三十一、UI-Grid Auto-Resizing 自动调整大小

2018-11-01 · 206 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 213 Auto-Resizing 自动调整大小功能允许表格在页面大小更改时自行调整大小。请在module中引入“ui.grid.autoResize”模块，并将ui-grid-auto-resize指令添加到html页面的grid中。注意：开启后，系统会间隔250ms检查表格元素的大小是否发生更改。它可能会对网站或应用程序的性能产生负面影响。为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件： <script src="http://ui-grid.info/release/ui-grid.core.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script> index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script> <script src="/release/ui-grid.js"></script> <script src="/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button> <br> <br> <div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div> </div> </body> </html> main.css .grid { width: 500px; height: 400px; } app.

阅读更多...

阿里云新用户优惠

三十、UI-Grid Infinite scroll 无限滚动

2018-10-30 · 501 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 212 Infinite scroll 无限滚动功能允许用户将其数据延迟加载到gridOptions.data。 api文档中提供了Infinite scroll功能的文档，特别是： gridOptions publicApi 一旦到达实际数据集的顶部（或底部），无限滚动将停止在该方向上触发事件。可以通过infiniteScrollUp = true向上或向下通过infiniteScrollDown = true设置触发方向。默认未启动。默认情况下，距离网格末端20行（在任一方向上）时，会触发数据请求。还可以通过设置infiniteScrollRowsFromEnd = 20指定触发请求时数据集末尾的行数。还会触发needMoreData（向下）或needMoreDataTop（向上）事件，如果有更多可用数据，必须接收并响应。一旦检索到数据则将其添加到数据阵列，还需要调用dataLoaded来确认已加载数据，或者没有更多数据，且不会在该方向上再触发更多数据的请求。加载数据后，会调整网格滚动以显示连续滚动的外观。假设用户在数据返回时已经到达滚动的末尾（向上或向下），会将用户滚动条到新添加的数据的开头。在某些情况下，这可能会产生“跳跃式”滚动，特别是如果将rowsFromEnd设置为相当高的值，以便预读取数据 – 如果用户正在缓慢滚动它们可能距离末尾50行，当dataLoaded处理完会突然将滚动条移动到过去的结尾。为避免这种情况，可以在数据添加之前通过调用saveScrollPercentage保存滚动位置，添加数据后dataLoaded调尝试调整滚动以使相同的行显示。如果启用了无限滚动并且在该方向上仍有数据，那么当到达末尾时，会抑制将滚动传播到父容器。因此，如果有向上的页面，那么滚动到顶部将获得请求，而不是向上滚动整个页面。如果正在使用外部排序或外部过滤，则只要发生滚动或过滤事件，就会重新加载数据。在这种情况下，需要调用resetScroll以告知表格不要尝试保留先前的滚动位置。当重置表格中的数据时，也可以使用此调用，调用时必须声明此位置向上或者向下是否允许请求数据。有时可能会删除数据，例如，如果将10页数据保留在内存中，并且在向底部添加数据时开始从顶部丢弃数据。可以使用dataRemovedTop和dataRemovedBottom声明已丢弃数据，并将滚动设置回删除数据之前的位置。为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件： <script src="/release/ui-grid.core.min.js"></script> <script src="/release/ui-grid.infinite-scroll.min.js"></script> Example 在此示例中，我们有一个数据集，从5页数据集的第2页开始。每页有100条记录，所以从记录200开始，可以向上滚动2页，向下滚动2页。向上移动时应该看到平滑滚动，当到达记录零时，滚动会传播到父页面。还可以在向下移动时看到平滑滚动，当到达记录499时，滚动会传播到父页面。我们还会从内存中的数据集中删除数据，只在内存中保存4个页面，因此将丢弃页面并适当地重置scrollUp和scrollDown。同样，当发生这种情况时，表格仍应保持滚动位置。最后，我们可以重置数据，这会让我们回到中间页面并将滚动设置到顶部。 index.html <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script> <script src="http://ui-grid.

阅读更多...

阿里云新用户优惠

二十九、UI-Grid Selection 选择

2017-06-20 · 555 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 210 Selection 此示例使用 ui-grid-selection 指令来选择行。若要启用, 必须包括 “ui.grid.selection” 模块, 并且必须在表格元素上写入 ui-grid-selection指令。选择功能的文档在 api 文档中提供, 特别是： gridOptions publicApi 使用 gridOptions onRegisterApi 回调在选定行时注册 rowSelectionChanged 事件和日志。默认情况下, 选择功能将选择更改划分为批处理事件和单个事件, api 中提供了两个不同的事件。通过设置 enableSelectionBatchEvent: false, 您可以使它改为只调用循环中的单个事件, 这在做客户端而不是服务器端处理更改时可能会很有用。默认情况下, 该模块将提供一个可以选择单个行的复选框。如果将 gridOption 中的enableRowHeaderSelection 设置为 false, 则会隐藏该复选框, 不过仍然可以通过单击该行来选择。你可以看到, 在本教程中的 grid1 通过查看浏览器的控制台。如果要允许同时单击该行, 也可以单击 rowHeader, 则可将 enableFullRowSelection 设置为 true。在 gridOption 中的设置multiSelect 为 true 将允许选择多个行, 设置为 false 将允许每次只选择一行。如果 multiSelect：false, 则附加选项 noUnselect 将意味着始终选择行。您可以选择其他行 (这将取消选中当前行), 但不能通过单击来手动取消选中当前行。这意味着, 除了第一次打开表格时, 至少总是选择一行。如果需要, 可以初始化选择一行后, 打开页面。第二个表格说明了这一点。

阅读更多...

阿里云新用户优惠

二十八、UI-Grid Grouping 分组

2017-05-31 · 626 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：Tutorial: 209 Grouping 分组功能允许您根据特定列中的相似值对行进行分组, 在某些方面类似于 excel 数据透视表的效果。不按分组的列可以聚合, 例如, 统计每个组中的行数。 api 文档中提供有”分组” 的功能, 包括分组本身和 treeBase 文档中的共享函数。特别是: grouping columnDef and treeBase columnDef grouping gridOptions and treeBase gridOptions grouping publicApi and treeBase publicApi 树结构本身被记录在 treeBase。可以在 columnDef 选项中来设置分组: grouping: { groupPriority: 0 } 或为列中的聚合设置 treeAggregation: {type: uiGridGroupingConstants.aggregation.COUNT}. 默认情况下分组列会显示在前面, 这将提供更直观的效果。为了避免对pinning 的依赖关系, 是将分组的列作为整体来移动的, 而不是使用pinning 功能。分组有排序功能, 允许用户更改排序顺序或使用外部排序功能, 并将结果分组。标记为分组的列排序优先级最高。任何分组的列都有 suppressRemoveSort 设置, 当列被取消分组时, suppressRemoveSort 将返回到 columnDef 中的值。分组和聚合应与筛选一起使用, 它应只对筛选的行进行分组和聚合。无法编辑组页眉行, 如果使用选择功能, 则无法选择。但是, 它们可以被导出。默认情况下, 组 rowHeader 始终可见。如果希望 groupRowHeader 仅在至少一列分组时出现, 则可以在gridOption中设置 treeRowHeaderAlwaysVisible: false

阅读更多...

阿里云新用户优惠

二十七、UI-Grid Save and restore state 保存和还原状态

2017-05-08 · 209 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：208 Save and restore state “保存状态” 功能允许保存表格的当前外观, 并在返回到表格后恢复。例如, 在应用程序中, 用户可以重新排列序、调整列宽、应用排序和筛选, 并选择特定的单元格。当用户把当前表格调整为自己喜欢的界面后, 跳转到另一个页面。然后重新返回这个页面时, 他们可能会期望它看起来像在他们离开时那样。保存状态功能就是这个作用。 saveState 功能的文档在 api 文档中提供, 特别是: gridOptions publicApi 有两种核心方法: save（保存），将表格当前状态打包成对象，然后将其存储到某个位置的对象 (cookie、会话状态、数据库) restore（恢复）, 获取表格状态对象, 并将表格返回到该对象中存储的状态请注意, saveState 功能特意设置为存储瞬态状态-不在 gridOptions 或 columnDefs 中保存的信息。调用应用程序负责存储 gridOptions 和 columnDefs (并且必须有它们, 以便第一次呈现表格)。该功能还提供了一些控制保存内容的选项。默认情况下, 所有选项都为 true: saveWidths saveOrder saveScroll saveFocus saveVisible saveSort saveFilter savePinning saveGrouping saveGroupingExpandedStates saveTreeView saveSelection 例子在此示例中, 我们提供了一个按钮来保存表格状态。然后, 您可以将表格布局修改为不同的内容, 并使用 “还原” 按钮将表格设置为之前的状态。 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.

阅读更多...

阿里云新用户优惠

二十六、UI-Grid Importing Data 导入数据

2017-05-04 · 213 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：207 Importing Data 导入程序功能允许导入到 csv 或 json 格式的数据。导入程序可以使用表格中的菜单, 或者接受由用户实现的自定义文件选取电脑中的文件。导入程序功能以 json 或 csv 格式导入文件, 如果需求存在, 则可以扩展到其他文件格式。 api 文档中提供了导入器功能的文档, 特别是: gridOptions publicApi 对于 json 格式文件, 将假定接收的元素与列匹配. 字段属性在gridOptions 的 columnDefs, 并被加载到所提供的实体。对于 csv 文件, 数据将映射到 columnDefs, 其中包含 csv 标题行中的列需要匹配 column.name或column.displayName。可以选择提供将标题映射到列的自定义column.name, 而这将改为使用, 您可以用它来实现自定义的 “列选取器” 类型例程。如果在标题上使用国际化 (比方说, 通过添加 cellHeaderFilter), 则还可以选择将筛选函数传递到 importerHeaderFilterCallback 例程中。此例程将被调用displayName 以尝试匹配翻译的文本, 如果您提供此例程, 它必须返回立即翻译, 而不是一个 promise-所以如果使用angular-translate, 您需要使用$translate.instant。您可以选择提供一个自定义函数, 在每个实体中映射导入的数据, 请参考 importerObjectCallback 的文档。若要使用导入程序, 需要在表格上引入ui-grid-importer指令, 并且必须提供一个 gridOptions. importerDataAddCallback 函数, 将创建的对象添加到数据数组中。您还需要安装 csv-js库, bower install 安装-savedev csv-js。您可以通过使用 globals 来配置 csv-js 库,例如 CSV.

阅读更多...

阿里云新用户优惠

二十五、UI-Grid Exporting Data 导出数据

2017-05-03 · 262 words · 2 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：206 Exporting Data 导出功能允许将数据从表格中导出为 csv 或 pdf 格式，可以导出所有数据、可见数据或所选数据。要使用导出功能, 需要在表格上引入 ui-grid-exporter指令。如果要导出选定的行, 则必须在表格上引入 ui-grid-selection指令。如果要导出为 pdf, 您需要安装 pdfMake, 可通过以下操作: bower install pdfmake ui.grid.exporter的api可以在下列中使用： columnDef gridOptions publicApi 导出选项在表格的菜单栏中, 可以在gridOption 中通过enableGridMenu来启用表格菜单。请注意, 如果选择了数据, 则仅显示导出所选数据的选项。如果您使用 internet explorer, 那么 pdf 将自动下载而不是打开, 有问题与 pdfMake 无法自动打开选项卡在 ie 浏览器（请参阅该地址中的其他问题。 https://github.com/bpampuch/pdfmake/issues/16）一些早期版本的 excel 不喜欢 utf-16 bom–第一个表示 csv 文件包含 utf-16 内容的少数字符。大多数其他应用程序和较新的 excel 版本都可以成功地使用它。如果excel 中的前几个字符有乱码的问题, 可以尝试设置 exporterOlderExcelCompatibility: true 你可能会发现这个问题, 当 pdfMake 在压缩时, 可能会发生错误。如果您有这个问题, 建议改为包括 pdfmake. js 和 vfs_fonts. 作为素材(或等效的素材版本), 然后将它们作为脚本包含在应用程序中, 而不是作为整个 javascript 库的一部分。

阅读更多...

阿里云新用户优惠

二十四、UI-Grid Row Edit Feature 行编辑功能

2017-04-24 · 373 words · 2 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：205 Row Edit Feature ui.grid.rowedit 扩展了编辑功能, 以支持对服务器保存数据的回调, 该数据同时保存了 “行”。此功能尝试给用户一个类似于电子表格的体验, 以便他们可以编辑他们希望的任何字段, 并且该功能将试图保存数据 “行”。在数据不会产生错误的程度上, 从用户的角度来看, 保存过程几乎是无形的–保存后变灰色, 和不能编辑的灰色, 用户就像数据是本地的一样进行编辑。 rowEdit 功能的文档在 api 文档中提供, 特别是: gridOptions publicApi 每一行在任何时间点都是四状态之一: clean：未进行编辑 (或自上次保存后没有编辑) isDirty：已进行编辑, 但数据尚未保存, 因为用户仍在编辑该行, 或者因为计时器尚未触发 isSaving：保存此行的回调已被调用, 尚未返回。此行在这段时间内不可编辑, 并显示为灰色, 以避免用户再次编辑行导致锁定异常 isError：保存回调返回了一个错误。该行仍显示已更新的数据, 但将显示为红色基本的操作方法是, 每当编辑单元格时 (使用 “编辑” 标识), 就会在该行上设置一个 isdirty 标志, 并设置一个 saveTimer。如果同一行中的另一个单元格在2秒钟内开始编辑 (或其他可配置的时间), 则计时器将再次被销毁。否则, 在完成该行的计时器将设置为 isSaving 和灰色的状态, 并且将调用 saveRow 事件。此事件调用的函数必须调用 rowEdit. setSavePromise, rowEdit 功能将等待该异步。如果还启用了 cellNav 功能, 则该行内单元格上的 setFocus 就足以延迟计时器 (更容易地处理某些列是可编辑的情况, 用户选项卡或单击同一行上的 non-editable 字段)。

阅读更多...

阿里云新用户优惠

二十三、UI-Grid Column Resizing 调整列大小

2017-04-17 · 212 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：204 Column Resizing “调整列大小” 功能允许调整每个列的大小。要启用, 必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。 “调整列大小” 功能的文档在 api 文档中提供, 特别是: columnDef gridOptions publicApi 可以将单独的列设置为not resizeable，如果这样做, 建议将这些列设置固定的像素宽度，否则, 如果其他列的大小减小，则可能会自动调整大小以填满剩余空间，并且不会再减小其宽度。当调整列的大小时其他具有固定宽度或已调整大小的列会保留其宽度。所有其他列都调整大小以占用剩余空间。只要左边列有一个可变列, 表格的列将不会减少到整个表格宽度以内，但一旦调整了所有列的大小, 最终就可以得到小于表格宽度的总列宽。 angular.module('yourApp', ['ui.grid', 'ui.grid.resizeColumns']); <div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div> 如果出于某种原因, 希望使用 ui-grid-resize-columns的指令, 但不允许进行列调整, 则可以显式将该选项设置为 false。这可以防止表格调整大小, 而不需要在 colDef 选项中单独设置。 $scope.gridOptions = { enableColumnResizing: false }; 通过将 enableColumnResizing 属性设置为 false, 可以在列定义中禁用它。 $scope.gridOptions = { enableColumnResizing: true, columnDefs: [ { field: 'name' }, { field: 'gender', enableColumnResizing: false }, { field: 'company' } ] }; index.

阅读更多...

阿里云新用户优惠

二十二、UI-Grid Pinning 固定

2017-04-15 · 159 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文： 203 Pinning 锁定功能允许用户将列向左或向右锁定。要启用, 必须包括 “ui.grid.pinning” 模块, 并且必须在表格元素上写上 ui-grid-pinning指令。在 api 文档中提供了固定功能的文档, 特别是: columnDef gridOptions publicApi 还可以禁用列级别上的锁定。请注意下面示例中的 “id” 列定义。 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <script src="http://ui-grid.info/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <div ui-grid="gridOptions" class="grid" ui-grid-pinning></div> </div> </body> </html> main.css .grid { width: 100%; height: 400px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']); app.

阅读更多...

阿里云新用户优惠

二十一、UI-Grid Cell Navigation 单元格导航

2017-04-14 · 435 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：202 Cell Navigation 此示例使用 ui-grid-cellNav指令添加单元格导航。要启用, 必须包括 “ui.grid.cellNav” 模块, 并且必须在表格元素上包括ui-grid-cellNav指令。 CellNav 功能的文档在 api 文档中提供, 特别是: columnDef gridOptions publicApi CellNav 允许您使用箭头键、pg-down 和 pg-up 在网格周围导航、输入 (下移)、shift 输入 (向上移动)、tab (向右移动) 和 shift 键 (向左移动)。当与可编辑功能组合在一起时, 左向右箭头键将被并入 “深层编辑” 模式, 允许您在编辑的文本中移动。tab 键和 shift 键选项卡按键仍起作用。使用 gridOptions. onRegisterApi 回调以在导航单元格时注册 on_cellNav 事件和日志。提供一个示例, 请求滚动到特定的行或列以编程方式-对于记住页的状态并在用户返回时滚动回该位置非常有用。提供一个滚动到特定单元格并使用 scrollToFocus api 设置焦点的示例。提供了一个利用 modifierKeysToMultiSelectCells 选项和 getCurrentSelection api 函数来提取选定单元格的值的示例。提供了一个示例, 说明使用 keyDownOverrides 添加自定义的 ctrl + Right 焦点到一行的最后一列, 同时仍然允许由表格处理右箭头。 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.

阅读更多...

阿里云新用户优惠

二十、UI-Grid Edit Feature 编辑功能

2017-04-13 · 817 words · 4 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：201 Edit Feature ui.grid.edit 功能允许对表格数据进行内嵌编辑。要启用, 必须引入 “ui.grid.edit” 模块, 必须在表格元素上引入ui-grid-edit编辑指令。 api 文档中提供了编辑功能的文档, 特别是: columnDef gridOptions publicApi 可以使用列定义中的 enableCellEdit 选项来允许列可编辑。通过双击、f2、或开始键入任何 non-navigable 键来调用编辑。可以通过tab, enter 或 esc 结束单元格的编辑, 并且tab, 左或右箭头, enter或 esc 为也可以应用在下拉中。默认情况下, 为所有字段提供了输入元素, 其中有数字、日期和复选框编辑器, 用于为指定了 “数字”、”日期” 和 “布尔” 类型的字段提供一个简单的文本编辑器。（关于日期编辑器的一点值得注意的是, 对于要启用的日期编辑器, 变量的数据类型也应该是 “日期”）通过 columnDef 上设置 editableCellTemplate : ui-grid/dropdownEditor 还可以使用下拉编辑器。当使用下拉编辑器时, 您需要通过 columnDef 的 editDropDownOptionsArray 属性提供一个选项数组。默认情况下, 此数组应为 {id: xxx, value: xxx}, 还可以通过使用 editDropdownIdLabel 和 editDropdownValueLabel 选项来更改字段标记。通过columnDef 上设置 editableCellTemplate : ui-grid/fileChooserEditor 可以使用文件选择器。此文件选择器将打开用户选择的文件, 并向模型元素分配该文件的值。在下面的示例中, 我们使用文件选择器加载一个文件, 我们在单元格中显示文件名。文件存储在隐藏列中的行, 我们可以保存到服务器或其他进程。

阅读更多...

阿里云新用户优惠

十九、UI-Grid Horizontal Scrolling 水平滚动

2017-04-11 · 179 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：191 Horizontal Scrolling 显示大量列的滚动 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <script src="http://ui-grid.info/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <strong>{{ gridOptions.columnDefs.length | number }} Columns with Random Widths</strong> <br> <br> <div id="grid1" ui-grid="gridOptions" class="grid" ng-if="gridOptions"></div> </div> </body> </html> main.css .grid { width: 500px; height: 450px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', function ($scope) { var colCount = 500; var rowCount = 500; var gridOptions = {}; function generateColumns() { for (var colIndex = 0; colIndex < colCount; colIndex++) { gridOptions.

阅读更多...

阿里云新用户优惠

十八、UI-Grid Large Dataset 大数据集

2017-04-11 · 136 words · 1 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：190 Large Dataset 这个表格示例使用10000个记录的数据集。演示如下：绑定复杂的列属性城市.地址。同一字段可以在具有不同名称的表格中列出两次使用字段而不是名称便于2.x 向后兼容 index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <script src="http://ui-grid.info/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <strong>Data Length:</strong> {{ gridOptions.data.length | number }} <br> <br> <div id="grid1" ui-grid="gridOptions" class="grid"></div> </div> </body> </html> main.css .grid { width: 500px; height: 450px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) { $scope.

阅读更多...

阿里云新用户优惠

十七、UI-Grid Accessibility 无障碍性

2017-04-10 · 548 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：122 Accessibility 无障碍性 (或 A11Y) 通常是 web 开发中被忽略的方面。确保您的内容是可访问的, 类似于确保您的内容在所有主要浏览器上都可见。如果您在设计网站时不考虑辅助功能, 则您的内容将无法供所有用户使用。先决条件: 引入 angular-aria (Angular 1.3.0+) <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> <link rel="styleSheet" href="release/ui-grid-unstable.css"/> <script src="/release/ui-grid-unstable.js"></script> 在app中依赖注入 ngAria var app = angular.module('app', ['ngAria', 'ui.grid']); 浏览器支持状态浏览器操作系统应用程序核心分页单元格导航 Chrome OSX Voice Over 全部支持全部支持不一致的读取单元格导航。 Firefox OSX Voice Over 仅页眉/菜单全部支持没有，不能读取。 Safari OSX Voice Over 全部支持全部支持全部支持为什么只有 osx？因为它是表格测试的唯一工具。如果你用其他东西来测试过它，可以随时更新这份文件。用 OSX 的声音测试可以通过⌘+F5来开启声音测试。设置修改声音自动跟随鼠标，将使声音控制光标移动到要开始导航的位置更容易。或者, 您也可以使用声音导航到表，在表格中管理焦点，以便在添加和移除菜单以及禁用按钮时，声音的光标保持不变。测试没有 OSX 的声音只需使用 tab 和 shift + tab 键即可在网格上导航菜单和按钮。

阅读更多...

阿里云新用户优惠

十六、UI-Grid Grid Menu 菜单栏

2017-04-07 · 281 words · 2 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

原文：121 Grid Menu 表格菜单栏可以通过gridOption 中设置 enableGridMenu: true 来开启。这将在表格的右上方添加一个图标，该图标浮动在列标题的上方。默认菜单可以显示/隐藏列，还可以自定义额外的动作。每个菜单项都可以自定义功能： shown：一个function，用来决定该项是否显示的 title：菜单项显示的标题（注意，也可以使用 i18n 通过 gridMenuTitleFilter 设置） icon：显示在项目旁边的图标 action：当菜单被点击时将被调用的function active：一个function，用来高亮显示该项 context：默认情况下，action、shown 和 active 的上下文将作为属性添加到grid 中，菜单项可以通过this.context添加上下文属性来传递自己的上下文。 leaveOpen：默认是false，如果设置为true，将在菜单操作后打开 order：菜单中项目的顺序。列的范围300 -> 300 + numColumns ×2，importer和exporter分别为150和200 导出功能还将菜单项添加到此菜单。exportermenucv选项设置为false，这将禁止csv导出。“导出选定行”选项仅在至少选择了一行时可用。列标题可以使用gridMenuTitleFilter自定义筛选器来定义，当你有一个国际化的两列标题，你也希望它们在表格菜单中国际化，翻译需要返回一个字符串或者一个deferred.promise的字符串。在下面的例子中，我们创建了一个假国际化函数，等待1秒，然后在每个列前面加上“col:”。可以通过gridMenuShowHideColumns: false来关闭 gridOption 显示和隐藏列的功能，也可以通过设置enableHiding 来关闭columnDef 显示和隐藏单个列的功能。 gridMenu 的按钮还是有点丑。可以在CSS中覆盖适合应用程序的高度： .ui-grid-menu-button { height: 31px; } index.html <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <script src="http://ui-grid.info/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div> <div ng-if='columnChanged'> Column Visibility Changed - name: {{ columnChanged.

阅读更多...