桌面端的PropertyGrid

PropertyGrid 是一种用户界面控件，主要用于显示和编辑对象的属性。

它在开发工具和应用程序中很常见，特别是在需要对对象进行详细配置的场景。

在 .NET 框架中，System.Windows.Forms.PropertyGrid 是常用的实现。

它和 JSON 数据结合，能够快速搭建参数化配置页面。

举例：

步骤 1：准备数据模型

public class Settings
{
    public string Name { get; set; }
    public int Age { get; set; }
    public bool IsActive { get; set; }
}

string jsonString = "{ \"Name\": \"John\", \"Age\": 30, \"IsActive\": true }";
Settings settings = JsonConvert.DeserializeObject<Settings>(jsonString);

步骤 2、将数据模型对象绑定到 PropertyGrid

PropertyGrid propertyGrid = new PropertyGrid();
propertyGrid.SelectedObject = settings;

那在网页上如何实现这个效果？

网页上的PropertyGrid

ngx-property-grid 是一个基于 Angular 的组件库，用于在 Angular 应用中实现类似 PropertyGrid 的功能。

它可以方便地显示和编辑对象的属性，支持多种数据类型的编辑器。

项目地址：https://github.com/fgilde/ngx-property-grid

特点

1、简单易用：提供了简单易用的 API，可以快速集成到 Angular 应用中。

2、多种编辑器：支持文本框、下拉列表、复选框、颜色选择器等多种编辑器类型。

3、自定义编辑器：允许开发者自定义属性的编辑器，满足特殊需求。

4、分组和分类：可以将属性按类别进行分组，便于管理和查找。

5、双向绑定：支持双向数据绑定，实时反映属性的变化。

使用方法

以下是一个简单的使用示例，展示了如何在 Angular 应用中集成和使用 ngx-property-grid：

1. 模块导入

import {PropertyGridModule} from 'ngx-property-grid';
import {NgxTemplateModule} from 'ngx-template';

2、定义Html页面

使用 ngx-property-grid 组件，并通过两个属性 [width] 和 [options] 来配置它：

1. <ngx-property-grid>：这是 ngx-property-grid 组件的标签，表示在模板中使用该组件。
2. [width]="'300px'"：这是一个属性绑定，设置组件的宽度为 300 像素。
3. [options]="editor"：这是另一个属性绑定，传递一个名为 editor 的对象作为组件的配置选项。

<ngx-property-grid [width]="'300px'" [options]="editor"></ngx-property-grid>

3、自定义编辑器模板

<ngx-property-grid [width]="'300px'" [options]="editor">
    <ng-template ngxTemplate="text" let-p>
        <input type="text" [value]="p.value" (change)="p.value = $event.target.value">
    </ng-template>
    <ng-template ngxTemplate="color" let-p>
        <input type="color" [value]="p.value" (change)="p.value = $event.target.value">
    </ng-template>
</ngx-property-grid>

4、定义Json数据对象

通过装饰器 @meta 为每个属性添加了元数据，这些元数据描述了属性的名称、描述、类型、分组等信息。

export class ExampleEditorOptions {
    @meta({name: 'Font', description: 'The font editor to use', type: SimpleTextEditorComponent, group: 'Editor', hidden: false})
    font = 'Source Code Pro';

    @meta({name: 'Font size', group: 'Editor', type: 'number', valueConvert: parseInt})
    fontSize = 14;

    @meta({name: 'Font color', group: 'Editor', type: 'color'})
    fontColor = '#51f41c';

    @meta({name: 'jQuery', group: 'Plugins', type: 'checkbox'})
    jQuery = true;

    @meta({name: 'modernizr', description: 'Whether or not to include modernizr on the page', group: 'Plugins', type: 'checkbox'})
    modernizr = false;

    @meta({
        name: 'Framework',
        description: 'Whether to include any additional framework',
        type: 'options',
        options: ['None', {text: 'AngularJS', value: 'angular'}, {text: 'Backbone.js', value: 'backbone'}]
    })
    framework = 'None';
}

5、定义属性在ngx-property-grid的元数据

这些元数据描述了属性在网格中的显示方式、编辑方式以及其他相关的配置选项

export interface PropertyItemMeta {
    name: string; // 属性在网格中的显示名称
    description?: string; // 属性的描述，将作为提示信息显示在一个带有文本 "[?]" 的 span 元素上
    order?: number; // 显示顺序
    group?: string; // 属性所属的分组
    hidden?: boolean | ((obj: unknown) => boolean); // 属性是否在网格中隐藏，默认是 false，可以省略
    collapse?: boolean; // 子项是否应折叠，默认是 true
    type?: 'color' | 'date' | 'checkbox' | 'text' | 'options' | string | Type<ControlValueAccessor | ICustomDynamicComponent<any>>;
    // 类型选项：颜色、日期、复选框、文本、选项、自定义组件（应实现 ControlValueAccessor 或 ICustomDynamicComponent<any>）
    options?: any; // 针对类型的选项
    colSpan2?: boolean; // true/false。如果为 true，则属性输入将跨两列，并且没有名称/标签（适用于 textarea 自定义类型）
    valueConvert?: (value: any) => any; // 转换值的函数，例如 parseInt
    valueChanged?: (newValue: any, oldValue: any) => void; // 当值改变时触发的函数
}

6、最后效果

总结

ngx-property-grid 是一个功能强大的 Angular 组件库，能够帮助开发者快速创建属性编辑界面。

一个小而简单的属性网格，用于查看/编辑 POJO，如果您想给用户编辑一个“设置”对象，那么它非常适合的。