javascript - 具有自定义过滤器的 Kendo MVVM Grid-6ren

javascript - 具有自定义过滤器的 Kendo MVVM Grid

转载作者：可可西里更新时间：2023-11-01 02:48:17

25

4

我正在使用 MVVM 模式构建一个 Kendo Grid，我想要 2 个自定义过滤器:

带有 extra = false 和自定义运算符的通用网格过滤器
带有组合框的自定义列过滤器

非常类似于this Kendo Grid demo .我似乎无法在列上使用 data-filterable 属性或 filterable ui 使其与 MVVM 模式一起工作:

<div data-role="grid"
     data-filterable="customGridFilter"
     data-columns="[
        { field: 'Id', hidden: 'true' },
        { field: 'Name', filterable: '{ ui: customNameFilter }' },
        { field: 'Value' }
     ]"
     data-bind="source: gridDs">
</div>

我已经 created a JS Fiddle来说明我要做什么。

最佳答案

实际上它只是漏掉了一些点，比如

data-filterable="customGridFilter" 应该变成data-filterable="true",
而且在剑道道场中他们使用的是 jQuery 1.9.1 而你的是导致问题的紧凑(边缘)。

更改为 jQuery 1.9.1 后，它工作正常，如下所示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="test">
    <script>
      var customNameFilter = customNameFilter || null;
    </script>
    <div data-role="grid" data-filterable="true" data-columns="[
            { field: 'Id', hidden: 'true' },
            { field: 'Name', filterable: { ui: customNameFilter } },
            { field: 'Value' }
         ]" data-bind="source: gridDs"></div>
  </div>
  <script>
    $(document).ready(function() {
      customNameFilter = function(e) {
        console.log("test")
        e.kendoComboBox({
          dataSource: {
            data: [{
              Id: 1,
              Name: "Test1"
            }, {
              Id: 2,
              Name: "Test2"
            }, {
              Id: 3,
              Name: "Test3"
            }]
          },
          dataValueField: "Id",
          dataTextField: "Name",
          filter: "contains"
        });
      };
      var viewModel = kendo.observable({
        gridDs: new kendo.data.DataSource({
          data: [{
            Id: 1,
            Name: "Test1",
            Value: 3
          }, {
            Id: 2,
            Name: "Test2",
            Value: 5
          }, {
            Id: 3,
            Name: "Test3",
            Value: 2
          }, {
            Id: 4,
            Name: "Test4",
            Value: 7
          }]
        }),
        customGridFilter: {
          extra: false,
          operators: {
            string: {
              contains: "Contains",
              doesnotcontain: "Does not contain",
              eq: "Is equal to",
              neq: "Is not equal to",
              startswith: "Starts with",
              endswith: "Ends with"
            }
          }
        },

      });

      kendo.bind($('#test'), viewModel);
    });

     // this doesn't work
     //var grid = $('#test').data('kendoGrid');
     //grid.options.filterable = customFilter;
  </script>
</body>

</html>

关于javascript - 具有自定义过滤器的 Kendo MVVM Grid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33306184/

25

4

0

文章推荐： java - 使用 JobStoreTX 为 quartz 集群配置 CronTriggerFactoryBean

文章推荐： java - 为什么以及何时使用 AtomicIntegerFieldUpdater？

文章推荐： javascript - 更新 : Errors with postCSS and Babel in Gulpfile

