基于FineUI的PropertyGrid

棕榈

基于FineUI的PropertyGrid

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

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

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

1. {
   
2.   "definitions": {},
   
3.   "$schema": "http://json-schema.org/draft-07/schema#",
   
4.   "$id": "http://example.com/root.json",
   
5.   "type": "object",
   
6.   "title": "The Root Schema",
   
7.   "required": ["SingleLine", "Integer", "Number", "Date", "Color"],
   
8.   "properties": {
   
9.     "SingleLine": {
   
10.       "$id": "#/properties/SingleLine",
    
11.       "type": "string",
    
12.       "title": "输入单行文本",
    
13.       "default": "单行文本",
    
14.       "examples": ["单行文本"]
    
15.     },
    
16.     "Multiline": {
    
17.       "$id": "#/properties/Multiline",
    
18.       "type": "string",
    
19.       "title": "输入多行文本",
    
20.       "format": "multiline",
    
21.       "default": "",
    
22.       "examples": ["多行文本"]
    
23.     },
    
24.     "Description": {
    
25.       "$id": "#/properties/Description",
    
26.       "type": "string",
    
27.       "title": "描述HTML格式，<a href='http://wwww.baidu.com'><b>单击</b>查看详情</a>",
    
28.       "default": "描述",
    
29.       "examples": ["描述"]
    
30.     },
    
31.     "DropdownList2": {
    
32.       "$id": "#/properties/DropdownList2",
    
33.       "type": "string",
    
34.       "title": "多选下拉下列表且名称与值为不同的值",
    
35.       "format": "dropdownlist",
    
36.       "multiSelect": true,
    
37.       "dropdownlist": [
    
38.         ["value1", "item1"],
    
39.         ["value2", "item2"],
    
40.         ["value3", "item3"],
    
41.         ["value4", "item4"],
    
42.         ["value5", "item5"]
    
43.       ],
    
44.       "default": "value2,value3",
    
45.       "examples": ["value1,value2"]
    
46.     },
    
47. 
    
48. ...
    
49. ...
    
50. ...
    
51. ...
    
52. 
    
53.     "DropdownList4": {
    
54.       "$id": "#/properties/DropdownList4",
    
55.       "type": "string",
    
56.       "title": "下拉下列可编辑输入且强制选择",
    
57.       "format": "dropdownlist",
    
58.       "editable": true,
    
59.       "dropdownlist": [
    
60.         ["value1", "item1"],
    
61.         ["value2", "item2"],
    
62.         ["value3", "item3"],
    
63.         ["value4", "item4"],
    
64.         ["value5", "item5"]
    
65.       ],
    
66.       "default": "value3",
    
67.       "examples": ["value1"]
    
68.     },
    
69.     "Number": {
    
70.       "$id": "#/properties/Number",
    
71.       "type": "number",
    
72.       "title": "输入小数",
    
73.       "minimum": -100,
    
74.       "maximum": 100,
    
75.       "default": 60.8,
    
76.       "examples": [0.1]
    
77.     },
    
78.     "Size": {
    
79.       "$id": "#/properties/Size",
    
80.       "type": "object",
    
81.       "title": "大小对象包含宽度与高度",
    
82.       "required": ["Width", "Height"],
    
83.       "text": ["{0},{1}", "Size-Width", "Size-Height"],
    
84.       "default": "20,20",
    
85.       "properties": {
    
86.         "Width": {
    
87.           "$id": "#/properties/Size/properties/Width",
    
88.           "type": "integer",
    
89.           "title": "Width",
    
90.           "minimum": 0,
    
91.           "maximum": 500,
    
92.           "default": 20,
    
93.           "examples": [200]
    
94.         },
    
95.         "Height": {
    
96.           "$id": "#/properties/Size/properties/Height",
    
97.           "type": "integer",
    
98.           "title": "Height",
    
99.           "minimum": 0,
    
100.           "maximum": 500,
     
101.           "default": 20,
     
102.           "examples": [100]
     
103.         }
     
104.       }
     
105.     },
     
106.     "Array": {
     
107.       "$id": "#/properties/Array",
     
108.       "type": "array",
     
109.       "title": "字符串数组类型",
     
110.       "items": {
     
111.         "$id": "#/properties/Array/items",
     
112.         "type": "string",
     
113.         "title": "字符串",
     
114.         "default": "",
     
115.         "examples": ["string1", "string2", "string3", "string4", "string5"]
     
116.       }
     
117.     }
     
118. ...
     
119. ...
     
120. ...
     
121.   }
     
122. }

复制代码

这是Number类型的定义

1.     "Number": {
   
2.       "$id": "#/properties/Number",
   
3.       "type": "number",
   
4.       "title": "输入小数",
   
5.       "minimum": -100,
   
6.       "maximum": 100,
   
7.       "default": 60.8,
   
8.       "examples": [0.1]
   
9.     }

复制代码

这是下拉列表类型的定义

