过滤"UnitPrice"和"ProductID"柱子 [英] Filter for "UnitPrice" and "ProductID" column
本文介绍了过滤"UnitPrice"和"ProductID"柱子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想过滤UnitPrice和ProductID.这是示例，您想要更多使用jsfiddle链接.检查此 jsfiddle 以获得更多详细信息&在其中运行我的程序
I wanted to filter UnitPrice and ProductID. This is the sample, you want more using the jsfiddle link. Check this jsfiddle for more detail & work my program in that
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
selecteditem = selecteditem.toUpperCase();
var selectedArray = selecteditem.split(" ");
if (selecteditem) {
});
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
$.each(selectedArray, function (i, v) {
if (v.trim() == "") {
}
else {
$.each(selectedArray, function (i, v1) {
if (v1.trim() == "") {
}
else {
orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
{ field: "QuantityPerUnit", operator: "contains", value:v1});
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
}
});
}
});
kgrid.dataSource.filter(andfilter);
}
else {
kgrid.dataSource.filter({});
}
});
推荐答案
请尝试使用以下代码段.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 230px" />
<input id="reset" type="button" value="Reset" />
<input id="reset1" type="button" value="ORLOGIC" />
</div>
</div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
sortable: true,
pageable: true,
columns: [
{
field: "ProductID",
width: 100
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
width: 100
},
{
field: "QuantityPerUnit",
title: "Quantity Per Unit"
}
]
});
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
var gridListFilter = { filters: [] };
var gridDataSource = kgrid.dataSource;
gridListFilter.logic = "or"; // a different logic 'and' can be selected
gridListFilter.filters.push({ field: "ProductID", operator: "eq", value: parseInt(selecteditem) });
gridListFilter.filters.push({ field: "UnitPrice", operator: "eq", value: parseInt(selecteditem) });
gridDataSource.filter(gridListFilter);
gridDataSource.read();
});
$('#reset').click(function () {
//not working yet
$('#category').val('');
$("#grid").data("kendoGrid").dataSource.filter([]);
});
//Or LOGIC HERE... DOESN'T WORK
$('#reset1').click(function () {
$("#grid").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "ProductName",
operator: "eq",
value: "Chang"
},
{
field: "QuantityPerUnit",
operator: "contains",
value: "box"
}
]
});
});
});
</script>
</body>
</html>
让我知道是否有任何问题.
Let me know if any concern.
这篇关于过滤"UnitPrice"和"ProductID"柱子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
