Question

我遇到了这个，我真的不知道如何改变它。我有这样的列字段：

{ 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},

正如你所看到的，我正在使用一个模板，里面有一个图像......它基本上是一个图标，显示在每行文本的左侧。 我想要的是改变这个图标，所以我知道我必须使用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" ?
              }
           });

感谢您的时间，问候。

修改

大家好，感谢您的建议，我找到了一种方法，这里适用于可能遇到同样问题的人:(在数据库中放了这个）

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');
    } 
}

Answer 1

据我了解，您希望显示与每个数据项对应的特定图像。那你有两个选择：

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.使用clientSide函数返回依赖于数据项的图像源：

{
    field: "nome",
    title: "Nome",
    width: "20px",
    template: '<span><img src="#=getImgSrc(data)#" .../></span><a href="\\#" class="k-button link">#= nome #</a>',
    hideMe: true
}

并自行运作：

var getImgSrc = function(item)
{
    if(item.tipo === 'pdf') { return ... }
    ...
}

更新：当然不需要在dataSource事件中迭代dataBound

Answer 2

请尝试使用以下代码段。

<!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>

如果有任何疑虑，请告诉我。

Kendo ui grid - 动态更改行模板内容

2 个答案: