javascript Kendo Grid 命令列 - 如何用图标替换按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28188730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo Grid command column - how to replace buttons with icons?
提问by redrom
I have locked command column in the Grid (see image below).
我已锁定网格中的命令列（见下图）。
I would like to replace default buttons with custom icons (or with set of icons supplied with Kendo).
我想用自定义图标（或 Kendo 提供的一组图标）替换默认按钮。
How can I easily do it?
我怎样才能轻松做到？
I tried to find something in documentation but without luck.
我试图在文档中找到一些东西，但没有运气。
Thanks for any advice.
感谢您的任何建议。
EDIT: added button code
编辑：添加按钮代码
command:
[
{
name: "destroy",
text: $translate.instant('REMOVE'),
className: "btn-destroy"
},
{
name: "detail",
text: $translate.instant('DETAIL'),
click: function(e) {
var clickedRow = this.dataItem($(e.currentTarget).closest("tr"));
var id = clickedRow.id;
GlobalHelperService.redirectTo("/milestone-sequences/detail/"+id);
return false;
}
}
],
回答by nsnadell
You can also use imageClass or iconClass within the command. I'm not sure what the difference is, but either one seems to work.
您还可以在命令中使用 imageClass 或 iconClass 。我不确定有什么区别，但任何一个似乎都有效。
Thanks OnaBai, for the working example that I could fork.
感谢 OnaBai，为我可以分叉的工作示例。
Note, I added the FontAwesome stylesheet to easily swap out the icon via a class.
请注意，我添加了 FontAwesome 样式表以通过类轻松换出图标。
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
imageClass: "fa fa-trash",
//iconClass: "fa fa-trash",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>回答by OnaBai
If you don't want to manipulate the HTML generated by KendoUI you can simply play with the definition and CSS.
如果您不想操作由 KendoUI 生成的 HTML，您可以简单地使用定义和 CSS。
If your command definition is something like:
如果您的命令定义类似于：
columns: [
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
},
...
]
},
...
You can define the following CSS for changing the button to only your custom icon:
您可以定义以下 CSS 以将按钮更改为仅自定义图标：
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
i.e. set textto an empty space ( ) and if the nameof the command is onabaiyou need to define there the styles k-grid-onabaiand k-grid-onabai:hover.
即设置text为一个空的空间 ( )，如果name命令是onabai你需要在那里定义样式k-grid-onabai和k-grid-onabai:hover.
A running example following:
运行示例如下：
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>
<style>
.k-grid-onabai, .k-grid-onabai:hover {
background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
background-position: 192px -248px;
min-width: 32px !important;
min-height: 32px !important;
}
</style>回答by Kabindas
The easy way : Just add the bootstrap icons on text property and override imageClass and iconClass with ""
简单的方法：只需在 text 属性上添加引导图标，并用“”覆盖 imageClass 和 iconClass
command: [{
name: "destroy",
text: "<span class='glyphicon glyphicon-remove'></span>",
imageClass: "",
iconClass: "",
}]
