基于FineUI的PropertyGrid - FineUI 官方论坛

属性网格对于从事WinForm开发的程序员来说应该是相当熟悉的了，但在Web开发中几乎看不到它的身影，这么方便的工具为什么在Web开发中很少用到呢，这背后的原因有很多，这里也不作讨论。平时我们并不能用到它，那我为什么还要做这一个组件呢，这与我正在开发的可视化设计器有关，它将用于设计器中的属性设置部分，这款设计器包含UI设计、EF实体设计、流程图设计，设计器的界面采用FineUI实现，关于设计器的详细信息以后会有介绍。

属性网格的数据包含两部分，一部分是类型定义，另一部分是对象数据

类型定义：采用的是JsonSchema，用它定义及约束类型，它的格式大概是这样的，由于完整的代码太多，这里只是部分

{
"definitions": {},
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "http://example.com/root.json",
"type": "object",
"title": "The Root Schema",
"required": ["SingleLine", "Integer", "Number", "Date", "Color"],
"properties": {
"SingleLine": {
"$id": "#/properties/SingleLine",
"type": "string",
"title": "输入单行文本",
"default": "单行文本",
"examples": ["单行文本"]
},
"Multiline": {
"$id": "#/properties/Multiline",
"type": "string",
"title": "输入多行文本",
"format": "multiline",
"default": "",
"examples": ["多行文本"]
},
"Description": {
"$id": "#/properties/Description",
"type": "string",
"title": "描述HTML格式，<a href='http://wwww.baidu.com'><b>单击</b>查看详情</a>",
"default": "描述",
"examples": ["描述"]
},
"DropdownList2": {
"$id": "#/properties/DropdownList2",
"type": "string",
"title": "多选下拉下列表且名称与值为不同的值",
"format": "dropdownlist",
"multiSelect": true,
"dropdownlist": [
["value1", "item1"],
["value2", "item2"],
["value3", "item3"],
["value4", "item4"],
["value5", "item5"]
],
"default": "value2,value3",
"examples": ["value1,value2"]
},
...
...
...
...
"DropdownList4": {
"$id": "#/properties/DropdownList4",
"type": "string",
"title": "下拉下列可编辑输入且强制选择",
"format": "dropdownlist",
"editable": true,
"dropdownlist": [
["value1", "item1"],
["value2", "item2"],
["value3", "item3"],
["value4", "item4"],
["value5", "item5"]
],
"default": "value3",
"examples": ["value1"]
},
"Number": {
"$id": "#/properties/Number",
"type": "number",
"title": "输入小数",
"minimum": -100,
"maximum": 100,
"default": 60.8,
"examples": [0.1]
},
"Size": {
"$id": "#/properties/Size",
"type": "object",
"title": "大小对象包含宽度与高度",
"required": ["Width", "Height"],
"text": ["{0},{1}", "Size-Width", "Size-Height"],
"default": "20,20",
"properties": {
"Width": {
"$id": "#/properties/Size/properties/Width",
"type": "integer",
"title": "Width",
"minimum": 0,
"maximum": 500,
"default": 20,
"examples": [200]
},
"Height": {
"$id": "#/properties/Size/properties/Height",
"type": "integer",
"title": "Height",
"minimum": 0,
"maximum": 500,
"default": 20,
"examples": [100]
}
}
},
"Array": {
"$id": "#/properties/Array",
"type": "array",
"title": "字符串数组类型",
"items": {
"$id": "#/properties/Array/items",
"type": "string",
"title": "字符串",
"default": "",
"examples": ["string1", "string2", "string3", "string4", "string5"]
}
}
...
...
...
}
}

复制代码

这是Number类型的定义

"Number": {
"$id": "#/properties/Number",
"type": "number",
"title": "输入小数",
"minimum": -100,
"maximum": 100,
"default": 60.8,
"examples": [0.1]
}

复制代码

这是下拉列表类型的定义

"DropdownList4": {
"$id": "#/properties/DropdownList4",
"type": "string",
"title": "下拉下列可编辑输入且强制选择",
"format": "dropdownlist",
"editable": true,
"dropdownlist": [
["value1", "item1"],
["value2", "item2"],
["value3", "item3"],
["value4", "item4"],
["value5", "item5"]
],
"default": "value3",
"examples": ["value1"]
}

复制代码

这是Size对象的定义

"Size": {
"$id": "#/properties/Size",
"type": "object",
"title": "大小对象包含宽度与高度",
"required": ["Width", "Height"],
"text": ["{0},{1}", "Size-Width", "Size-Height"],
"converter": "(function(){if(data&&typeof data=='string'&&data.length>0) ...",
"default": "20,20",
"properties": {
"Width": {
"$id": "#/properties/Size/properties/Width",
"type": "integer",
"title": "Width",
"minimum": 0,
"maximum": 500,
"default": 20,
"examples": [200]
},
"Height": {
"$id": "#/properties/Size/properties/Height",
"type": "integer",
"title": "Height",
"minimum": 0,
"maximum": 500,
"default": 20,
"examples": [100]
}
}
}

复制代码

对象数据：采用的是Json，代码如下：