FineUI 官方论坛

标题: FineUI Filter Builder [打印本页]
作者: 棕榈    时间: 2020-1-21 17:33
标题: FineUI Filter Builder
FineUI Filter Builder


[attach]12203[/attach]

参考了 devexpress

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

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

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


  1. @page
  2. @model FineUICore.EmptyProject.RazorPages.Pages.FilterBuilderModel

  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. }

  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.         ];

  104.         var groups = [["and", "并且"], ["or", "或者"]];

  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.         };

  137.         var filterBuilder = null;

  139.         function getFilter() {
  140.             F.ui.TextArea1.setText(JSON.stringify(filterBuilder.outputFilter(), null, 2));
  141.         }

  143.         function setFilter() {
  144.             filterBuilder.inputFilter(JSON.parse(F.ui.TextArea1.getText()));
  145.         }

  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    时间: 2020-1-23 22:53
厉害！厉害！
作者: 竹席    时间: 2020-2-12 17:52
sanshi 发表于 2020-1-23 22:53
厉害！厉害！

把收藏功能开启啊



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4