带有模板的 Kendo UI 网格编号列不会过滤

Posted 2023-05-07

【中文标题】带有模板的 Kendo UI 网格编号列不会过滤

【英文标题】：Kendo UI grid number column with template won't filter

【发布时间】：2015-03-19 02:14:46

【问题描述】：

我创建了一个包含两列的 Kendo UI 网格。 一个只是一个名为 num0 的数字。 另一个称为 num1，它的数据是从 num0 到 a 模板。

num0 上的过滤器可以找到。 num1 上的过滤器出现，您可以使用它，但是 找不到匹配项。即：过滤num1并选择“等于”并输入“2”， 然后点击“过滤器” 并且当它应该显示第一条记录时，网格被清空。

另外，我使 num0 列可编辑，而 num1 列不可编辑。 如果 num0 被编辑，我想改变 num1 列。

我认为这与我使用的“模板”有关 填充 num1 列。

我需要做些什么来解决这个问题，以便过滤器正常工作？

谢谢

http://jsfiddle.net/elbarto99/acyxekgx/

$(document).ready(function()

    // Define the datasource for the grid.
    var dsNums = new kendo.data.DataSource(
        // NOTE: I don't want a num1: data field set to static values.
        //       I would like one that is set from "num0 + 1" and when num0 data is edited
        //       num1 would be updated to "num0 + 1"
        data: [
             num0: 1 ,
             num0: 2 ,
             num0: 3 ,
             num0: 4 ,
        ],
        schema:
        
            model:
            
                id: "myGridID",
                fields:
                
                    num0:  type: "number"  ,
                    num1:  type: "number", editable: false  ,
                
            
        

    );

    // Create the grid.
    var _grid = $("#grid").kendoGrid(
        dataSource: dsNums,
        filterable:  extra: false ,
        editable: true,
        columns: [
             field: "num0" , title: "Num 0" , width: "90px", ,
            // Add 1 to num0 and display in num1 column
            // Note: A filter shows up and is for numbers but doesn't work
            //       I think it doesn't work because I am using a template.
            //       
            //       What do I need to do to make the filter for column num1 work like it does for num0?
             field: "num1" , title: "Num 1 - Filter shows up but doesn't find matchs. :-(" , width: "90px", template: "#= num0 + 1 #", ,
        ],
    ).data("kendoGrid");

);

【参考方案1】：

num1 值不是数据的一部分，因此过滤器不会对其进行过滤。过滤器在数据源级别工作，而不是展示。

您可能会在 schema.parse 函数上计算相同的值。类似的东西：

    parse: function(d) 
        $.each(d, function(idx, elem) 
            elem.num1 = elem.num0 + 1;
        );
        return d;
      

您的 JSFiddle 在此处修改：http://jsfiddle.net/OnaBai/acyxekgx/2/

【讨论】：

效果很好，我可以过滤“2”并过滤。 我无法在这个 *** 评论框中按回车键。所以我正在使用 br 标签。 如果我使 num0 列可编辑，是否有办法在 num0 更改时更新 num1 列？

【参考方案2】：

感谢 OnaBai： 我修改了你的 jfiddle 并添加一些可编辑设置，使 num0 列可编辑，而 num1 列不可编辑。

如果编辑了 num0，有没有办法让 num1 的数据和表示更新为 num0 + 1？ 即：num0 变为 11，num1 的数据变为 num0+1 或 12， 并在 num1 上过滤以查找 12 将列出第 1 行。

另外，将 num1 的表示设置为 12，以便用户可以看到更改。

http://jsfiddle.net/elbarto99/acyxekgx/

// Define the datasource for the grid.
var dsNums = new kendo.data.DataSource(
    // NOTE: I don't want a num1: data field set to static values.
    //       I would like one that is set from "num0 + 1" and when num0 data is edited
    //       num1 would be updated to "num0 + 1"
    data: [
         num0: 1 ,
         num0: 2 ,
         num0: 3 ,
         num0: 4 
    ],
    schema:
    
        model:
        
            id: "myGridID",
            fields:
            
                num0:  type: "number"  ,
                num1:  type: "number", editable: false  
            
        ,
        // This changes the data for num1 at load time but
        // if the data in num0 is edited this doesn't change data for num1
        // at edit time.
        parse: function(d) 
            $.each(d, function(idx, elem) 
                elem.num1 = elem.num0 + 1;
            );
            return d;
                
     
);

// Create the grid.
var _grid = $("#grid").kendoGrid(
    dataSource: dsNums,
    filterable:  extra: false ,
    editable: true,
    columns: [
         field: "num0", title: "Num 0", width: "90px" ,
         field: "num1", title: "Num 1", width: "90px" 
    ]
).data("kendoGrid");