Question

我一直坚持这个时间。我想要的是在CustomerName字段中的每个客户旁边显示图像。

这是我的代码：

<div id="example">

    <div data-role="grid"
         data-editable="true"
         data-columns="[
                         { 'field': 'CustomerID', 'width': 300},
                         { 'field': 'CustomerAltID', 'width': 300 },
                         { 'field': 'CustomerName', 'width': 500 },
                         { 'field': 'Gender', 'width': 200 }
                        ]"
         data-bind="source: productsSource"
         style="height: 400px"></div>
</div>

视图模型：

var viewModel = kendo.observable({
                productsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: function (response) {
                            return $(response.Data).length;
                        }
                    }
                })


            });

kendo.bind($("#example"), viewModel);

现在我可以用这么多代码显示细节但不能显示图像。

我想要的是什么：

我得到的是什么：

所以我尝试在数据列中做这样的事情，但我不认为它是正确的方式：

data-columns="[
                         { 'field': 'CustomerID', 'width': 300,template: "<div class='customer-photo'" +
                                                            "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
                                                        "<div class='customer-name'>#: CustomerName #</div>"},

我尝试在网上搜索并遇到一些模板内容，但无法编写可以实现我功能的内容。

如果有人能帮助我，我会很高兴和感激。

Answer 1

你的模板方法很好但是生成的html不是。使用'style：background-image'将该图像作为元素内容的背景，但是你的div没有任何内容，这就是你什么也看不见的原因。我相信你需要像你的照片的img标签，然后是客户名称。使用span而不是div作为名称应该将图片和文本并排放置。尝试调整模板以呈现以下内容：

<img src='../Content/Images/customerimg/#:data.CustomerID#.jpg'></img>
<span>#: CustomerName #</span>

在kendo MVVM中显示字段值旁边的图像

1 个答案: