我在网格中锁定了命令列(见下图)。
我想用自定义图标(或用Kendo提供的一组图标)替换默认按钮。
我怎样才能轻松完成?
我试图在文档中找到一些东西,但没有运气。
感谢您的任何建议。
编辑:添加按钮代码
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;
}
}
],
答案 0 :(得分:6)
您还可以在命令中使用imageClass或iconClass。我不确定区别是什么,但任何一个似乎都有效。
感谢OnaBai,我可以分叉的工作示例。
注意,我添加了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>
&#13;
答案 1 :(得分:1)
如果您不想操纵KendoUI生成的HTML,您可以简单地使用定义和CSS。
如果您的命令定义类似于:
columns: [
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
},
...
]
},
...
您可以定义以下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;
}
即。将text
设置为空格(
),如果命令的name
为onabai
,则需要在其中定义样式k-grid-onabai
和{{1 }}
以下运行示例:
k-grid-onabai:hover
&#13;
$(document).ready(function(e) {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
command: [
{
name: "onabai",
text: " ",
click: function (e) {
alert ("clicked");
}
}
]
}
],
dataSource: [ { name: "Jane Doe" } ]
});
});
&#13;
答案 2 :(得分:0)
简单方法:只需在text属性上添加bootstrap图标,并使用“”覆盖imageClass和iconClass
command: [{
name: "destroy",
text: "<span class='glyphicon glyphicon-remove'></span>",
imageClass: "",
iconClass: "",
}]