所以在后台我使用PHP,下面是字符串的格式:
$temp['photos'] = html_entity_decode( $HTMLformatedImg );
作为回应,它被格式化得很好:
"photos":"<img src='url/test1.jpg'><img src='url/test2.png'>"
当我尝试使用向用户显示时
dataSourceDeals = new kendo.data.DataSource({
//serverPaging: true,
serverSorting: true,
transport: {
read: {
url: crudServiceBaseUrlDeals + "read&businessId={/literal}{$details.id}{literal}",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrlDeals + "update&businessId={/literal}{$details.id}{literal}",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrlDeals + "destroy&businessId={/literal}{$details.id}{literal}",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrlDeals + "create&businessId={/literal}{$details.id}{literal}",
dataType: "jsonp"
},
},
batch: false,
pageSize: 10,
schema: {
total: "total",
data: "data",
model: {
id: 'id',
fields: {
id: { type: "number", editable: false },
dealName: { type: "string" },
photos: { type: "string" },
description: { type: "string" },
active: { type: "string" }
}
}
}
});
结果显示了文本。当我试图检查文本时,我得到了这个
<img src='url/test1.jpg'><img src='url/test2.png'>
我不确定发生了什么,为什么。
我正在使用最新版本的剑道UI。
编辑
$("#deals").kendoGrid({
dataSource: dataSourceDeals,
pageable: true,
resizable: true,
toolbar: [{ text:"Add Deal", className: "gridAddDeal"}, { text:"Edit Selected", className: "gridEditDeal"}, { text:"Delete Selected", className: "gridDeleteDeal"}],
height: 400,
sortable: 'true',
selectable: true,
columns: [
{ field: "id", title: "ID", width: "40px" },
{ field: "dealName", title: "Coupon Name", width: "100px" },
{ field: "photos", title: "Photos", width: "100px" },
{ field: "description", title: "Description", width: "100px" },
{ field: "active", title: "Active", width: "70px" }
]
});
不确定它是缺陷还是功能,但您可以很容易地解决它,将photos
字段的模板定义为template: "#= photos #"
:
columns: [
{ field: "id", title: "ID", width: "40px" },
{ field: "dealName", title: "Coupon Name", width: "100px" },
{ field: "photos", title: "Photos", width: "100px", template: "#= photos #" },
{ field: "description", title: "Description", width: "100px" },
{ field: "active", title: "Active", width: "70px" }
]
请在此处查看:http://jsfiddle.net/OnaBai/H6dD5/
从我的角度来看,这是一个功能,因为这是能够打印特殊字符<
、>
、&
。。。而不需要模板。可以理解,您可能不会发送HTML,而是发送一些将生成HTML的可变数据。
或者,您可以考虑将照片的URL作为逗号分隔值photos: 'url/test1.jpg, url/test2.png'
发送,然后将模板定义为:
<script id="photo-tpl" type="text/kendo-tpl">
# var ps = data.photos.split(","); #
# for (var i = 0; i < ps.length; i++) { #
<img src="#= ps[i] #"/>
#}#
</script>
不确定这是否比在后端生成HTML更容易,但至少(从我的角度来看)它是Model view Controller的一个更干净的分离。
请在此处查看此方法:http://jsfiddle.net/OnaBai/H6dD5/1/