Jquery 带模板列和筛选的剑道UI网格
我有一个剑道网格，我需要在其中显示一个包含串联值的列。显然，我需要在columns属性中选择行模板或模板字段Jquery 带模板列和筛选的剑道UI网格,jquery,kendo-ui,kendo-grid,Jquery,Kendo Ui,Kendo Grid,我有一个剑道网格，我需要在其中显示一个包含串联值的列。显然，我需要在columns属性中选择行模板或模板字段 { title: "StreetID-STREETNAME", filterable: true, template: "#: strID#-#: strName #" }, 但运行后，我无法在特定的网格列上看到任何过滤器图标 任何线索或链接都会对我大有帮助。经过大量的研发，我看不到任何使用带有过滤的模板列的实例。这展示了如何自定义网格过滤器 检查此示例代码 复制并粘贴下面的代码并
{ title: "StreetID-STREETNAME", filterable: true, template: "#: strID#-#: strName #" },
任何线索或链接都会对我大有帮助。经过大量的研发，我看不到任何使用带有过滤的模板列的实例。这展示了如何自定义网格过滤器 检查此示例代码 复制并粘贴下面的代码并另存为index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.photo {
width: 140px;
}
.details {
width: 400px;
}
.title {
display: block;
font-size: 1.6em;
}
.description {
display: block;
padding-top: 1.6em;
}
.employeeID {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 50px;
font-weight: bold;
color: #898989;
}
td.photo, .employeeID {
text-align: center;
}
.k-grid-header .k-header {
padding: 10px 20px;
}
.k-grid td {
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
</style>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
}
},
schema: {
model: {
fields: {
EmployeeID: { type: "number" },
Title: { type: "string" }
},
id: "EmployeeID"
}
}
},
columns: [
{ field: "Title", width: 400 },
{ field: "EmployeeID" }
],
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 430,
filterable: true
});
});</script>
</head>
<body>
<div id="grid"></div>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="details">
<span class="title">#: Title #</span>
<span class="description">Name : #: FirstName# #: LastName#</span>
<span class="description">Country : #: Country# </span>
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
</body>
</html>
JS-Bin
.照片{
宽度：140px；
}
.详情{
宽度：400px；
}
.头衔{
显示：块；
字号：1.6em；
}
.说明{
显示：块；
垫面：1.6em；
}
.雇员ID{
字体系列：“Segoe UI”、“Helvetica Neue”、Arial、无衬线字体；
字体大小：50px；
字体大小：粗体；
颜色：#8989；
}
td.photo，.employeeID{
文本对齐：居中；
}
.k-grid-header.k-header{
填充：10px 20px；
}
.k-grid td{
背景：-moz线性梯度（顶部，rgba（0,0,0,0.05）0%，rgba（0,0,0,0.15）100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（0,0,0,0.05））、颜色停止（100%，rgba（0,0,0,0.15））；
背景：-webkit线性梯度（顶部，rgba（0,0,0,0.05）0%，rgba（0,0,0,0.15）100%）；
背景：-o-线性梯度（顶部，rgba（0,0,0,0.05）0%，rgba（0,0,0,0.15）100%）；
背景：-ms线性梯度（顶部，rgba（0,0,0,0.05）0%，rgba（0,0,0,0.15）100%）；
背景：线性梯度（至底部，rgba（0,0,0,0.05）0%，rgba（0,0,0,0.15）100%）；
填充：20px；
}
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
读：{
url:“http://demos.kendoui.com/service/Northwind.svc/Employees"
}
},
模式：{
型号：{
字段：{
EmployeeID:{type:“number”}，
标题：{type:“string”}
},
id:“雇员id”
}
}
},
栏目：[
{字段：“标题”，宽度：400}，
{字段：“雇员ID”}
],
rowTemplate:kendo.template（$（“#rowTemplate”）.html（），
身高：430，
可过滤：真
});
});
#：标题#
姓名：#：姓氏#
国家：#：国家#
#：EmployeeID#
你需要定制它。希望这对你有所帮助所以我最后得出了这样的结论。如果需要过滤器，则需要提及字段属性。周围没有工作
因此，我从webservice本身创建了一个额外的列，并发送了一个额外的连接列。现在我可以看到一个字符串过滤器。感谢您的回复。但是在我的自定义列中，我不能使用字段参数。因为该列仅在筛选时绑定到特定字段。在我的例子中，我使用一个数字和一个字符串列。所以字段参数有点混乱。我不能在这里使用任何字段类型，因为我需要基于串联字符串进行筛选…此答案不符合要求，这是针对可筛选模板，而不是可筛选字段。请给出一个示例？
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.photo {
width: 140px;
}
.details {
width: 400px;
}
.title {
display: block;
font-size: 1.6em;
}
.description {
display: block;
padding-top: 1.6em;
}
.employeeID {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 50px;
font-weight: bold;
color: #898989;
}
td.photo, .employeeID {
text-align: center;
}
.k-grid-header .k-header {
padding: 10px 20px;
}
.k-grid td {
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
</style>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
}
},
schema: {
model: {
fields: {
EmployeeID: { type: "number" },
Title: { type: "string" }
},
id: "EmployeeID"
}
}
},
columns: [
{ field: "Title", width: 400 },
{ field: "EmployeeID" }
],
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 430,
filterable: true
});
});</script>
</head>
<body>
<div id="grid"></div>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="details">
<span class="title">#: Title #</span>
<span class="description">Name : #: FirstName# #: LastName#</span>
<span class="description">Country : #: Country# </span>
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
</body>
</html>