Kendo ui网格-动态更改行模板的内容
[英]Kendo ui grid - Change row template content dynamically
问题描述
I came across this, and i really don´t know how to change it. 
我遇到了这个问题，我真的不知道如何更改它。 I have column field like this: 我有这样的列字段：
{ field: "nome", title: "Nome", width: "20px", template: '<span><img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/></span><a href="\\#" class="k-button link">#= nome #</a>',hideMe: true},
As you can see, i´m using a template and inside it there´s an image...it´s basically a icon that appears on the left side of the text in each row. 如您所见，我使用的是模板，模板内部有图像...基本上是一个图标，它出现在每行文本的左侧。 What i want is to change this icon dinamically , so i know i have to use the dataBound function, and iterate through rows, and i´m actually doing this, but i don´t know how to access the template and his content: 我想要的是动态地更改此图标 ，所以我知道我必须使用dataBound函数，并遍历行，而我实际上是在这样做，但是我不知道如何访问模板及其内容：
my dataBound: 我的dataBound：
var grid = this;
grid.tbody.find('>tr').each(function()
{
var dataItem = grid.dataItem(this);
console.log(dataItem);
if(dataItem.tipo === 'pdf')
{
"what do i do here" ?
}
});
Thanks for your time, regards. 谢谢您的时间，问候。
EDIT: 编辑：
Hi everyone, thanks to your suggestions, i found a way, here it is for someone who could have the same problem:(in the databound put this) 大家好，感谢您的建议，我找到了一种方法，这里是针对可能存在相同问题的人的：（在数据绑定中输入此内容）
var grid = $("#gridBaseDados").data("kendoGrid");
$(grid.tbody).find('tr').each(function ()
{
var dataItem = grid.dataItem(this).tipo;
var ficheiroValExtension = dataItem.split('.').pop();
if(ficheiroValExtension === 'pdf')
{
$(this).find('img').prop('src', 'index.hyperesources/icon_rowPdf.png').css('width','17px').css('height','22px');
}
}
2 个解决方案
解决方案1
1 2016-02-03 12:08:59
As i understand you want to show specific image corresponding to each data item. 据我了解，您想显示与每个数据项相对应的特定图像。 Then you have two options: 然后，您有两个选择：
1.Additional field in dataSource that represents img.src 1. dataSource中代表img.src
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=imgSrc#" .../></span><a href="\\#" class="k-button link">#= nome #</a>',
hideMe: true
}
2.Use clientSide function that return image source dependent on data item: 2.使用clientSide函数返回依赖于数据项的图像源：
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=getImgSrc(data)#" .../></span><a href="\\#" class="k-button link">#= nome #</a>',
hideMe: true
}
and function itself: 和功能本身：
var getImgSrc = function(item)
{
if(item.tipo === 'pdf') { return ... }
...
}
Update: of course for that no need to iterate dataSource in dataBound event 更新：当然不需要在dataBound事件中迭代dataSource
解决方案2
1 已采纳 2016-02-03 12:18:10
Please try with the below code snippet. 请尝试使用以下代码段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
template: '<img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/>'
}
]
});
});
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).find('tr').each(function () {
$(this).find('img').prop('src', 'Your new image src');
//Below syntax will return orderID
//$($(this).find('td').get(0)).html()
});
}
</script>
</body>
</html>
Let me know if any concern. 让我知道是否有任何问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.