Drop down menu 使用下拉列表过滤网格（多个）
我正在尝试使用多个下拉菜单过滤网格。我想要完成的与本演示（）有些相似，只是：Drop down menu 使用下拉列表过滤网格（多个）,drop-down-menu,filter,grid,kendo-ui,Drop Down Menu,Filter,Grid,Kendo Ui,我正在尝试使用多个下拉菜单过滤网格。我想要完成的与本演示（）有些相似，只是： 我需要使用多个下拉菜单，而不仅仅是一个 我需要用户能够首先选择下拉项目，然后点击一个“搜索”按钮，将过滤网格的基础上 他们选择了什么 我搜索了stackoverflow和剑道UI论坛，发现了与我类似的问题，但没有任何可以帮助我的 请看下面我的Jankey代码。在这个例子中，我使用了“First Name”和“Last Name”列。我可能犯了一些新手错误，如果有人能指出这一点，我将不胜感激 <script typ
<script type="text/javascript" src="~/Scripts/Shared/NameData.js"></script>
<script>
/************ CODE FOR THE GRID ************/
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
data: getNameData(),
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 550,
sortable: true,
navigatable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: “FIRST_NAME”, title: "First Name", width: 100 },
{ field: “LAST_NAME”, title: "Last Name" },
],
toolbar: kendo.template($("#template").html()),
})
/************ FIRST_NAME Dropdown ************/
var dropdownFIRST_NAME = $("#grid").find("#FIRST_NAME").kendoDropDownList({
dataTextField: “FIRST_NAME”,
dataValueField: “FIRST_NAME”,
autoBind: false,
optionLabel: "All",
dataSource: getNameData(),
});
/************ LAST_NAME Dropdown ************/
var dropdownLAST_NAME = $("#grid").find("#LAST_NAME").kendoDropDownList({
dataTextField: “LAST_NAME”,
dataValueField: “LAST_NAME”,
autoBind: false,
optionLabel: "All",
dataSource: getNameData(),
});
/************ CODE FOR THE SEARCH BUTTON ************/
$('#Search').click(function () {
var filter = new Array();
var valueFIRST_NAME = $("#dropdownFIRST_NAME").data("kendoDropDownList").value();
var valueLAST_NAME = $("#dropdownLAST_NAME").data("kendoDropDownList").value();
if ($valueFIRST_NAME) {
$filter.push({ field: “FIRST_NAME”, operator: "eq", value: $valueFIRST_NAME });
}
if ($valueLAST_NAME) {
$filter.push({ field: “LAST_NAME”, operator: "eq", value: $valueLAST_NAME });
}
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.filter({
logic: "and",
filters: $filter
});
});
});
</script>
/************网格代码************/
$（文档）.ready（函数（）{
var grid=$（“#grid”）.kendoGrid({
数据源：{
数据：getNameData（），
页面大小：20，
对,，
对,，
服务器筛选：true
},
身高：550，
可排序：是的，
可导航：是的，
可分页：{
刷新：是的，
页面大小：正确
},
栏目：[
{字段：“名字”，标题：“名字”，宽度：100}，
{字段：“姓氏”，标题：“姓氏”}，
],
工具栏：kendo.template（$（“#template”）.html（），
})
/************名字下拉列表************/
var dropdownFIRST_NAME=$（“#网格”）.find（“#FIRST_NAME”）.kendoDropDownList({
dataTextField:“名字”，
dataValueField:“名字”，
自动绑定：错误，
选项标签：“全部”，
数据源：getNameData（），
});
/************姓氏下拉列表************/
var dropdownLAST_NAME=$（“#网格”）.find（“#LAST_NAME”）.kendoDropDownList({
dataTextField:“姓氏”，
dataValueField:“姓氏”，
自动绑定：错误，
选项标签：“全部”，
数据源：getNameData（），
});
/************搜索按钮的代码************/
$（“#搜索”）。单击（函数（）{
var filter=新数组（）；
var valueFIRST_NAME=$（“#dropdownFIRST_NAME”）.data（“kendoDropDownList”）.value（）；
var valueLAST_NAME=$（“#dropdownLAST_NAME”）.data（“kendoDropDownList”）.value（）；
如果（$valueFIRST\u NAME）{
$filter.push（{字段：“FIRST\u NAME”，运算符：“eq”，值：$valueFIRST\u NAME}）；
}
如果（$valueLAST\u NAME）{
$filter.push（{字段：“LAST_NAME”，运算符：“eq”，值：$valueLAST_NAME}）；
}
var grid=$（“#grid”）.data（“kendoGrid”）；
grid.dataSource.filter({
逻辑：“和”，
过滤器：$filter
});
});
});