📌  相关文章
📜  serenity-is 隐藏列 - TypeScript (1)

📅  最后修改于: 2023-12-03 15:20:06.219000             🧑  作者: Mango

Serenity-is 隐藏列 - TypeScript

简介

Serenity-is 是一个面向业务应用程序开发的 TypeScript 框架，旨在为前端程序员提供熟悉且易用的开发体验。其中一个重要的功能是隐藏列。

隐藏列是展示数据时非常有用的功能，特别是当数据集包含较多列时。隐藏列可以帮助用户集中关注需要关注的列，同时可以提高 UI 的整体性能。

如何使用 Serenity-is 隐藏列

在 Serenity-is 中，隐藏列可以通过两种方式实现：

  1. 使用内置的 ColumnHiddenDecorator 装饰器。
  2. 使用 ColumnStateHandler 高阶函数。
使用内置的 ColumnHiddenDecorator 装饰器

Serenity-is 提供了内置的 ColumnHiddenDecorator 装饰器，可以用于隐藏指定的列。要使用此装饰器，请按照以下步骤进行操作：

  1. 在您的表格组件中声明您需要隐藏的列。
import { EntityGrid } from "@serenity-is/core";
import { ReturnType } from "../entities/ReturnType";
import { Column, ColumnHiddenDecorator } from "@serenity-is/bootstrap";

@EntityGrid({
    entity: ReturnType,
    allowCreate: false,
    allowEdit: false
})
export class ReturnTypeGrid {
    @Column({title: "ID", width: 50})
    id: number;

    @Column({title: "名称", width: 150})
    name: string;

    @Column({
        title: "描述",
        width: "{{dialogWidth / 2}}px",
        serverOnly: true
    })
    @ColumnHiddenDecorator()
    description: string;
}
  1. 在表格组件类中引入 ColumnHiddenDecorator 装饰器，并将其作为要隐藏列的上方声明。
import { EntityGrid } from "@serenity-is/core";
import { ReturnType } from "../entities/ReturnType";
import { Column, ColumnHiddenDecorator } from "@serenity-is/bootstrap";

@EntityGrid({
    entity: ReturnType,
    allowCreate: false,
    allowEdit: false
})
export class ReturnTypeGrid {
    @Column({title: "ID", width: 50})
    id: number;

    @Column({
        title: "名称",
        width: 150,
        serverOnly: true
    })
    @ColumnHiddenDecorator()
    name: string;

    @Column({
        title: "描述",
        width: "{{dialogWidth / 2}}px",
        serverOnly: true
    })
    description: string;
}
  1. 编译和运行您的应用程序。
使用 ColumnStateHandler 高阶函数

如果需要通过用户交互来控制隐藏列，可以使用 ColumnStateHandler 高阶函数。此函数允许您将隐藏列的状态存储在组件的状态中并根据需要进行更改。

要使用此高阶函数，请按照以下步骤进行操作：

  1. 在您的表格组件中声明您需要隐藏的列。
import { EntityGrid } from "@serenity-is/core";
import { ReturnType } from "../entities/ReturnType";
import { Column } from "@serenity-is/bootstrap";

@EntityGrid({
    entity: ReturnType,
    allowCreate: false,
    allowEdit: false
})
export class ReturnTypeGrid {
    @Column({title: "ID", width: 50})
    id: number;

    @Column({
        title: "名称",
        width: 150,
        serverOnly: true
    })
    name: string;

    @Column({
        title: "描述",
        width: "{{dialogWidth / 2}}px",
        serverOnly: true
    })
    description: string;
}
  1. 在表格组件类中，使用 ColumnStateHandler 高阶函数包装组件并呈现包装器。
import { EntityGrid } from "@serenity-is/core";
import { ReturnType } from "../entities/ReturnType";
import { Column } from "@serenity-is/bootstrap";
import { ColumnStateHandler } from "@serenity-is/bootstrap";

@EntityGrid({
    entity: ReturnType,
    allowCreate: false,
    allowEdit: false
})
class ReturnTypeGrid {
    @Column({title: "ID", width: 50})
    id: number;

    @Column({
        title: "名称",
        width: 150,
        serverOnly: true
    })
    name: string;

    @Column({
        title: "描述",
        width: "{{dialogWidth / 2}}px",
        serverOnly: true
    })
    description: string;
}

export default ColumnStateHandler(
    ReturnTypeGrid,
    ["className", "customFilters", "columns"],
    "return_type_grid_column_state"
);
  1. 编译和运行您的应用程序。
总结

Serenity-is 提供了两种方法来实现隐藏列功能，在开发过程中可以根据不同的要求和设置选择不同的方法。通过隐藏列，可以使 UI 更加简洁、清晰，使得数据展示更加有序、高效。

参考