FineUI Filter Builder

棕榈

FineUI Filter Builder




参考了 devexpress

在 FineUI 的 Tree 组件上构建的过滤生成器，它的应用很广泛，不仅可以用于最终用户，也可以用于后台的设置，同时也可以结合规则引擎，为其创建规则条件。

1、它本身包含了一些操作符，同时也可以增加新的操作符
2、组及条件都可以单独定义操作符
2、值支持文本、数字、布尔、日期等类型
3、可以增加删除组及条件
4、组的个数及嵌套没有限制
5、可以自定义下拉列表，同时支持单选及多选
6、可以生成过滤，同时也可以导入过滤

下面是字段的定义及过滤代码：

1. @page
   
2. @model FineUICore.EmptyProject.RazorPages.Pages.FilterBuilderModel
   
3. 
   
4. @section body{
   
5.     <f:Tree ID="Tree1" ShowHeader="true" Title="Filter Builder" EnableCollapse="false" EnableIcons="false">
   
6.     </f:Tree>
   
7.     <br />
   
8.     <f:Panel Layout="Fit" Title="Filter" Height="200" BodyPadding="10">
   
9.         <Items>
   
10.             <f:TextArea ID="TextArea1"></f:TextArea>
    
11.         </Items>
    
12.     </f:Panel>
    
13.     <br />
    
14.     <f:Button Text="获取Filter" OnClientClick="getFilter()"></f:Button>
    
15.     <f:Button Text="设置Filter" OnClientClick="setFilter()"></f:Button>
    
16. }
    
17. 
    
18. @section script{
    
19.     <script src="~/fineui-filter-builder.js"></script>
    
20.     <script>
    
21.         var fields = [
    
22.             {
    
23.                 "name": "name",
    
24.                 "text": "姓名",
    
25.                 "dataType": "string"
    
26.             },
    
27.             {
    
28.                 "name": "gender",
    
29.                 "text": "性别",
    
30.                 "dataType": "string",
    
31.                 "operators": ["=", "<>", "isnull", "notnull"],
    
32.                 "options": {
    
33.                     "data": [
    
34.                         ["1", "男"],
    
35.                         ["2", "女"]
    
36.                     ]
    
37.                 }
    
38.             },
    
39.             {
    
40.                 "name": "age",
    
41.                 "text": "年龄",
    
42.                 "dataType": "number"
    
43.             },
    
44.             {
    
45.                 "name": "entranceYear",
    
46.                 "text": "入学年份",
    
47.                 "dataType": "date",
    
48.                 "operators": [
    
49.                     "=",
    
50.                     "<>",
    
51.                     "<",
    
52.                     ">",
    
53.                     "<=",
    
54.                     ">=",
    
55.                     "between",
    
56.                     [
    
57.                         "customize",
    
58.                         "自定义",
    
59.                         {
    
60.                             "data": [
    
61.                                 ["1", "前年"],
    
62.                                 ["2", "去年"],
    
63.                                 ["3", "今年"]
    
64.                             ],
    
65.                             "multiValue": true
    
66.                         }
    
67.                     ]
    
68.                 ]
    
69.             },
    
70.             {
    
71.                 "name": "atSchool",
    
72.                 "text": "是否在校",
    
73.                 "dataType": "boolean",
    
74.                 "operators": ["=", "<>", ["all", "所有", false]],
    
75.                 "options": {
    
76.                     "data": [
    
77.                         ["yes", "在校"],
    
78.                         ["no", "离校"]
    
79.                     ]
    
80.                 }
    
81.             },
    
82.             {
    
83.                 "name": "major",
    
84.                 "text": "所学专业",
    
85.                 "dataType": "string",
    
86.                 "operators": [
    
87.                     "=",
    
88.                     "<>",
    
89.                     "isnull",
    
90.                     "notnull",
    
91.                     ["anyof", "任意一个", { "multiValue": true }]
    
92.                 ],
    
93.                 "options": {
    
94.                     "data": ["化学系", "数学系", "物理系", "自动化系", "材料科学与工程系"]
    
95.                 }
    
96.             },
    
97.             {
    
98.                 "name": "logTime",
    
99.                 "text": "注册日期",
    
100.                 "dataType": "date"
     
101.             }
     
102.         ];
     
103. 
     
104.         var groups = [["and", "并且"], ["or", "或者"]];
     
105. 
     
106.         var filter = {
     
107.             "operator": "and",
     
108.             "items": [
     
109.                 {
     
110.                     "field": "name",
     
111.                     "operator": "contains",
     
112.                     "value": "张"
     
113.                 },
     
114.                 {
     
115.                     "operator": "or",
     
116.                     "items": [
     
117.                         {
     
118.                             "field": "age",
     
119.                             "operator": ">=",
     
120.                             "value": 23
     
121.                         },
     
122.                         {
     
123.                             "field": "atSchool",
     
124.                             "operator": "=",
     
125.                             "value": "yes"
     
126.                         },
     
127.                         {
     
128.                             "field": "major",
     
129.                             "operator": "=",
     
130.                             "value": "物理系"
     
131.                         }
     
132.                     ]
     
133.                 }
     
134.             ]
     
135.         };
     
136. 
     
137.         var filterBuilder = null;
     
138. 
     
139.         function getFilter() {
     
140.             F.ui.TextArea1.setText(JSON.stringify(filterBuilder.outputFilter(), null, 2));
     
141.         }
     
142. 
     
143.         function setFilter() {
     
144.             filterBuilder.inputFilter(JSON.parse(F.ui.TextArea1.getText()));
     
145.         }
     
146. 
     
147.         F.ready(function () {
     
148.             filterBuilder = F.ext.createFilterBuilder("Tree1");
     
149.             filterBuilder.setFields(fields);
     
150.             filterBuilder.setGroups(groups);
     
151.             filterBuilder.inputFilter(filter);
     
152.         });
     
153.     </script>
     
154. }
     

复制代码

sanshi

厉害！厉害！

竹席

sanshi 发表于 2020-1-23 22:53
厉害！厉害！

把收藏功能开启啊