Question

我开始在我的项目中使用Kendo-UI，我希望我的一个列显示一个图像按钮和一个字段，类似于文档here中的“联系人姓名”。然后我检查了文档，得到了如下代码。

columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]

我认为直接在模板中编写html是一种好方法，特别是对于一个非常复杂的模板。然后我从文档中找到了另一个解决方案。

"template": "kendo.template($('comments-template').html())"

这在我的场景中更明智。但我很困惑，在哪里定义模板更好。我也使用AngularJS。我应该创建一个新文件来编写模板还是其他任何地方？

由于

Answer 1

columns.template属性需要一个返回字符串的字符串或函数。您可以在HTML标记中使用<script>标记...

<script id="script-template-id" type="text/x-kendo-template">
    <div class="myClass">#: FieldName #</div>
</script>

...

<script>
// ...

columns: [{
    title: "My Template Column",
    template: $('#script-template-id').html()
}]

// ...
</script>

...或者使用在您喜欢的任何地方定义的字符串变量，包括外部JavaScript文件（假设它将尽早注册以使变量可用）：

var templateStringVariable = '<div class="myClass">#: FieldName #</div>';

// ...

columns: [{
    title: "My Template Column",
    template: templateStringVariable
}]

请注意，此语法不起作用，因为JavaScript代码本身是字符串化的：

"template": "kendo.template($('comments-template').html())"

如何在Kendo-UI网格中创建单独的列模板

1 个答案: