kendo-ui - 剑道网格 : How display List in one cell?

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

您可能已经有了答案，但您的实现并没有错太多，您只是忘记了如果您的列表为 null 或为空会发生什么，这可能会让您大吃一惊。

所以改变你的代码:

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;
}

最后一个解决方案是我的首选(我只是觉得它读起来更清晰)

显然，如果您想展示的内容稍微复杂一些，其他答案会为您提供解决方案。

希望这对您有所帮助。