@adler-it/webstack-datagrid 中文文档教程

Question

Classes

SortConfig

Construtor

(id: 字符串)

FilterConfig

Construtor

(id: 字符串)

Method

| 名称 | 参数 | 返回类型 | 描述 |-|-|-|-| | 编号 || 过滤器配置 | 使其成为数字过滤器。 | 日期 || 过滤器配置 | 使其成为日期过滤器。 | 字符串 || 过滤器配置 | 使其成为字符串过滤器。 | 选择 | (options: T[], value: (option: T) => string | number, label: (option: T) => string | number, multi: boolean) | 过滤器配置 | 让它选择过滤器。 | 自动完成 | （选项：T[]，pathToValue：字符串，pathToText：字符串）| 过滤器配置 | 使其自动完成过滤器。 | 自动完成简单 | （选项：字符串[]） | 过滤器配置 | 使其自动完成过滤器。

DataGridConfig

Constructor

（可选：boolean = false，multiSelectable：boolean = false，条纹：boolean = false，悬停：boolean = false）

Method

| 名称 | 参数 | 返回类型 | 描述 |-|-|-|-| | 添加列 | (label: string, style: object, value: (row: object) => string, sortConfig: SortConfig = false, filterConfig: FilterConfig = false) | 数据网格配置 | 将列添加到 dataGridConfig。 | 添加空间 | （宽度：字符串）| 数据网格配置 | 添加给定宽度的空白列。 | 添加按钮操作 | (onClick: (index: number, row: T) => void, element: JSX) | 数据网格配置 | 将 ActionButton 添加到行。 | 添加翻译 | (filter: string, sort: string, operation: string, value: string, values: string, ok: string, clear: string, close: string) | 数据网格配置 | 添加翻译。

Components

DataGrid

Properties

| 名称 | 类型 | 默认 | 说明 | |-|-|-|-| | 行* | T[] || 要显示的数据。 | 配置* | 数据网格配置|| 数据网格配置。 | 动作放置 | 字符串 | “左” | 在行中放置操作按钮。 | 分页 | { page: number, pageSize: number, count: number} || 要显示的分页。 | 更新* | （分页，排序，过滤）=> 无效 || 更新回调。 | 获取 | 布尔 | 假 | 加载指示。 | 页面大小 | 数字[] | [15,30,50,100] | PageSize 用于分页。

Usage

import DataGrid, { DataGridConfig, FilterConfig, SortConfig } from '@adler-it/webstack-datagrid';
import { IconButton } from 'material-ui';
import Remove from 'material-ui/svg-icons/action/highlight-off';
import moment from 'moment';

const genders = [
    {
        id: 1,
        name: "female"
    },
    {
        id: 2,
        name: "male"
    }
]

const data = [
    {
        _id: "7"
        firstName: "John",
        lastName: "Doe",
        birthday: "1993-06-16T00:00:00.000Z",
        gender: 1,
        mother: 5,
    },
    {
        _id: "5"
        firstName: "Jane",
        lastName: "Doe",
        birthday: "1970-06-16T00:00:00.000Z",
        gender: 2,
        mother: null,
    },...
]

const lastNames = data.map(person => person.lastName);
const config = new DataGridConfig(false, false, true, true)
    .addTranslation('Filter', 'Sort', 'Operation', 'Value', 'Values', 'OK', 'Clear', 'Close')
    .addColumn('ID', { width: '0px' }, row => row.id, new SortConfig('_id'), new FilterConfig('_id').number())
    .addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').string())
    .addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').autoCompleteSimple(lastNames))
    .addColumn('Birthday', { width: '50px' }, row => moment(row.birthday).format('DD.MM.YYYY'), false, new FilterConfig('birthday').date())
    .addColumn('Gender', {width: '0px'}, row => genders.find(item => item.id === row.gender), false, new FilterConfig('gender').select(genders, item => item.id, item => item.name, false))
    .addColumn('Mother', {width: '150px'}, row => data.find(item => item._id === row.mother), false, new FilterConfig('mother').autoComplete(data, item => item._id, item => `${item.firstName} ${item.lastName}`))
    .addButtonAction((index, item) => console.log('You clicked on row number ${index}, item with id ${item._id}', <IconButton><Remove /></IconButton>))
...
render() {
    return (
        <div>
            <DataGrid
                rows={data}
                config={config}
                onUpdate={(newState) => console.log(newState)}
            >
        </div>
    )
}