md-data-table, Angular 材料的材料设计数据表

分享于 

29分钟阅读

GitHub

  繁體 雙語
Material Design Data Table for Angular Material
  • 源代码名称:md-data-table
  • 源代码网址:http://www.github.com/daniel-nagy/md-data-table
  • md-data-table源代码文档
  • md-data-table源代码下载
  • Git URL:
    git://www.github.com/daniel-nagy/md-data-table.git
    Git Clone代码到本地:
    git clone http://www.github.com/daniel-nagy/md-data-table
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/daniel-nagy/md-data-table
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    基于的材料设计数据表

    这个 MODULE 是在 Angular 材质库中实现材料设计数据表的努力。 数据表用于呈现原始数据集,通常出现在桌面企业应用程序中。 数据表对于可视化和操作大型数据集特别有用。

    材料设计数据表的规范可以在这里找到:。

    许可证

    这个软件是免费的,没有限制,在 MIT许可证。

    演示

    一个实时的演示程序。

    fork 请用这个来重现你可能遇到的任何问题。

    安装

    使用 Bower

    这里软件包可以通过 Bower 软件包管理器进行安装。

    
    bower install angular-material-data-table --save
    
    
    
    

    index.html 文件中,包括数据 table MODULE 和样式表。

    <!-- style sheet --><linkhref="bower_components/angular-material-data-table/dist/md-data-table.min.css"rel="stylesheet"type="text/css"/><!-- module --><scripttype="text/javascript"src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>

    在应用程序中包含 md.data.table MODULE 作为依赖项。

    angular.module('myApp', ['ngMaterial', 'md.data.table']);
    使用npm和 Browserify ( 或者 JSPM )的

    另外,这个软件包可以使用npm安装。

    
    npm install angular-material-data-table --save
    
    
    
    

    你可以使用Browserify将这个 MODULE 插入到你的应用程序中。

    angular.module('myApp', [require('angular-material-data-table')]);

    用法

    示例控制器

    // Assume we have a $nutrition service that provides an API for communicating with the serverangular.module('demoApp').controller('sampleController', ['$nutrition', '$scope', function ($nutrition, $scope) {
     'use strict';
     $scope.selected= [];
     $scope.query= {
     order:'name',
     limit:5,
     page:1 };
     functionsuccess(desserts) {
     $scope.desserts= desserts;
     }
     $scope.getDesserts=function () {
     $scope.promise=$nutrition.desserts.get($scope.query, success).$promise;
     };
    }]);

    范例模板

    <md-toolbarclass="md-table-toolbar md-default">
     <divclass="md-toolbar-tools">
     <span>Nutrition</span>
     </div>
    </md-toolbar><!-- exact table from live demo --><md-table-container>
     <tablemd-tablemd-row-selectmultipleng-model="selected"md-progress="promise">
     <theadmd-headmd-order="query.order"md-on-reorder="getDesserts">
     <trmd-row>
     <thmd-columnmd-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
     <thmd-columnmd-numericmd-order-by="calories.value"><span>Calories</span></th>
     <thmd-columnmd-numeric>Fat (g)</th>
     <thmd-columnmd-numeric>Carbs (g)</th>
     <thmd-columnmd-numeric>Protein (g)</th>
     <thmd-columnmd-numeric>Sodium (mg)</th>
     <thmd-columnmd-numeric>Calcium (%)</th>
     <thmd-columnmd-numeric>Iron (%)</th>
     </tr>
     </thead>
     <tbodymd-body>
     <trmd-rowmd-select="dessert"md-select-id="name"md-auto-selectng-repeat="dessert in desserts.data">
     <tdmd-cell>{{dessert.name}}</td>
     <tdmd-cell>{{dessert.calories.value}}</td>
     <tdmd-cell>{{dessert.fat.value | number: 1}}</td>
     <tdmd-cell>{{dessert.carbs.value}}</td>
     <tdmd-cell>{{dessert.protein.value | number: 1}}</td>
     <tdmd-cell>{{dessert.sodium.value}}</td>
     <tdmd-cell>{{dessert.calcium.value}}{{dessert.calcium.unit}}</td>
     <tdmd-cell>{{dessert.iron.value}}{{dessert.iron.unit}}</td>
     </tr>
     </tbody>
     </table>
    </md-table-container>
    <md-table-paginationmd-limit="query.limit"md-limit-options="[5, 10, 15]"md-page="query.page"md-total="{{desserts.count}}"md-on-paginate="getDesserts"md-page-select></md-table-pagination>

    API文档

    v0.10

    以前的版本

    表按它的第一个列的字母顺序排序。 在表格中,我将为 camelCasing 属性 ,但不要忘了在你的模板中为 kebab-case。

    列排序

    属性元素类型描述
    mdDescmdColumn[expression]如果存在,列将按降序排序。 默认的方法是先对升序排序。
    mdOnReordermdHeadfunction当订单更改时的回调函数。 回调将接收新订单。
    mdOrdermdHeadstring将排序顺序绑定到的变量。
    mdOrderBymdColumnstring要绑定到排序顺序的值。

    单击 md-column 元素时,md-order-by 属性的值将绑定到提供给 md-head 元素的md-order 属性的变量。 如果该列已经按该值排序,则将在该值前面加上一个减号 -。 对于大多数查询语言,这是对降序排序的通用符号。

    变量可以用于向服务器发送查询,也可以用作 ng-repeat 表达式的orderBy 属性。

    使用 ngRepeat的示例

    <md-table-container>
     <tablemd-table>
     <theadmd-headmd-order="myOrder">
     <!-- when the user clicks this cell, the myOrder variable will get the value 'nameToLower' --> <thmd-columnmd-order-by="nameToLower">Dessert (100g serving)</th>
     <!-- the variable myOrder will not be changed when this cell is clicked --> <thmd-columnmd-numeric>Calories</th>
     </thead>
     <tbodymd-body>
     <!-- we can let ng-repeat sort the columns for us --> <trng-repeat="dessert in desserts | orderBy: myOrder"></tr>
     </tbody>
     </table>
    </md-table-container>

    编辑对话框

    表格可能需要基本文本编辑。 这个 MODULE 包含一个用于显示编辑对话框以修改文本或者任何其他内容的服务。 服务为用于操作文本的小型和大型编辑对话框提供预设。 它还有完全支持创建自定义对话框,这样你就可以像你想要的那样创造性了。

    Angular 材质对话框不同,预设方法将打开对话框。

    限制

    • 对话框将始终接收新的独立作用域。
    • 必须提供 targetEvent,并且事件目标必须是 table 单元格。

    示例

    $scope.editComment=function (event, dessert) {
     // if auto selection is enabled you will want to stop the event// from propagating and selecting the rowevent.stopPropagation();
     /* * messages is commented out because there is a bug currently * with ngRepeat and ngMessages were the messages are always * displayed even if the error property on the ngModelController * is not set, I've included it anyway so you get the idea*/var promise =$mdEditDialog.small({
     // messages: {// test: 'I don't like tests!'// }, modelValue:dessert.comment,
     placeholder:'Add a comment',
     save:function (input) {
     dessert.comment=input.$modelValue;
     },
     targetEvent:event,
     validators: {
     'md-maxlength':30 }
     });
     promise.then(function (ctrl) {
     var input =ctrl.getInput();
     input.$viewChangeListeners.push(function () {
     input.$setValidity('test', input.$modelValue!=='test');
     });
     });
    });
    小型编辑对话框
    $mdEditDialog.small(options);
    参数类型说明
    选项对象小型预置选项。
    属性类型默认说明
    clickOutsideToClosebooltrue用户可以通过单击页面上的任何其他位置来关闭对话框。
    disableScrollbooltrue打开对话框时阻止用户滚动。
    escToClosebooltrue用户可以通过单击esc键来关闭对话框。
    focusOnOpenbooltrue将在模板中搜索 md-autofocus 元素。
    messagesobjectnull显示与 ngModelController 上的错误对应的错误消息。
    modelValuestringnull输入元素的初始值。
    placeholderstringnull输入元素的占位符文本。
    savefunctionnull当用户单击保存按钮时的回调函数。 回调将接收到 ngModelController消息。 对话框将关闭,除非回调返回被拒绝的承诺。
    targetEventeventnull事件对象必须提供它,并且它必须来自 table 单元格。
    typestring"text"input 元素上的type 属性的值。
    validatorsobjectnull要放置在输入元素上的可选属性。

    small 方法将返回一个 promise,该将与控制器实例一起解析。 控制器有两种 public 方法,dismiss 将关闭对话框而不保存和 getInput,这将返回 ngModelController

    大型编辑对话框

    大型编辑对话框功能与小型编辑对话框功能相同,但有一些附加选项。

    $mdEditDialog.large(options);
    参数类型说明
    选项对象大预置选项。
    属性类型默认说明
    cancelstring"Cancel"关闭对话框而不保存对话框的文本。
    clickOutsideToClosebooltrue用户可以通过单击页面上的任何其他位置来关闭对话框。
    disableScrollbooltrue打开对话框时阻止用户滚动。
    escToClosebooltrue用户可以通过单击esc键来关闭对话框。
    focusOnOpenbooltrue将在模板中搜索 md-autofocus 元素。
    messagesobjectnull显示与 ngModelController 上的错误对应的错误消息。
    modelValuestringnull输入元素的初始值。
    okstring"Save"要提交和关闭对话框的文本。
    placeholderstringnull输入元素的占位符文本。
    savefunctionnull当用户单击保存按钮时的回调函数。 回调将接收到 ngModelController。 对话框将关闭,除非回调返回被拒绝的承诺。
    targetEventeventnull事件对象必须提供它,并且它必须来自 table 单元格。
    titlestring"Edit"对话框标题文本。
    typestring"text"input 元素上的type 属性的值。
    validatorsobjectnull要放置在输入元素上的可选属性。

    large 方法将返回一个 promise,该将与控制器实例一起解析。 控制器有两种 public 方法,dismiss 将关闭对话框而不保存和 getInput,这将返回 ngModelController

    你自己
    $mdEditDialog.show(options);
    参数类型说明
    选项对象对话框选项。
    属性类型默认说明
    bindToControllerboolfalse如果 true,则所提供范围对象上的属性将绑定到控制器
    clickOutsideToClosebooltrue用户可以通过单击页面上的任何其他位置来关闭对话框。
    controllerfunctionstringnull构造函数函数或者带有 $controller 服务的字符串 register。 控制器将自动注入 $scope$element。 如果要缩小代码范围,请记住注释控制器。
    controllerAsstringnull在作用域中发布控制器的别名。
    disableScrollbooltrue打开对话框时阻止用户滚动。
    escToClosebooltrue用户可以通过单击esc键来关闭对话框。
    focusOnOpenbooltrue将在模板中搜索 md-autofocus 元素。
    localsobjectnull要插入控制器的可选 dependancies。 没有必要注入注册服务,$injector 将为你提供。
    resolveobjectnull类似于局部变量但等待被解析的承诺。 一旦承诺解析,它们的返回值将被注入控制器,对话框将打开。
    scopeobjectnull绑定到新的独立范围的属性。
    targetEventeventnull事件对象必须提供它,并且它必须来自 table 单元格。
    templatestringnull对话框的模板。
    templateUrlstringnull从模板获取模板的URL。

    show 方法将返回一个 promise,该将与控制器实例一起解析。

    table 单元格有一个 md-placeholder CSS类,可以用于占位符文本。

    示例:打开编辑对话框的一个 table 单元

    <tdmd-cellng-click="editComment($event, dessert)"ng-class="{'md-placeholder':!dessert.comment}">
     {{dessert.comment || 'Add a comment'}}
    </td>

    inline-菜单

    表格单元格支持 inline 菜单。 若要使用 inline 菜单,请将 md-select 元素 inside 放置为 md-cell 元素。

    示例

    <tdmd-cell>
     <md-selectng-model="dessert.type"placeholder="Other">
     <md-optionng-value="type"ng-repeat="type in getTypes()">{{type}}</md-option>
     </md-select>
    </td>

    单击单元格中的任意位置将激活菜单。 此外,如果启用自动行选择,单击单元格时将不选择行。

    数字列

    数字列与 table 单元格的右对齐。

    属性元素类型描述
    mdNumericmdColumn[expression]如果表达式是 null 或者计算结果为 true,则该列中的所有单元格都将对齐

    你可以在单元格上使用数字筛选器set设置十进制精度。

    <!-- 2 decimal places --><tdmd-cell>{{dessert.protein.value | number: 2}}</td>

    如果使用 colspan,则可能需要手动更正单元格的对齐方式和 padding。 你可以使用自定义CSS类覆盖单元格的样式。

    分页

    属性类型说明
    mdBoundaryLinks[expression]显示首页和最后一页导航链接
    mdLabelobject更改分页标签( 查看详情)。
    mdLimitinteger行限制。
    mdLimitOptionsarray行限制选项( 查看详情)。
    mdOnPaginatefunction页或者限制更改时的回调函数。 页作为第一个参数传递,并且该限制作为第二个参数传递。
    mdPageinteger页码。页不是零索引。 指令假定第一页是一个。
    mdPageSelect[expression]显示页码的选择下拉列表
    mdTotalinteger项目总数。
    ngDisabled[expression]禁用分页元素。

    md-label 属性具有下列属性。

    属性类型默认值
    ofstring"""( 比如。x - y )
    页面string'页:''
    rowsPerPagestring'Rows行:''

    md-limit-options 属性支持具有属性 labelvalue的整数或者对象。 后者非常方便,当你希望使用语言来给定个别选项的时候,e.g.

    // the 'All' option will show all items in the collectionctrl.limitOptions= [5, 10, 15, {
     label:'All',
     value:function () {
     returncollection.length;
     }
    }];

    示例:更改分页标签

    <!-- how to change the pagination label --><md-table-paginationmd-label="{page: 'Página:', rowsPerPage: 'Filas por página:', of: 'de'}"></md-table-pagination><!-- or if the label is defined on the scope --><md-table-paginationmd-label="{{label}}"></md-table-pagination>

    我使用Google翻译,因这里如果翻译错误请修复它们并请求请求。

    示例:使用 ngRepeat的客户端分页

    <trmd-rowng-repeat="item in array | orderBy: myOrder | limitTo: myLimit: (myPage - 1) * myLimit"><!-- and your pagination element will look something like... --><md-table-paginationmd-limit="myLimit"md-page="myPage"md-total="{{array.length}}"></md-table-pagination>

    我的分页分工作? !

    • 确保将 md-pagemd-limitmd-total 传递给指令,并且它们是有限数字。
    • 页不是零索引。 指令将假定页从一个开始。 如果查询语言要求页为零索引,那么在进行查询之前只需减去一个。

    行选择

    属性元素类型描述
    mdAutoSelectmdRow[expression]通过单击行中任意位置来选择行。
    mdOnDeselectmdRowfunction取消选择项时的回调函数。 项将作为参数传递给回调。
    mdOnSelectmdRowfunction选择项时的回调函数。 项将作为参数传递给回调。
    mdRowSelectmdTable[expression]启用行选择。
    mdSelectmdRowany要选择的项。
    mdSelectIdmdRownumberstring所选项的唯一标识符。 标识符必须是项的属性。
    multiplemdTable[expression]允许多个选择。当启用主切换时,将在 table 标头的最后一行前面加上一个主切换。
    ngDisabledmdRowexpression有条件地禁用行选择。
    ngModelmdTablearray将选定项绑定到的变量。

    默认情况下,选定项将保持不变。 项之间的相等性使用 === 运算符确定。 如果项可能不严格相等,则必须为项提供唯一标识符。

    你可以手动添加或者删除模型中的项目,但请注意,选择和取消选择回调不会被触发。 在单选择模式下操作时,当用户选择其他项时不会触发取消选择回调。 但是,如果用户直接取消选择项目,它将是触发器。 在多选择模式下,主切换将触发选择并取消选择所有选中或者取消选择的项的回调。

    示例:实时演示中的行选择。

    <trmd-rowmd-select="dessert"md-select-id="name"md-auto-selectng-repeat="dessert in desserts.data">

    示例:清除分页视图中的选定项

    $scope.onPaginate=function () {
     $scope.selected= [];
    }

    table-进程

    属性目标类型说明
    mdProgressmdTablepromisepromise<Array>table 将显示加载指示符,直到所有承诺都被解析或者拒绝。

    当异步代码执行时,table MODULE 可以为你显示一个加载指示符。 它接受一个承诺或者一个承诺的array。 如果在之前的承诺被解析或者拒绝之前收到另一个承诺,它将被放置在一个队列中。

    因为我花了几乎一个小时的调试时间,我想我会与你分享。 我不确定为什么这是这样的,但是如果你把延迟对象放在这个作用域上,那么队列机制就不能正常工作。

    不能工作

    function () {
     $scope.deferred=$q.defer();
     //.. .$scope.deferred.resolve();
    }
    <tablemd-tablemd-progress="deferred.promise"></table>

    这将工作英镑。

    function () {
     var deferred =$q.defer();
     $scope.promise=deferred.promise;
     //.. .deferred.resolve();
    }
    <tablemd-tablemd-progress="promise"></table>

    另外,如果你正在处理直接返回承诺的东西,你不需要担心它。

    function () {
     $scope.promise=$timeout(function () {
     //.. . }, 2000);
    }

    table-工具栏

    表格可以嵌入在提供导航和数据操作工具的卡片上,顶部和底部。 你可以在 md-toolbar 元素上使用 md-table-toolbarmd-default 类进行纯白色工具栏。

    如果需要向 table 中的特定列显示信息 relative,可以使用 <md-foot> 元素。 例如,假设你有一个 calories.total 属性,它总结了热量的总数,并且希望直接在卡卡列下显示信息。

    <tfootmd-foot>
     <trmd-row>
     <tdmd-cell></td>
     <tdmd-cell><strong>Total: </strong>{{calories.total}}</td>
     <tdmd-cellcolspan="6"></td>
     </tr>
    </tfoot>

    注意卡路里是 table 中的第二列。 因此,我们需要用空单元格来偏移第一列。 如果需要偏移多个列,可以使用 <td colspan="${n}"></td> 其中,n 是要偏移的列数。

    如果使用 colspan,则可能需要手动更正文本对齐方式和单元格 padding。

    需要

    • node
    • grunt-cli

    这个库包含一个用于开发特性的演示应用程序。 当你进行更改时,应用程序将重新加载自身。

    更新

    我注意到营养应用对尝试本地运行应用程序的人们是一个不便的。 更新了演示应用程序,以消除对营养应用的依赖性。 这也是如何利用 ngRepeat 轻松实现客户端排序和分页的一个很好的例子。

    本地运行应用程序

    将这里存储库克隆到本地计算机。

    
    git clone https://github.com/daniel-nagy/md-data-table.git
    
    
    cd md-data-table
    
    
    
    

    为你正在处理的问题创建一个新分支。

    
    git checkout -b my-issue
    
    
    
    

    安装软件包相关性。

    
    npm install
    
    
    bower install
    
    
    
    

    运行应用程序并在浏览器中访问 127.0.0.1:8000

     
    grunt
    
    
    
     

    进行修改并更新生成。

     
    grunt build
    
    
    
     

    创建请求请求 !


    数据  angular  DES  MAT  设计    
    相关文章