阿里云新用户优惠

十五、UI-Grid Tooltips 工具提示

· 248 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：117 Tooltips 当用户悬停在单元格上时，可以设置工具提示。 在columnDef 中设置 cellTooltip: true 后，此工具可以简单的提示单元格内容。 或者，它可以接收function 返回的当前列和行的值，例如： cellTooltip: function(row, col) { return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company; } 或者它可以是一个字符串，在这种情况下，字符串将显示： cellTooltip: 'Custom tooltip - maybe some help text' 也可以用类似的方法设置一个headerTooltip ，默认是显示的是displayName。 注意，打开工具提示将会为每个单元格创建一个额外的监听，因此对表格整体性能会造成影响，不建议对每一列，比如列有数据但在表格中不显示（如长描述字段）。 Tooltips 优先于cellFilter，所以如果定义了一个cellFilter 也可以用工具提示。 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"> <br> <br> <div id="grid1" ui-grid="gridOptions" class="grid"></div> </div> </body> </html> main.

阅读更多...

阿里云新用户优惠

十四、UI-Grid HeaderCellClass 表头

· 144 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文： 115 HeaderCellClass 在columnDef中可以为每个列表头 设置一个class名称或者通过function返回的一个class名称。 在下面例子中，我们可以设置第一列的字体颜色为蓝色，第二列当排序条件为ASC时字体颜色和背景色改变。 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"> <br> <br> <div id="grid1" ui-grid="gridOptions" class="grid"></div> </div> </body> </html> main.css .grid { width: 500px; height: 200px; } .red { color: red; background-color: yellow !important; } .blue { color: blue; } app.js var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.

阅读更多...

阿里云新用户优惠

十三、UI-Grid Adding a row header 添加行标题

· 123 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：114 Adding a row header 可以添加行标题列，它会固定在表格容器的左边。 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" class="grid"></div> </div> </body> </html> main.css .grid { width: 500px; height: 250px; } app.js var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.columns = [{ field: 'name' }, { field: 'gender' }]; $scope.

阅读更多...

阿里云新用户优惠

十二、UI-Grid Adding and removing columns 添加和删除列

· 241 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：113 Adding and removing columns 表格会监控column defs 和 数据的更新，你可以动态地添加和删除列。列默认的显示顺序是按照columnDefs的顺序，用户可以通过移动表格的列来改变默认的顺序。 动态更改列上的显示名称（以及其他一些列属性），可以通过notifyDataChange API来强制更新。 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"> Try clicking the Add button to add the company column. Try clicking the Remove button to remove the last column. Try clicking the Splice button to insert a column in the middle.

阅读更多...

阿里云新用户优惠

十一、UI-Grid Add/Delete/Swap Data 增/删/替换 数据

· 341 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：112 add/delete/swap data 只要简单地使用一个不同的引用，就可以交换表格中的数据。 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"> <button type="button" id="swapData" class="btn btn-success" ng-click="swapData()">Swap Data</button> <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button> <button type="button" id="removeFirstRow" class="btn btn-success" ng-click="removeFirstRow()">Remove First Row</button> <button type="button" id="reset" class="btn btn-success" ng-click="reset()">Reset</button> <br> <br> <div id="grid1" ui-grid="gridOpts" class="grid"></div> </div> </body> </html> main.css .

阅读更多...

阿里云新用户优惠

十、UI-Grid CellClass

· 119 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：111 CellClass 在columnDefs中cellClass接受一个class样式名称或者通过function返回的一个class样式名称。 在这个例子中，我们将第一列的字体和背景颜色，第二列公司如果等于“velity”字体颜色就变为蓝色。 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"> <br> <div id="grid1" ui-grid="gridOptions" ng-if="gridOptions.data" class="grid"></div> </div> </body> </html> main.css .grid { width: 500px; height: 200px; } .red { color: red; background-color: yellow !important; } .blue { color: blue; } app.js var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); app.

阅读更多...

阿里云新用户优惠

九、UI-Grid Grid in a Modal 模态框中的表格

· 207 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：110 Grid in a Modal 在弹出的模态框中使用表格。 在某些情况下，特别是 bootstrap modal，可能会出现表格渲染宽度过小或显示不完全。会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期。可以通过调用handleWindowResize来纠正。动画渲染的时间不好确定，所以一般推荐使用$interval，在模态框打开后的5秒内每隔500ms循环调用。 从某种意义上说，这类似于自动调整大小的功能，但它只在模态框开启后的短时间内完成。 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"> <button id="showButton" class="btn btn-success" ng-click="showModal()">Show Modal</button> </div> </body> </html> main.css .grid { width: 300px; height: 250px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$rootScope', '$scope', '$http', 'modal', '$interval', function ($rootScope, $scope, $http, modal, $interval) { var myModal = new modal(); $scope.

阅读更多...

阿里云新用户优惠

八、UI-Grid Multiple Grids per Page 单页上的多个表格

· 97 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：109 Multiple Grids per Page 在单页上使用多个表格 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 class="row"> <div class="span4"> <div id="grid1" ui-grid="gridOptions1" class="grid"></div> </div> <div class="span4"> <div id="grid2" ui-grid="gridOptions2" class="grid"></div> </div> </div> </div> </body> </html> main.css .grid { width: 500px; height: 150px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.

阅读更多...

阿里云新用户优惠

七、UI-Grid Hidden Grids 隐藏的表格

· 119 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：108 Hidden Grids 当UI-Grid在页面加载的时候不是可见状态，比如在tabset页面中，或者是在可折叠的页面内。最终的结果往往是一个表格呈现出“错误”或者行列出现意想不到的宽度或高度。 让我们从这个场景开始：想象一下，在一个<div>内的表格，这个<div>没有宽度或高度。您提供的表格没有CSS类，所以它的高度和宽度CSS值设置为自动，这意味着浏览器将自动计算。 UI-Grid的出现是为了显示大量的数据更容易。它通过一个称为“虚拟化”的过程。这意味着，如果你有10000行 * 50列的数据，UI-Grid将只显示其所需的最小数量展现给用户，而不是渲染出500000个DOM元素来拖慢浏览器。对用户来说，看起来所有的数据都在屏幕上，事实上只有一小部分正在渲染。 这将成为我们在上面创建的场景中的一个问题，因为当我们告诉UI-Grid，我们有10000行和50列时，它知道我们实际上不想同时显示它们，所以它必须找出可见的空间，允许它“绘制”。这个空间被称为“窗口”，我们通过这个“窗口”来查看数据，这个窗口外都是空的内容，除了我们滚动时添加出现的行和列。 当你把UI-Grid放在没有指定高度的容器div中，网格没有CSS指定的高度时，它就不知道你希望它有多大。你想看5行吗？100？它不能告诉。目前这只是假设，在窗口中10行是一个很好的默认值。可以通过minRowsToShow 设置这个值。 如果你给UI-Grid的高度100%，但它的父容器div没有高度？然后它也不知道它应该有多大。100%什么？什么也没有？所以，它会调整大小以适应minRowsToShow所指定的行数。还可以通过给表格一个特定的高度来解决这个问题，或可变的高度并给父容器一个有效的高度或父容器内放置其他元素，比如有一个图像和表格在同一容器中，并且图像的高度是500px，表格的指定高度是：50%，那么表格的高度就是250px。 让我们看一下表格在隐藏的情况下，无论是在一个标签或折叠菜单或ng-show表达式。隐藏元素没有高度或宽度，因为他们未被渲染。如果设置一个元素的CSS属性为display: none，并注销其offsetWidth 属性，这个元素将为0。即使当它可见时的高度有1000px，当它隐藏后它没有高度。UI Grid也是像JQuery这样处理，创建一个“虚拟”克隆的元素，元素属性display: none改变为visibility: hidden（这意味着它是不可见的但仍占用空间），然后将这个克隆的元素附加到上，计算它的高度，最后删除它。是唯一安全的地方，因为当隐藏的元素占用空间时，它可以导致周围其他元素的移动，并出现“闪烁”的效果。 所以当你把表格放在一个没有渲染的地方，并且表格的CSS没有设置它有多大，当它创建这个克隆元素并测量它时，它的高度和宽度将为0。即使0px太小，UI-Grid也会尽力调整，所以它会调整到可用高度，但真的没有办法告诉它应该有多宽，所以列会是最小宽度（30px左右），窗口将会很小，看起来像UI-Grid渲染错误，而且窗口太小的表格单元本身会占用父容器的宽度。 为了解决这个问题，你必须给表格一些设置。这里有一些选项： 在下面的例子中给表格一个特定的高度和宽。 用 ng-if 来防止表格在元素（面板/折叠/等）被激活前渲染。 使用 autoResize 让表格重新绘制，这可能会导致页面闪烁，autoResize 的检测周期是250ms。 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"> <button type="button" class="btn btn-success" ng-click="hideGrid = !hideGrid"> {{ hideGrid && 'Show' || 'Hide' }} Grid </button> <div class="well" ng-hide="hideGrid"> <div ui-grid="gridOptions" class="grid"></div> </div> </div> </body> </html> main.

阅读更多...

阿里云新用户优惠

六、UI-Grid Binding examples 结合实例

· 119 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：106 Binding examples UI-Grid支持在colDef.field的复杂对象绑定。 本教程显示了具有特殊字符、数组元素、嵌套属性和函数的属性的双向绑定。 注意函数不能编辑。 在自定义cellTemplates中可以使用： COL_FIELD 将取代表格中单元格的值。cellTemplates可以使用在所有允许MODEL_COL_FIELD 取代表格中单元格的值的地方。使用MODEL_COL_FIELD 需要 ng-model=’field’。 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-edit class="grid"></div> </div> </body> </html> main.css .grid { width: 500px; height: 250px; } app.js var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']); app.controller('MainCtrl', ['$scope', function ($scope) { $scope.gridOptions = { enableSorting: true, columnDefs: [ { name:'firstName', field: 'first-name' }, { name:'1stFriend', field: 'friends[0]' }, { name:'city', field: 'address.

阅读更多...

阿里云新用户优惠

五、UI-Grid Footer 页脚

· 228 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：105 Footer 表格页脚 UI-Grid 支持页脚，可以设置showGridFooter 选项设置为true（默认为false）显示。页脚显示网格中的总行数和已筛选行数。如果开启了 ui-grid-selection 功能，将显示选定行。 列脚注 UI-Grid 也支持列脚注，您可以为每个列设置聚合函数或使用自定义页脚模板显示您希望聚合的内容。支持的聚合函数是：和，平均数，行数，最小，最大。使用aggregationTypes需要在控制器中注入uiGridConstants 。也可以传递函数来创建自己的聚合逻辑。如果在columnDef中设置aggregationHideLabel: true，可以取消列脚注的标签。可以参照下面例子中的第三列。 注意，聚合只是统计可见行，它会显示可见年龄的总和。出于这个原因，它不能很好地结合其他功能来改变可见行，特别是在分页、分组中。在分页的情况下，你会发现它只显示了当前页面的总数。分组统计当前的数据总数，可能不如预期的直观。 在分组的情况下，解决方案是使用 aggregation 提供的分组。 可以通过gridOptions.footerTemplate自定义页脚模板样式。 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"> <button id="footerButton" class="btn btn-success" ng-click="toggleFooter()">Toggle Grid Footer</button> <button class="btn btn-success" ng-click="toggleColumnFooter()">Toggle Column Footer</button> <div id="grid1" ui-grid="gridOptions" class="grid"></div> </div> </body> </html> main.css .grid { width: 100%; height: 250px; } app.

阅读更多...

阿里云新用户优惠

四、UI-Grid i18n 国际化

· 145 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：104 i18n UI-Grid可以使用 i18nService更改默认语言、添加翻译或更改现有的翻译。 设置语言的最简单的方法是将 表格放在 ui-i18n指令的div内。 <div ui-i18n="{{lang}}"> 页面内只能运行一个ui-i18n指令。当前的语言设置存储在 i18n service（Singleton）中，所以目前还没有办法在单个APP上应用一种以上的语言。 i18nService.setCurrentLang('fr'); 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="/release/ui-grid.js"></script> <script src="/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <select ng-model="lang" ng-options="l for l in langs"></select><br> <div ui-i18n="{{lang}}"> <p>Using attribute:</p> <p ui-t="groupPanel.description"></p> <br/> <p>Using Filter:</p> <p>{{"groupPanel.description" | t}}</p> <p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered.

阅读更多...

阿里云新用户优惠

三、UI-Grid Filtering 筛选

· 575 words · 3 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：103 Filtering UI-Grid支持数据行筛选。可以在 gridOptions 中设置enableFiltering: true | false（默认是关闭状态）。 也可以在 columnDefs 中针对 单个列 设置 enableFiltering ：false 禁用该列的筛选功能。参看下面例子中的 “company” 列。 在 columnDefs 中可以通过filter: { term: ‘xxx’ } 设置筛选选项。可以参看下面例子中的 “gender” 列。 如果 columnDefs 的filter没有设置筛选选项，那么用户可以通过输入来筛选。可以直接使用grid.column[i].filters[0] 来覆盖修改初始设置。 以上的筛选对象还可以指定条件，该条件将定义如何将行与筛选项匹配的条件。UI-Grid的几个条件由uiGridConstants.filter.*组成。可以参照下面例子中的“email”列。 如果没有设置条件，UI-Gird会根据过滤器字段的内容进行最佳猜测。可以支持通配符（*）！ 如果您想创建自己的筛选逻辑，筛选器对象的条件字段也可以是一个可以在每行运行的function方法。代码如下： function myCustomSorter(searchTerm, cellValue, row, column) { // Custom logic that returns true if `row` // passes the filter and false if it should // be filtered out return booleanResult; } 可以参考下面例子中的“phone”列；自定义筛选条件将确保除数字以外的所有电话号码都与搜索项进行比较。 您还可以选择创建自定义筛选器条件，该条件不需要用户提供筛选条件-例如，可以在代码里面设置匹配的变量。可以通过在filter中设置 noTerm: true，即使没有筛选条件，过滤条件也会执行。 Placeholder 可以通过设置placeholder 属性，在filter的输入框中增加属性 placeholder=""。可以参考下面例子中”email” 、”age”列。

阅读更多...

阿里云新用户优惠

二、UI-Grid Sorting 排序

· 403 words · 2 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：102Sorting UI-Grid 默认开启排序。可以在gridOptions中通过 enableSorting: true | false 来 启用和关闭此功能。 注意：可以通过点击列菜单来选择排序方式（正序和倒序）。如果希望菜单有下拉的效果必须引入ngAnimate，但在项目中不是必须引入的。 也可以在columnDefs的单个列中可以通过设置 enableSorting: false 来单独禁用某个列的排序功能。可以看下面例子中的最后一列。 可以通过shift+click同时选中2列排序。 在使用列菜单进行排序时，排序效果是叠加的。例如，有一列排序，然后又选择另一列排序，它将是2列都添加到现有的排序上，而不是取代它。如果您不想对列进行排序，可以在现有列上使用“remove sort”选项。 当使用表头排序时，单击表头会移除所有其他类型，除非shift+click。 如果修改数据后想重新计算，可以通过 gridApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT )通知表格数据已经被修改。 如果设置了默认排序，则可以通过设置suppressRemoveSort: true防止用户移除该排序。用户可以改变排序的方向，但是没有“remove sort”选项。 当单击列标题，排序方向会循环着上升，下降，然后重新排序。你可以通过在columnDef option中设置sortDirectionCycle 选择跳过这部分或者重新安排。 根据列类型选择排序算法。ui-grid将根据数据猜测类型，如果在列之后异步加载的数据，通常会默认所有的列都是字符串。可以在列定义中显式地设置列类型 type=’number’。columnDef可以使用的类型包括字符串、数字、日期和numberstr。如果使用日期，则需要一个JavaScript日期对象。 可以通过columnDef option中设置sortingAlgorithm来自定义排序算法。排序算法接受带参的function()方法，像“a”，“b”，“rowA”，“rowB’，和’direction’，来分别对行和当前的方向进行排序。 默认的排序算法也会应用在列筛选上。columnDef option的sortCellFiltered 可以设置排序后的列筛选。例子可以参照AllFeatures 教程的“Month Joined”列。 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"> Click on a column header to sort by that column.

阅读更多...

阿里云新用户优惠

一、UI-Grid intro 简介

· 162 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：101 intro to UI-Grid UI-Grid 3.0 (原 ng-grid)是一个不依赖于其他AngularJS，完全独立的 angular 表格系统。它围绕表格的核心设计模块和功能，功能的分层就像是angular的模型和指令。这些让它的核心代码小而精，并且能让你使用它来实现复杂的功能。 在核心模块中，可以获得： 虚拟的行和列，视图中可见的行和列才会显示 绑定单元格一系列属性和方法 列的排序有三种状态：Asc, Desc, None 列的过滤 使用自定义模板更改页眉和单元格内容 i18nService 允许标记翻译 在这个例子中，我们创建了最基本的表格。 方法如下： 引入uiGrid的js和css <link rel="styleSheet" href="http://ui-grid.inforelease/ui-grid.min.css"/> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script src="http://ui-grid.info/release/ui-grid.min.js"></script> 依赖注入 var app = angular.module('app', ['ui.grid']); 或者使用 var app = angular.module('app', [require('angular-ui-grid')]); 添加css样式 .myGrid { width: 500px; height: 250px; } $scope中添加数组对象 $scope.myData = [ { "firstName": "Cox", "lastName": "Carney"... 使用ui-grid指令并指定json数据到引用的data属性上 <div ng-controller="MainCtrl"> <div ui-grid="{ data: myData }" class="myGrid"></div> </div> index.html <!

阅读更多...