Angular2 ng2-smart-table

入门

安装

你要做的就是运行以下命令：

npm install --save ng2-smart-table

此命令将创建在你的`package.json`文件和安装包到 npm_modules 文件夹.

实例

最小安装程序的例子

你首先需要做的就是导入ng2-smart-table directives到你的组件。

import { Ng2SmartTableModule } from 'ng2-smart-table';

然后通过添加模块的指令列表来注册它：

 

    
// ...

@NgModule({
  imports: [
    // ...
    
    Ng2SmartTableModule,
    
    // ...
  ],
  declarations: [ ... ]
})
// ...

 

 现在，我们需要配置表并将其添加到模板中。组件开始工作时唯一需要的设置是列配置。让我们注册组件的内部设置属性，在其中我们希望拥有表并配置一些列（设置文档）：

 

settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  }
};

 

 最后，让我们把ng2-smart-table component inside模板：

    
// ...

@Component({
  template: `
    <ng2-smart-table [settings]="settings"></ng2-smart-table>
  `
})
// ...

 

在这一步你将有一个最小配置的表应该看起来像这样：

Angular2 ng2-smart-table

默认情况下，所有函数都可用，并且不需要以某种方式配置它们，所以您已经能够添加/编辑/删除行，排序或筛选表等。但感觉好像缺少了什么…对，默认情况下表中没有数据。要添加一些，让我们用组件中的对象列表创建数组属性。请注意，对象键与列配置相同。

 

data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz"
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "Shanna@melissa.tv"
  },
  
  // ... list of items
  
  {
    id: 11,
    name: "Nicholas DuBuque",
    username: "Nicholas.Stanton",
    email: "Rey.Padberg@rosamond.biz"
  }
];

 

 并将数据传递到表格：

    
// ...

@Component({
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `
})
// ...

 

现在你有一些数据在表中：

Angular2 ng2-smart-table

这是一个最小的设置，我们的最终组件应该是这样的，很简单，嗯？

import { Component } from '@angular/core';

@Component({
  selector: 'basic-example-data',
  styles: [],
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `
})
export class BasicExampleDataComponent {

  settings = {
    columns: {
      id: {
        title: 'ID'
      },
      name: {
        title: 'Full Name'
      },
      username: {
        title: 'User Name'
      },
      email: {
        title: 'Email'
      }
    }
  };
  
  data = [
    {
      id: 1,
      name: "Leanne Graham",
      username: "Bret",
      email: "Sincere@april.biz"
    },
    // ... other rows here
    {
      id: 11,
      name: "Nicholas DuBuque",
      username: "Nicholas.Stanton",
      email: "Rey.Padberg@rosamond.biz"
    }
  ];
}

 

 

定制的过滤器的例子

独立的filter的例子

假设你不需要在每个表列中有一个筛选字段，或者要求说搜索字段应该放在表的外面？幸运的是，这是超级容易实现，要做到这一点，我们需要稍微修改我们的基本组件的例子

Data Source

首先你需要知道的是，所有的数据操作和表必须使用数据源表属性。数据源是在你的数据，可以让你轻松地修改表数据或订阅事件修改表行为的抽象。

访问数据源也可以从表或通过它而不是我们的数据阵列。让我们做第二个选择，因为它需要较少的代码和更说明。让我们通过修改import语句导入数据源类：

import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';

 

需要注意的是，import包含一个localdatasource类（这个词的地方在这里意味着数据处理在一个本地的浏览器，而不是在服务器端）。

然后我们创建一个DataSource实例，通过我们的数据阵列，把它视为一个参数的构造函数：

source: LocalDataSource; // add a property to the component

constructor() {
  this.source = new LocalDataSource(this.data); // create the source
}

 现在让我们将源传递给表而不是数据数组：

  
// ...

@Component({
  template: `
    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
  `
})
// ...

 

在这一点上，如果你看的结果，将没有任何区别相比，第一个例子。基本上，如果你通过数组表格组件首先要做的是把localdatasource对象数组作为我们在这里做的手工。

现在，我们基本上可以改变在数据源表中的数据以任何方式我们需要过滤，排序，分页的一些网页，创建/删除/修改的行。在我们的例子中，我们需要能够过滤表外的数据，首先让我们添加一个搜索提交到模板与监听器：

  
// ...

@Component({ 
  template: `
    <input #search class="search" type="text" placeholder="Search..." (keydown.enter)="onSearch(search.value)">
    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
  `
})
// ...

listener code要求数据源的数据过滤

onSearch(query: string = '') {
  this.source.setFilter([
    // fields we want to include in the search
    {
      field: 'id',
      search: query
    },
    {
      field: 'name',
      search: query
    },
    {
      field: 'username',
      search: query
    },
    {
      field: 'email',
      search: query
    }
  ], false); 
  // second parameter specifying whether to perform 'AND' or 'OR' search 
  // (meaning all columns should contain search query or at least one)
  // 'AND' by default, so changing to 'OR' by setting false here
}

 

 

