FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 2528|回复: 2
打印 上一主题 下一主题

FineUI Filter Builder

[复制链接]
跳转到指定楼层
楼主
发表于 2020-1-21 17:33:28 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
FineUI Filter Builder




参考了 devexpress

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

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

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


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

  3. @section body{
  4.     <f:Tree ID="Tree1" ShowHeader="true" Title="Filter Builder" EnableCollapse="false" EnableIcons="false">
  5.     </f:Tree>
  6.     <br />
  7.     <f:Panel Layout="Fit" Title="Filter" Height="200" BodyPadding="10">
  8.         <Items>
  9.             <f:TextArea ID="TextArea1"></f:TextArea>
  10.         </Items>
  11.     </f:Panel>
  12.     <br />
  13.     <f:Button Text="获取Filter" OnClientClick="getFilter()"></f:Button>
  14.     <f:Button Text="设置Filter" OnClientClick="setFilter()"></f:Button>
  15. }

  16. @section script{
  17.     <script src="~/fineui-filter-builder.js"></script>
  18.     <script>
  19.         var fields = [
  20.             {
  21.                 "name": "name",
  22.                 "text": "姓名",
  23.                 "dataType": "string"
  24.             },
  25.             {
  26.                 "name": "gender",
  27.                 "text": "性别",
  28.                 "dataType": "string",
  29.                 "operators": ["=", "<>", "isnull", "notnull"],
  30.                 "options": {
  31.                     "data": [
  32.                         ["1", "男"],
  33.                         ["2", "女"]
  34.                     ]
  35.                 }
  36.             },
  37.             {
  38.                 "name": "age",
  39.                 "text": "年龄",
  40.                 "dataType": "number"
  41.             },
  42.             {
  43.                 "name": "entranceYear",
  44.                 "text": "入学年份",
  45.                 "dataType": "date",
  46.                 "operators": [
  47.                     "=",
  48.                     "<>",
  49.                     "<",
  50.                     ">",
  51.                     "<=",
  52.                     ">=",
  53.                     "between",
  54.                     [
  55.                         "customize",
  56.                         "自定义",
  57.                         {
  58.                             "data": [
  59.                                 ["1", "前年"],
  60.                                 ["2", "去年"],
  61.                                 ["3", "今年"]
  62.                             ],
  63.                             "multiValue": true
  64.                         }
  65.                     ]
  66.                 ]
  67.             },
  68.             {
  69.                 "name": "atSchool",
  70.                 "text": "是否在校",
  71.                 "dataType": "boolean",
  72.                 "operators": ["=", "<>", ["all", "所有", false]],
  73.                 "options": {
  74.                     "data": [
  75.                         ["yes", "在校"],
  76.                         ["no", "离校"]
  77.                     ]
  78.                 }
  79.             },
  80.             {
  81.                 "name": "major",
  82.                 "text": "所学专业",
  83.                 "dataType": "string",
  84.                 "operators": [
  85.                     "=",
  86.                     "<>",
  87.                     "isnull",
  88.                     "notnull",
  89.                     ["anyof", "任意一个", { "multiValue": true }]
  90.                 ],
  91.                 "options": {
  92.                     "data": ["化学系", "数学系", "物理系", "自动化系", "材料科学与工程系"]
  93.                 }
  94.             },
  95.             {
  96.                 "name": "logTime",
  97.                 "text": "注册日期",
  98.                 "dataType": "date"
  99.             }
  100.         ];

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

  102.         var filter = {
  103.             "operator": "and",
  104.             "items": [
  105.                 {
  106.                     "field": "name",
  107.                     "operator": "contains",
  108.                     "value": "张"
  109.                 },
  110.                 {
  111.                     "operator": "or",
  112.                     "items": [
  113.                         {
  114.                             "field": "age",
  115.                             "operator": ">=",
  116.                             "value": 23
  117.                         },
  118.                         {
  119.                             "field": "atSchool",
  120.                             "operator": "=",
  121.                             "value": "yes"
  122.                         },
  123.                         {
  124.                             "field": "major",
  125.                             "operator": "=",
  126.                             "value": "物理系"
  127.                         }
  128.                     ]
  129.                 }
  130.             ]
  131.         };

  132.         var filterBuilder = null;

  133.         function getFilter() {
  134.             F.ui.TextArea1.setText(JSON.stringify(filterBuilder.outputFilter(), null, 2));
  135.         }

  136.         function setFilter() {
  137.             filterBuilder.inputFilter(JSON.parse(F.ui.TextArea1.getText()));
  138.         }

  139.         F.ready(function () {
  140.             filterBuilder = F.ext.createFilterBuilder("Tree1");
  141.             filterBuilder.setFields(fields);
  142.             filterBuilder.setGroups(groups);
  143.             filterBuilder.inputFilter(filter);
  144.         });
  145.     </script>
  146. }
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
板凳
发表于 2020-2-12 17:52:28 | 只看该作者

把收藏功能开启啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-22 02:48 , Processed in 0.045692 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表