1.     "DropdownList4": {
   
2.       "$id": "#/properties/DropdownList4",
   
3.       "type": "string",
   
4.       "title": "下拉下列可编辑输入且强制选择",
   
5.       "format": "dropdownlist",
   
6.       "editable": true,
   
7.       "dropdownlist": [
   
8.         ["value1", "item1"],
   
9.         ["value2", "item2"],
   
10.         ["value3", "item3"],
    
11.         ["value4", "item4"],
    
12.         ["value5", "item5"]
    
13.       ],
    
14.       "default": "value3",
    
15.       "examples": ["value1"]
    
16.     }

复制代码

这是Size对象的定义

1. "Size": {
   
2.   "$id": "#/properties/Size",
   
3.   "type": "object",
   
4.   "title": "大小对象包含宽度与高度",
   
5.   "required": ["Width", "Height"],
   
6.   "text": ["{0},{1}", "Size-Width", "Size-Height"],
   
7.   "converter": "(function(){if(data&&typeof data=='string'&&data.length>0) ...",
   
8.   "default": "20,20",
   
9.   "properties": {
   
10.         "Width": {
    
11.           "$id": "#/properties/Size/properties/Width",
    
12.           "type": "integer",
    
13.           "title": "Width",
    
14.           "minimum": 0,
    
15.           "maximum": 500,
    
16.           "default": 20,
    
17.           "examples": [200]
    
18.         },
    
19.         "Height": {
    
20.           "$id": "#/properties/Size/properties/Height",
    
21.           "type": "integer",
    
22.           "title": "Height",
    
23.           "minimum": 0,
    
24.           "maximum": 500,
    
25.           "default": 20,
    
26.           "examples": [100]
    
27.         }
    
28.   }
    
29. }

复制代码

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

1. {
   
2.   "SingleLine": "单行文本",
   
3.   "DropdownList": "item1",
   
4.   "DropdownList2": "value1,value2",
   
5.   "DropdownList3": "value3",
   
6.   "DropdownList4": "value4",
   
7.   "Boolean": false,
   
8.   "Integer": 50,
   
9.   "Number": 60.8,
   
10.   "Color": "#CCCCCC",
    
11.   "Size": {
    
12.     "Width": 200,
    
13.     "Height": 100
    
14.   },
    
15.   "Padding": {
    
16.     "Left": 10,
    
17.     "Top": 20,
    
18.     "Right": 10,
    
19.     "Bottom": 20
    
20.   },
    
21.   "Object": {
    
22.     "Name": "Address",
    
23.     "Type": "string",
    
24.     "IsNull": false,
    
25.     "Remark": "家庭住址"
    
26.   },
    
27.   "Array": ["string1", "string2", "string3", "string4", "string5"],
    
28.   "KeyValuePair": [{
    
29.       "key": "Key1",
    
30.       "value": "Value1"
    
31.     },
    
32.     {
    
33.       "key": "Key2",
    
34.       "value": "Value2"
    
35.     },
    
36.     {
    
37.       "key": "Key3",
    
38.       "value": "Value3"
    
39.     },
    
40.     {
    
41.       "key": "Key4",
    
42.       "value": "Value4"
    
43.     },
    
44.     {
    
45.       "key": "Key5",
    
46.       "value": "Value5"
    
47.     }
    
48.   ]
    
49. }

复制代码

关于JsonSchema网上介绍它的文章有很多，大家可以百度搜索，有什么不明白的可以留言。

属性网格是在FineUI的树组件上构建的，搜索栏是一个工具栏，描述栏也是一个工具栏，中间是一个树的主体部分。





搜索栏，可以通过输入属性名称的部分信息来过虑属性





描述栏，当选择一个属性时将显示属性的描述信息，描述信息支持HTML格式





属性编辑器，包含大多数常用的编辑器，如：
1、单选文本
2、多行文本
3、下拉选择（单选、多选、输入等）
4、枚举
5、布尔型
6、整数
7、小数
8、日期
9、颜色
10、对象类型
11、文本数组
12、键值对数组
13、文件上传

后续会根据设计器的需求，再增加一些编辑器


为了配合属性网格的使用，对部分编辑器做了一些增强
1、每一个编辑器的清除按钮是用于将属性重置到默认值，为了保持统一，对数字输入框添加了清除按钮
2、为了便于输入多行文本，增加了一个下拉的多行文本输入框
3、引入了一个第三方的颜色拾取器，并对其增加了下拉功能，下拉效果是用FineUI来实现的
4、可以直接编辑对象或编辑对象属性，如Size对象，对象的编辑及显示是通过JsonSchema来定义的
5、提供了一个键值对数组的编辑器，可以对其进行添加、删除、上移、下移等操作


属性网格的实现将大大方便了设计器的操作，大家对基于FineUI的可视化设计器有什么想法，可以留言给我。

sanshi

太酷了，中间居然是个Tree，那文本框编辑是怎么实现的哪？

KK.Leung

的确牛！！能开源学习一下吗？

Neal.六道

⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ 666 ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶666⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶6666⁶⁶666 666 ⁶⁶⁶⁶⁶⁶ 666666 ⁶⁶⁶ 66666 ⁶⁶⁶66

ramble5956

不错不错！