在剑道网格中显示动态图像答案

【问题标题】：Displaying dynamic images in kendo grid在剑道网格中显示动态图像
【发布时间】：2013-04-26 15:17:02
【问题描述】：

我想在剑道网格中填充动态图像。我正在获取 json 数据。

我有以下代码

 var grid = $("#timeSegmentGrid").kendoGrid({
    //var icon='';  
        dataSource: {
            transport: {
                read: function (options) {
                    getTimeSegmentList("", onSuccess, null);
                    function onSuccess(responseData) {
                        if (responseData.segments != null)
                            options.success(responseData.segments);
                        else
                            options.success([]);
                    }
                }
            },
            pageSize: 5
        },
        pageable: {
            input: true,
            numeric: false,
            pageSizes: false,
            refresh: true
        },
        toolbar: kendo.template($("#template").html()),
        columns: [
            { field: "display_name", title: "&{'Name'}" },
            { field: "display_order", title: "&{'Display Order'}" },
            { field: "icon",
                title: "Icon"
            }
        ]
    }).data("kendoGrid");

"icon" 包含图像的路径。现在，我可以打印路径，但我真的不知道如何根据该路径显示图像。非常感谢任何帮助。

【问题讨论】：

标签： json kendo-ui kendo-grid

【解决方案1】：

你可以试试：

columns : [
    { 
        field: "icon",
        title: "Icon",
        template: '<img src="#= icon #" alt="image" />'
    }
]

【讨论】：

【解决方案2】：

试试这个可能会有帮助

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.Columns(columns =>
{
    columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox'     value =#IMAGESIZE_ID#  />");
    columns.Bound(c => c.IMAGESIZE_NAME).Width(140);
    columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + 
    Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>");
    columns.Bound(c => c.created_by);
    columns.Bound(c => c.created_date);
    columns.Bound(c => c.modified_by);
    columns.Bound(c => c.modified_date);
})
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(10)
)
.DataSource(datasource => datasource
    .Ajax()
    .Read(read => read
            .Action("GetData", "Image")
          ))

)

【讨论】：