Question

我尝试遍历列表并将所有元素显示在列中的单元格中，但我无法让它工作。

这是我到目前为止所拥有的。

在网格定义中：

columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #");

其中x.locationList是传入的对象中的List<string>。

在<script>：

function iterate(object) {
        var html = "<ul>";

        for (var x = 0; x < object.length; x++) {
            html += "<li>";
            html += object[x];
            html += "</li>";
        }

        html += "</ul>";
        return html;
}

但是，这会导致所有记录消失。这样做的正确语法是什么？

这些文件令人困惑，大多数例子都不适用于我想要的内容。

Answer 1

你可能已经得到了你的答案，但是你的实现并没有太大的错误你忘记的是如果你的列表是空的或者空的话会发生什么，这可能会让你感到害怕。

改变你的代码：

function iterate(object) {
        var html = "<ul>";

        for (var x = 0; x < object.length; x++) {
            html += "<li>";
            html += object[x];
            html += "</li>";
        }

        html += "</ul>";
        return html;
}

到

function iterate(object) {
    var html = "<ul>";
    if (object !== null && object.length > 0) {
        for (var x = 0; x < object.length; x++) {
            html += "<li>";
            html += object[x];
            html += "</li>";
        }
    } else {
        html += "<li>-</li>";
    }
    html += "</ul>";
    return html;
}

或者你可以这样做：

function iterate(object) {
    var html = '<ul>';
    if (object !== null && object.length > 0) {
        object.forEach(function (data) {
            html += '<li>' + data + '</li>';
        });
    } else {
        html += '<li>-</li>';
    }
    html += '</ul>';
    return html;
}

最后一个解决方案是我的首选（我觉得它更清晰易读）

显然，其他答案为您提供了一个解决方案，如果它想要显示的更复杂一些。

希望无论如何这都有帮助。

Answer 2

你太近了！你的Kendo Grid定义了一个字母。转到x.locationList功能时，只需将locationList替换为iterate，您就可以了！（全线以及下面的修复）

    columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(locationList) #");

Answer 3

您需要为此目的制作列模板

请参阅下面的答案

How to display formatted HTML data in kendo ui grid column

调用模板的Jquery

var scriptTemplate = kendo.template($("#MessageBoxTemplate").html())
var scriptData = { stringList: yourListofString  };

模板中的Foreach循环

<script id="MessageBoxTemplate" type="text/x-kendo-template">
    <div class="class1"> 
        <div>This is <strong>bold </strong>text.</div>
        <div> </div>
        <div>This is <em>italics</em> text.</div>
        <div> </div>
        <div>This is a <a href="http://google.com/">hyperlink</a>.</div>
        <div> </div>
        <div>Bulleted list:</div>
        <ul>
           for(var item; item<=stringList.length;item++)
           {
            <li>#= item.Age#</li>
            <li>#= item.Name#</li>
            <li>#= item.Message#</li>
            }
        </ul>
     </div>
</script>

Answer 4

Shaz的解决方案对我不起作用。不确定我是否使用了不同的版本，但它缺少一些哈希值。他们需要定义什么是javascript，什么不是。

<script id="MessageBoxTemplate" type="text/x-kendo-template">
<div class="class1"> 
    <div>This is <strong>bold </strong>text.</div>
    <div> </div>
    <div>This is <em>italics</em> text.</div>
    <div> </div>
    <div>This is a <a href="http://google.com/">hyperlink</a>.</div>
    <div> </div>
    <div>Bulleted list:</div>
    <ul>
       #for(var item; item<=stringList.length;item++)
       {#
        <li>#= item.Age#</li>
        <li>#= item.Name#</li>
        <li>#= item.Message#</li>
        #}#
    </ul>
 </div>

Kendo Grid：如何在一个单元格中显示List <string>？</string>

4 个答案: