如何在剑道ui网格中创建单独的列模板

how to create separate column template in Kendo-UI grid

本文关键字：单独 创建 网格 ui      更新时间：2023-09-26

我开始在我的项目中使用剑道ui，我希望我的一个列显示一个图像按钮和一个字段，类似于这里的文档中的'联系人姓名'。然后我检查文档，得到如下代码:

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。我是否应该创建一个新文件来编写模板或其他地方?

谢谢

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())"
相关文章：