Kendo Filter widget 可以支持相关字段进行过滤吗?

Kendo Filter widget can support relative fields for filtering?

我正在尝试实现可以​​支持相关字段的过滤器,即一旦用户选择任何 table,第一个字段将是 table 名称,然后第二个字段将填充可用于 [=15] 的所有列=]ed table。现在用户可以选择运算符和传值来过滤列值。所以基本上我想根据列的值进行过滤。因为我不想将所有 table 的所有列都放在一个字段中,因为这会使我的下拉列表很长,因为我在某些 table 中有大量列,而且用户将无法轻松搜索特定列因此,我想再介绍一个 table 下拉字段。一旦 table 的用户 select 下拉,则列下拉列表将只有 selected table 列,这减少了列数,用户可以轻松选择。请参阅随附的屏幕截图。所以表达式预览应该是这样的。例如“table1.column5 等于我的值”。我们怎样才能做到这一点?我尝试使用 kendo 过滤器小部件的字段 属性 的编辑器模板,并添加了字段 2,如所附屏幕截图所示,但之后无法在表达式中获取字段 2 值。有人可以建议我们实现此目标的其他方法吗?

我已收到 telerik 支持团队对这个问题的回答。在这里发布同样的内容以帮助将来的人:

我经历了几个不同的场景,但是过滤器小部件的当前实现不支持所需的功能。原因是您在表达式预览中看到的过滤器 - “字段等于值”是基于小部件和数据源配置中的过滤器字段。 示例:

var dataSource = new kendo.data.DataSource({
    data: data,
    schema: {
      model: {
        fields: {
          name: { type: "string" },
          age: { type: "number" },
          city: {type: "string"},
          money: {type: "number"}
        }
      }
    }

在这种情况下,字段名称必须是 model.fields 配置中可用的名称。换句话说,为了使过滤器正常工作,您需要在架构中包含所有 table.column 组合,例如:

fields: {
          table1.name: { type: "string" },
          table1.age: { type: "number" },
          table1.city: {type: "string"},
          table1.money: {type: "number"},
          table2.age: { type: "number" },
          table2.city: {type: "string"},
          table2.money: {type: "number"},
          table3.age: { type: "number" },
          table3.city: {type: "string"},
          table4.money: {type: "number"},
          ...
        }

我可以建议的另一种方法是根据第一个下拉列表的选择过滤第二个下拉列表。您应该记住,这不会更改表达式本身,换句话说,您仍然无法创建具有 table.column 字段名称的过滤器。 例如,在第一个下拉列表中选择了 table1,在第二个下拉列表中我们有姓名和年龄选项:

例如,在第一个下拉列表中选择了表 2,在第二个下拉列表中我们有城市和货币选项:

我准备了一个示例来演示上述功能: https://dojo.telerik.com/@gdenchev/AHAmocIM

DOJO link 将来 link 禁用的内容:

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>
    
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-v2.min.css"/>
    
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
      </head>
      <body>
    
        <div id="filter"></div>
        <br /><br />
        <script>
          var data = [
            { name: "Jane Doe", age: 30, city: "City1", money: 60 },
            { name: "John Doe", age: 33, city: "City2", money: 90 }
          ];
    
          var dataSource = new kendo.data.DataSource({
            data: data,
            schema: {
              model: {
                fields: {
                  name: { type: "string" },
                  age: { type: "number" },
                  city: {type: "string"},
                  money: {type: "number"}
                }
              }
            }
          });
    
          $("#filter").kendoFilter({
            dataSource: dataSource,
            expressionPreview: true
          });
    
          $(".k-filter-toolbar-item:eq(1)").on("click", function(e) {
            let filter = $("#filter").data("kendoFilter");
            filter.one("change", function(e) {
              let filterRow = $(".k-filter-item:last").find(".k-filter-field");
              let firstDropDown = filterRow.find("select").data("kendoDropDownList");
              let secondDropDown = $("<input />")
              .insertBefore(filterRow)
              .kendoDropDownList({
                dataSource: {
                  data: ["table1", "table2"]
                },
                change: function() {
                  let value = this.value();
                  let columnsForTableOne = [{text: "name", value: "name"},{text: "age", value: "age"}];
                  let columnsForTableTwo = [{text: "city", value: "city"},{text: "money", value: "money"}];
                  let data;
                  
                  switch(value) {
                    case "table1": data = columnsForTableOne;
                      break;
                    case "table2": data = columnsForTableTwo;
                      break;
                  }
                  firstDropDown.dataSource.data(data);
                }
              }).data("kendoDropDownList");
            });
          });
    
        </script>
      </body>
    </html>