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微信公眾號，及時獲取最新動態及最新資訊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：慧都網
金喜正規買球 
28次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線