最后一件事，让我们隐藏默认表过滤器，以不与我们的独立：

settings = {
  columns: {
    id: {
      title: 'ID',
      filter: false
    },
    name: {
      title: 'Full Name',
      filter: false
    },
    username: {
      title: 'User Name',
      filter: false
    },
    email: {
      title: 'Email',
      filter: false
    }
  }
};

 

 
现在表有一个独立的搜索字段：


Angular2 ng2-smart-table

同样的方式，您可以修改表的数据，例如通过从三分之一方窗体中添加行或侦听一些外部事件。这里是一个完整的组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'basic-example-source',
  styles: [],
  template: `
    <input #search class="search" type="text" placeholder="Search..." (keydown.enter)="onSearch(search.value)">
    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
  `
})
export class BasicExampleSourceComponent {

  settings = {
    columns: {
      id: {
        title: 'ID',
        filter: false
      },
      name: {
        title: 'Full Name',
        filter: false
      },
      username: {
        title: 'User Name',
        filter: false
      },
      email: {
        title: 'Email',
        filter: false
      }
    }
  };
  
  data = [
    // ... our data here
  ];
  
  source: LocalDataSource;
  
  constructor() {
    this.source = new LocalDataSource(this.data);
  }

  onSearch(query: string = '') {
    this.source.setFilter([
      // fields we want to include in the search
      {
        field: 'id',
        search: query
      },
      {
        field: 'name',
        search: query
      },
      {
        field: 'username',
        search: query
      },
      {
        field: 'email',
        search: query
      }
    ], false);
    // second parameter specifying whether to perform 'AND' or 'OR' search 
    // (meaning all columns should contain search query or at least one)
    // 'AND' by default, so changing to 'OR' by setting false here
  }
}

 

Checkbox, Select and Completer filter types

关于如何使用内置列筛选器类型的示例：

Angular2 ng2-smart-table

code

import { Component } from '@angular/core';

@Component({
  selector: 'advanced-example-filters',
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `,
})
export class AdvancedExampleFiltersComponent {

  data = [
    {
      id: 4,
      name: 'Patricia Lebsack',
      email: 'Julianne.OConner@kory.org',
      passed: 'Yes',
    },
    {
      id: 5,
      name: 'Chelsey Dietrich',
      email: 'Lucio_Hettinger@annie.ca',
      passed: 'No',
    },
    {
      id: 6,
      name: 'Mrs. Dennis Schulist',
      email: 'Karley_Dach@jasper.info',
      passed: 'Yes',
    },
    {
      id: 7,
      name: 'Kurtis Weissnat',
      email: 'Telly.Hoeger@billy.biz',
      passed: 'No',
    },
    {
      id: 8,
      name: 'Nicholas Runolfsdottir V',
      email: 'Sherwood@rosamond.me',
      passed: 'Yes',
    },
    {
      id: 9,
      name: 'Glenna Reichert',
      email: 'Chaim_McDermott@dana.io',
      passed: 'No',
    },
    {
      id: 10,
      name: 'Clementina DuBuque',
      email: 'Rey.Padberg@karina.biz',
      passed: 'No',
    },
    {
      id: 11,
      name: 'Nicholas DuBuque',
      email: 'Rey.Padberg@rosamond.biz',
      passed: 'Yes',
    },
  ];

  settings = {
    columns: {
      id: {
        title: 'ID',
      },
      name: {
        title: 'Full Name',
        filter: {
          type: 'list',
          config: {
            selectText: 'Select...',
            list: [
              { value: 'Glenna Reichert', title: 'Glenna Reichert' },
              { value: 'Kurtis Weissnat', title: 'Kurtis Weissnat' },
              { value: 'Chelsey Dietrich', title: 'Chelsey Dietrich' },
            ],
          },
        },
      },
      email: {
        title: 'Email',
        filter: {
          type: 'completer',
          config: {
            completer: {
              data: this.data,
              searchFields: 'email',
              titleField: 'email',
            },
          },
        },
      },
      passed: {
        title: 'Passed',
        filter: {
          type: 'checkbox',
          config: {
            true: 'Yes',
            false: 'No',
            resetText: 'clear',
          },
        },
      },
    },
  };
}
View Code

相关文章：

  • 2022-02-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-24
  • 2022-12-23
  • 2022-01-07
  • 2022-12-23
猜你喜欢
  • 2018-05-30
  • 2022-01-30
  • 2022-12-23
  • 2022-12-23
  • 2021-07-26
  • 2021-07-18
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode