如何在 kendo Mobile ListView 中显示“NO RESULTS”

Posted 2023-05-07

【中文标题】如何在 kendo Mobile ListView 中显示“NO RESULTS”

【英文标题】：How can I show "NO RESULTS" in kendo Mobile ListView

【发布时间】：2014-05-29 22:07:59

【问题描述】：

我有这个新的 Kendo ListView 以无限滚动开始，问题是当列表返回 NULL 时，控制台中会出现错误。 NULL 不是对象问题是，对于其他列表，我有加载程序出现并且不会停止加载并且不会让你做任何事情。最好的解决方案是不显示任何结果，但我没有办法显示总结果。 datasource.total() 总是显示 0。我真的不知道如何做到这一点。我会很感激一些帮助。我将发布我的代码。对不起我的英语不好。

function funcion() 
var dataSource_seguidores_articulos = new kendo.data.DataSource(
    autoSync: true,
    transport: 
        read:  
            url: "xxxxxxxx",
            dataType: "jsonp",
            data: token: xxx, motivo: x
        
    ,
    schema: 
        data: "results",
        total: "total"
    ,
    pageSize: 10,
    serverPaging: true
);

$("#listview").kendoMobileListView(
    dataSource: dataSource_seguidores_articulos,
    template: $("#template").text(),
    endlessScroll: true
);

为了不显示错误和造成冲突，最好的办法是：

if(datasource.total() === 0) 没有结果 别的 列表视图代码

php AJAX URL API 返回这个

jQuery1910311110318871215_1397568743279(( "results":null, "total": 1)

但数据源总数始终显示 0。提前致谢

【问题讨论】：

服务器返回null结果似乎很奇怪，但表明有1记录。如果可能，让服务器返回一个空数组而不是 null。

【参考方案1】：

如果您想要一个侵入性较小的解决方案并且可以接受所有实例的通用消息，您可以使用 CSS 来处理这个问题。

[data-role="listview"]:empty::after 
    content: 'No records to show';

我个人喜欢这样，因为我不必通过空元素的ID，或者用JS定位每个元素。它也不会更改 DOM，这可能会阻止 Kendo 正常运行。当记录可用时，此解决方案将正常更新。

更新：此解决方案在 IE11 中存在问题。文本将出现在一些填充列表中，并且由于鼠标移动而在屏幕绘制后立即消失

【参考方案2】：

我过去处理此问题的方式是 MVVM 将我的列表的可见性和“无结果”消息绑定到项目数。比如：

<div data-bind="visible: hasData">
    <ul data-role="listview" data-bind="source: data" data-template="list-template"></ul>
</div>
<div data-bind="invisible: hasData">
    <span>No Records.</span>
</div>

在 JS 中：

var ds = kendo.DataSource(...);

ds.bind("change", function () 
    vm.set("hasData", ds.total() > 0);
);

var vm = kendo.observable(
    hasData: false,
    data: ds
);

【讨论】：

如果DataSource.total() 似乎不起作用，请尝试使用DataSource.view().length。

【参考方案3】：

您可能必须手动替换 kendo 列表视图内容。我知道，例如，剑道网格没有空数据模板，因此在数据绑定事件中，我检查了 tbody 的表内容并从那里开始。在您的特定情况下，您可能需要测试 ul.km-listview 中有多少“li”标签标记项。如果长度为零，您可以插入您自己的显示“无可用项目”的格式化 li 项目：

<li class="km-group-container">
    <div class="km-group-title">
        <div class="km-text">No Items Available</div>
    </div>
    <ul class="km-list">
        <li data-icon="toprated">
            <a class="km-listview-link" data-role="listview-link">
                <span class="km-icon km-toprated"></span>Please try again.</a>
        </li>
    </ul>
</li>

祝你好运

更新 在你的 onGridDatabound 事件中试试这个：

var listElement = $("#yourlistname li");
if (listElement.size() == 0) 
     $("#yourlistname").append("the empty html above");

【讨论】：

事情是不工作。长度总是带来 undefined 或一个数字，而 undefined 不会让你做任何事情，total 总是带来 0

能否请您发布如何在 Angular Kendo 中实现此功能。

【参考方案4】：

     var listViewModel = kendo.observable(
                listData: ListModel
            );
            listViewModel.bind('change', function (e) 
                if (e.items.length > 0) 
    refreshList();
                 else 
                     $('#noresult-alert').data('kendoMobileModalView').open();
                
            );
    div-#noresult-alert is a kendoui mobile mdalview may have your custom message.
Note:using modalview may open once ata a time and no need of handle any stoppropagation here since fwk doesn't provide it internally.