javascript - AngularJS 中的“过滤器”过滤器
我有一个对象数组，我想在键传入“filter”过滤器时提取值。下面是我尝试过的 Controller 代码片段，但我得到的响应类型未定义。请帮我找出哪里出错了。 var states = [{"HI
java - Servlet 过滤器 - 来自 servlet 的转发请求是否会进入 servlet 过滤器？
如果任何 J2EE 应用程序直接访问 servlet，然后 servlet 将相同的请求转发到某个 .jsp 页面。 request.getRequestDispatcher("Login.jsp")
jquery 过滤器.not()
我有一个带有图像缩略图的表单，可以通过复选框进行选择以进行下载。我想要一个包含 jQuery 中图像的数组，用于 Ajax 调用。 2个问题: - 表格顶部有一个复选框，用于切换我想要从映射中排除的所
mysqldump 过滤器？
我必须从服务器转储数据库，将 .sql 传输到另一台服务器，然后运行以下脚本以使用此语法删除某些行: DELETE wp_posts FROM wp_posts INNER JOIN wp_postm
Java文件目录(过滤器)
我想从目录中过滤掉特定类型的文件，但收到错误“ token 语法错误，删除这些 token ”: File dir = new File("c:/etc/etc"); File[] f
PHP 过滤器
几乎所有的 Web 应用程序都依赖外部的输入。这些数据通常来自用户或其他应用程序（比如 web 服务）。通过使用过滤器，您能够确保应用程序获得正确的输入类型。您应该始终对外部数据进行过滤！输
子项和返回父项的 OData 过滤器
我正在开发一个由 OData 服务提供支持的搜索功能。它将返回一个或一列标题对象作为结果。我们需要搜索的许多字段不在标题对象中。它们仅在子对象(导航属性)中。能够针对子字段执行 OData 搜索并仍然
带替换的 Django 过滤器
假设我有以下模型，它有一个方法 variants(): class Example(models.Model): text = models.CharField(max_length=255)
Python 过滤器 defaultdict
我有一个默认的列表列表，但我基本上想这样做: myDefaultDict = filter(lambda k: len(k)>1, myDefaultDict) 除了它似乎只适用于列表。我能做什么？
Django 过滤器 - 分页结果
我正在使用 django-filter 来输出我的模型的过滤结果。那里没有问题。下一步是添加一个分页器……尽管现在已经苦苦挣扎了好几天。 views.py: def funds_overview(re
解释计划分区上的 oracle 过滤器
我正在做一个概念证明，我正在试验一种奇怪的行为。我有一个按日期字段按范围分区的表，如果我设置固定日期或由 SYSDATE 创建的日期，查询的成本会发生很大变化。这些是解释计划: SQL> SELE
configuration - Log4Net 过滤器 "OR"
如果一个或另一个值匹配，是否可以制作一个过滤器，例如一个中性的 PropertyFilter(并传递给链中的下一个过滤器)？就像是: value1 val
基于另一个单元格的 VBA 过滤器
我是 VBA 初学者，正在尝试根据单元格值过滤数据，经过一番谷歌搜索后，我编写了一个有效的代码 Sub FilterDepartment_Sales() Sheet6.Activate
Excel 过滤器 - 仅显示过滤器中的相关值
假设我在 excel 数据透视表中有两个过滤器。两者最初都会显示筛选列的选定范围内的所有值。当我仅在过滤器 1 中选择几个值时，过滤器 2 仍会继续显示基础数据中所选范围内特定过滤器列中的所有值。
Freemarker - 定义自定义内置/过滤器
是否可以定义自定义 build-ins (名称不再适合)在 ftl？由于语义前提，我不想让它成为一个函数，而是一个内置的。最佳答案这是不可能的，?语法是为内置函数保留的。 (顺便说一句，这意味着
Wordpress 过滤器 user_row_actions
我试图在 Edit | 之外添加一个链接通过插件删除wordpress管理员>用户>所有用户列表中的链接..这是我第一次尝试通过查看其他插件或搜索google来制作wordpress插件.. 我添加了
带分页的 Django 过滤器
我正在尝试按照以下教程使用 django 过滤器进行分页，但该教程似乎缺少某些内容，而且我无法使用基于函数的 View 方法显示分页。 https://simpleisbetterthancomple
Powershell 过滤器 csv
由于我是 Powershell 新手，因此寻求最佳实践方面的帮助，我有一个 csv 文件，我想过滤掉 csv 中的每一行，除了包含“未安装”的行然后，我想根据包含计算机列表的单独 csv 文件过滤
我需要审查的项目的 Gerrit 过滤器
我正在尝试创建一个搜索查询，它会告诉我我作为审阅者添加到其中的打开更改，但我还没有提交最新补丁集的代码审查。这应该包括其他人已经评论过的更改，但我没有。我能找到的最接近的是 is:reviewer
java session 过滤器
在我的 Web 应用程序中，我有 3 个主要部分 1. 客户 2. 供应商 3. 管理员我正在使用 java session 过滤器来检查用户 session 并允许访问网站的特定部分。因此客户只

首页

博学

6Ren·AI

商城

javascript - 具有自定义过滤器的 Kendo MVVM Grid