帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Paging  angular    Angular2  ext  tab  sort  
Simple table extension with sorting, filtering, paging... for Angular2 apps

  • 源代码名称:ng2-table
  • 源代码网址:http://www.github.com/valor-software/ng2-table
  • ng2-table源代码文档
  • ng2-table源代码下载
  • Git URL:
    git://www.github.com/valor-software/ng2-table.git
  • Git Clone代码到本地:
    git clone http://www.github.com/valor-software/ng2-table
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/valor-software/ng2-table
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • ng2-table npm version

    带有排序,筛选,分页的简单 table 扩展。 用于Angular2应用程序

    跟随我 twitter 通知有关新版本的通知。

    Angular 2 Style GuideBuild StatusCode ClimateJoin the chat at https://gitter.im/valor-software/ng2-bootstrapDependency StatusdevDependency StatusThroughput Graph

    使用&演示

    http://valor-software.github.io/ng2-table/

    安装

    npm i ng2-table --save

    或者,你也可以在一个ZIP文件下载它。

    文档

    输入( 属性)

    • page ( number ) - table 组件加载后的默认页面

    • itemsPerPage ( number ) - 页面上显示项目( 行)的数目

    • maxSize ( number ) - ... 前显示页面的数目

    • numPages ( number ) - 页面总数

    • length ( number ) - 筛选后的项总数( 选中它)

    • config ( ?any ) - 配置所有插件( 过滤,排序,分页)的配置:

      • paging ( ?boolean ) - 页面插件上的switch
      • sorting ( ?any ) - 排序插件上的switch
        • columns ( Array<any> ) - 只列出排序列的列表
      • filtering ( ?any ) - 过滤插件上的switch
        • filterString ( string ) - 过滤器的默认值
        • columnName ( string ) - 原始数据中的属性名称
      • className ( string|Array<string> ) - 附加的CSS类应该添加到
      • rows ( ?Array<any> ) - 只显示应该显示的行的列表

      • columns ( ?Array<any> ) - 配置列的配置( 如果需要,可以对它的进行排序设置)

        • title ( string ) - 列标题的标题
        • name ( string ) - 数据中的属性名
        • sort ( ?string|boolean ) - 列( + 排序设置如果需要则进行排序)的配置,对每个列默认启用排序
        • className ( string|Array<string> ) - 应添加到列标题中的其他CSS类
        • filtering ( ?any ) - 过滤插件上的switch
          • filterString ( string ) - 过滤器的默认值
          • columnName ( string ) - 原始数据中的属性名称
      • 输出( 事件)

        • tableChanged: 数据更改事件处理程序
        • cellClicked: onclick 事件处理程序

        滤波器

        过滤问题的责任落在用户上。 应选择筛选器将应用的列。 你可以添加任意数量的不同过滤器。 筛选器字符串- 它是一个字符串,用于匹配原始数据中的值。 列名指原始数据中的属性名。 你可以自己组织的rest逻辑( 过滤器的顺序。数据格式等)。 甚至可以对数据列列表使用筛选器。

        在本例中,还可以为列设置 filtering 参数,在本例中,筛选框将出现在表的第一行。

        排序

        数据排序可以是 3种模式: asc,desc和不带排序数据( 因为它来自后台或者其他地方)。 如果要取消对某些列的排序,则应在列配置中强制设置( 将属性排序为所需的每一列的值)

        分页

        可以从 ng2-bootstrap分页组件中使用分页。 更改页后,分页组件将发出带有对象 {page, itemsPerPage}的事件 change-table。 然后你可以轻松地订阅它并请求相应的原始数据。

        故障排除

        在报告 Bug 和功能请求时,请遵循以下准则:

      • 使用 GitHub发布报告 Bug 和功能请求( 而不是我们的电子邮件地址)
      • 请始终按写步骤来重现错误。 这样我们可以重点在修复 Bug,而不是重复我们的头脑尝试复制它。
      • 感谢你的理解 !

        许可证

        MIT许可证( 请参阅许可文件以获得全文)



    文章标签:ext  angular  tab    sort  Paging  Angular2  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语