Question

我正在尝试为我的kendo网格创建网格过滤器，该列显示ID值，我希望过滤器根据文本进行搜索。

例如：列具有员工ID，我想使用员工姓名搜索网格，但员工姓名不是列。（这是根据要求）

我已设法自动完成工作并加载员工姓名，但如何获取员工ID并过滤网格？

我的示例代码：

	<script type="text/javascript">
                function empFilter(element) {
                    element.kendoAutoComplete({
                        dataTextField: "Name",
                        dataValueField: "employeeID",
                        minLength: 3,
                        filter: "contains",
                        dataSource: {                            
                            serverFiltering: true,
                            serverSorting: true,
                            transport: {
                                read: "@Url.Action("Fetch", "abccontroller")",
                                type: "GET",
                                dataType: "json",
                                parameterMap: function (data, action) {
                                    if (action === "read") {
                                        return {
                                            text: data.filter.filters[0].value
                                        };
                                    }
                                }
                            }                            
                        }
                    });
                }
            </script>

@(Html.Kendo().Grid<abcModel>()
                .Name("abc")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(i => i.id))
                    .Read(read => read.Action("Load", "abccontroller"))
                    .PageSize(100)
                )              
                .Filterable(filter => filter.Enabled(true))
                .Pageable(pager => pager.Enabled(true))
                .Resizable(resize => resize.Columns(true))
                .Columns(columns =>
                {                  
                    columns.Bound(m => m.employeeID).Title("Employee Name").Filterable(f => f.UI("empFilter").Extra(false));                   
                })
            )

Answer 1

添加自动完成选择处理程序，该处理程序又将选区的ID应用为网格上的过滤器。在此示例中，我禁止清除自动完成功能，以便读取所有查找数据。

事情可能有点棘手，因为自动填充允许输入，组件的值可能不一定是与下拉列表中特定项目对应的值。

// autocomplete declaration
...
filtering: ac_Filtering,
change: ac_Change,
...


function ac_Filtering(e) {@* prevent autoComplete 'clear' from loading all remote data *@
    if (!e.filter.value) {@* if there is no filter value, clear has occurred and no further action should take place *@
        e.preventDefault();
    }
}

function ac_Change(e) {
    @* check if value is in dataSource *@
    var ac_value = this.value(); // should be the name showing in ac textbox, if not small tweak here
    var j = -1;
    for (var i = 0; i < this.dataSource.total(); i++) {
        if (this.dataSource.at(i).get('Name') == ac_value) {
            j = i;
        }
    }

    if (j == -1) return; // ac value is not yet a single employee

    // apply filter to grid data source here
    var grid = $("#abc").data("kendoGrid");
    var chosenId = this.dataSource.at(j).get('employeeID')
    grid.dataSource.filter(
      [
        { field: "employeeID", operator: "equals", value: chosenId }
      ]
    );

}

没有看到更多的应用程序框架，我推测自动完成组件将位于网格之外或工具栏区域。

Kendo Grid过滤器，带有自动完成文本框，文本和值在ASP.Net MVC中

1 个答案: