文檔半島外圍網上直營>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：過濾
Kendo UI for jQuery數據管理使用教程：過濾
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。
默認情況下，Kendo UI Grid過濾功能處于禁用狀態。要控制Grid中的過濾，請使用filterable屬性。
Grid使您可以實現以下過濾器選項：
- 標題行過濾
- 通過復選框過濾
- 自定義菜單過濾
標題行過濾
要啟用網格標題中的過濾器行，請將模式設置為row。結果基于基礎列數據的數據類型，網格將在列標題中呈現字符串值、數字輸入或日期選擇器的文本框進行過濾。您還可以指定默認的過濾器運算符，當用戶在過濾器文本框中輸入值并從鍵盤按Enter或Tab時將應用該默認過濾器。 要處理這種情況，請將相應列的cell設置為operator。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 225,
filterable: {
cell: {
showOperators: false
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});
</script>
</div>
</body>
</html>通過復選框過濾
要在過濾器菜單中呈現復選框列表，請為所需的Grid列設置multi=true，還可以將復選框過濾器與itemTemplate定義結合使用，并自定義將顯示的復選框項目。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<style>
.k-multicheck-wrap {
overflow-x: hidden;
}
</style>
<div class="demo-section k-content wide">
<h4>Client Operations</h4>
<div id="client"></div>
</div>
<div class="demo-section k-content wide">
<h4>Server Operations</h4>
<div id="server"></div>
</div>
<script>
$(document).ready(function() {
var telerikWebServiceBase = "//demos.telerik.com/kendo-ui/service/";
$("#client").kendoGrid({
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "/Products",
dataType: "jsonp"
},
update: {
url: telerikWebServiceBase + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: telerikWebServiceBase + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: telerikWebServiceBase + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
},
filterable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ProductName", filterable: { multi: true, search: true} },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } },
{ field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } },
{ field: "Discontinued", width: 120, filterable: { multi: true, dataSource: [{ Discontinued: true }, { Discontinued: false }]} },
{ command: "destroy", title: " ", width: 150}],
editable: true
});
$("#server").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: telerikWebServiceBase + "Northwind.svc/Employees"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
},
editable: true,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name",
filterable: {
multi: true ,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
width: "220px"
},
{
field: "LastName",
filterable: {
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "LastName"
}
}
}
},
multi: true
},
title: "Last Name",
width: "220px"
},
{
field: "Country",
filterable: {
multi: true,
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "Country"
}
}
}
},
itemTemplate: function(e) {
if (e.field == "all") {
//handle the check-all checkbox template
return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
} else {
//handle the other checkboxes
return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Country#'/><span>#= Country #</span></label></span>"
}
}
},
width: "220px"
},
{
field: "City",
filterable: {
multi: true,
dataSource: [{
City: "Seattle",
},{
City: "Tacoma",
},{
City: "Kirkland",
},{
City: "Redmond",
},{
City: "London"
}],
checkAll: false
},
width: "220px"
},
{
filterable: {
multi: true,
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "Title"
}
}
}
}
},
field: "Title"
}
]
});
});
</script>
</div>
</body>
</html>自定義菜單過濾
您可以為網格過濾器的菜單配置應用通用設置，并在每列中自定義其UI。有關實現自定義菜單篩選的可運行示例演示了如何：
- 通過設置extra = false來指定單個過濾條件；
- 將字符串列的過濾器運算符限制為僅、等于和不等于開始；
- 定義內置的日期選擇器用戶界面，以過濾網格中的日期時間列；
- 分別為Title和City列實例化Kendo UI AutoComplete和DropDownList。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: {
ui: cityFilter
}
},
{
field: "Title",
filterable: {
ui: titleFilter
}
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
}
]
});
});
function titleFilter(element) {
element.kendoAutoComplete({
dataSource: titles
});
}
function cityFilter(element) {
element.kendoDropDownList({
dataSource: cities,
optionLabel: "--Select Value--"
});
}
</script>
</div>
</body>
</html>掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線