在Kendo UI网格列标题上添加悬停文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Kendo UI网格列标题上添加悬停文本相关的知识，希望对你有一定的参考价值。
我正在尝试将自定义hovertext（如工具提示）添加到KendoUI网格中的列标题中。文本应特定于每列，理想情况下不显示在标题行之外的任何内容上。 Grid对象没有工具提示选项，但我不确定是否可以使用CSS或其row template配置来实现。
有兴趣听听是否有人之前已经这样做过，如果是这样的话，或者是否有可能。
谢谢。
如果工具提示的内容是静态的，那么你可以使用columns.headerTemplate然后在标题中添加一个tooltip。
代码：
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/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,
serverSorting: true
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}",
headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
}, {
field: "ShipName",
title: "Ship Name",
width: 260,
headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
}, {
field: "ShipCity",
title: "Ship City",
width: 150,
headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
}]
});
$("#grid").kendoTooltip({
filter: ".k-header span"
});
如果要在每个列标题上定义工具提示，可以在grid thead元素上定义qazxsw poi，如下所示：
kendoTooltip
当您将标题悬停在任何位置时，这会显示悬停文本，而不仅仅是标题中的文本。即使列具有最小宽度并且标题的文本未以其全长显示/显示或根本未显示，也显示工具提示。见grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
。
Here's the complete code from the example at jsbin.com, in case it needs to be reproduced in the future:
html：*
example
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.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.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>
对于任何尝试使用Kendo UI MVC执行此操作的人，可以使用以下逻辑来实现：
在网格var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/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
},
height: 430,
columns: [{
field: "OrderID",
width: 250
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}
]
}).data("kendoGrid");
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target; // element for which the tooltip is shown
return $(target).text();
}
});
事件创建一个DataBound函数来处理数据绑定。
在该JavaScript函数中添加以下代码（对于我的示例，我将我的函数命名为JavaScript
createToolTip()这将创建一个工具提示，以显示在网格标题上，工具提示位于标题上方。
以上是关于在Kendo UI网格列标题上添加悬停文本的主要内容，如果未能解决你的问题，请参考以下文章
MVC 中的 KENDO UI 网格：有没有办法在某些列上隐藏过滤器？