Kendo ui 剑道ui网格-动态更改行模板内容_Kendo Ui_Kendo Grid

Kendo ui 剑道ui网格-动态更改行模板内容

kendo-ui

Kendo ui 剑道ui网格-动态更改行模板内容,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我遇到了这个问题，我真的不知道如何改变它。我有如下列字段： { 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 hre

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

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

谢谢你的时间，问候

编辑：

大家好，多亏了你们的建议，我找到了一个方法，这是给可能有同样问题的人的：（在数据库中放这个）

据我所知，您希望显示对应于每个数据项的特定图像。那么您有两个选择：

1.数据源中表示

img.src

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

更新：当然不需要在

dataBound

event

中迭代

dataSource

，因为我知道您想要显示对应于每个数据项的特定图像。那么您有两个选择：

1.数据源中表示

img.src

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

更新：当然，无需在

dataBound

事件中迭代

dataSource

，请尝试以下代码片段

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


贾耶什·戈亚尼
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Orders",
数据类型：“jsonp”
},
模式：{
型号：{
字段：{
OrderID:{type:“number”}，
运费：{type:“number”}，
船名：{type:“string”}，
OrderDate:{type:“date”}，
ShipCity:{type:“string”}
}
}
},
页面大小：10，
对,，
是的，
服务器排序：true
},
数据绑定：onDataBound，
可过滤：正确，
可排序：是的，
pageable:对，
栏目：[{
字段：“订单ID”，
可过滤：false
},
“运费”，
{
字段：“订单日期”，
标题：“订单日期”，
宽度：120，
格式：“{0:MM/dd/yyyy}”
}, {
字段：“ShipName”，
标题：“船名”，
宽度：260
}, {
字段：“ShipCity”，
标题：“船舶城”，
模板：“”
}
]
});
});
函数onDataBound（e）{
var grid=$（“#grid”）.data（“kendoGrid”）；
$（grid.tbody）.find（'tr'）.each（函数（）{
$（this.find（'img'）.prop（'src'，'Your new image src'）；
//下面的语法将返回orderID
//$（$（this.find（'td'）.get（0））.html（）
});
}

如果有任何问题，请告诉我。

请尝试使用下面的代码片段

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


贾耶什·戈亚尼
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Orders",
数据类型：“jsonp”
},
模式：{
型号：{
字段：{
OrderID:{type:“number”}，
运费：{type:“number”}，
船名：{type:“string”}，
OrderDate:{type:“date”}，
ShipCity:{type:“string”}
}
}
},
页面大小：10，
对,，
是的，
服务器排序：true
},
数据绑定：onDataBound，
可过滤：正确，
可排序：是的，
pageable:对，
栏目：[{
字段：“订单ID”，
可过滤：false
},
“运费”，
{
字段：“订单日期”，
标题：“订单日期”，
宽度：120，
格式：“{0:MM/dd/yyyy}”
}, {
字段：“ShipName”，
标题：“船名”，
宽度：260
}, {
字段：“ShipCity”，
标题：“船舶城”，
模板：“”
}
]
});
});
函数onDataBound（e）{
var grid=$（“#grid”）.data（“kendoGrid”）；
$（grid.tbody）.find（'tr'）.each（函数（）{
$（this.find（'img'）.prop（'src'，'Your new image src'）；
//下面的语法将返回orderID
//$（$（this.find（'td'）.get（0））
var getImgSrc = function(item)
{
    if(item.tipo === 'pdf') { return ... }
    ...
}

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