Question

当我搜索结果时，我的数据需要一些时间才能显示，所以我希望点击搜索按钮后显示进度条。显示数据需要5-8秒。如果我在[div class =检查元素中的“k-grid-content”div然后加载条工作正常但数据加载后没有隐藏。如何在数据加载之前添加下面的代码并在加载后删除。谢谢!!

<div class="k-loading-mask" style="width: 100%; height: 100%; top: 0px; left: 0px;">
<span class="k-loading-text">Loading...</span>
<div class="k-loading-image"></div>
<div class="k-loading-color"></div>
</div>

Answer 1

Kendo ui已经提供了显示进度条的方法。您可以像这样使用它： -

kendo.ui.progress(element, true);

其中element是您想要附加进度标记的div（您可以在某些Master \ Layout页面中添加此div）。

此外，您可以在一些常见的JS文件中编写泛型方法，如下所示： -

function displayProgressBar(display){
    kendo.ui.progress(element, display);
}

最后，您可以从任何JS函数调用此函数，例如：displayProgressBar(true)以显示进度，或displayProgressBar(false)隐藏它。

Answer 2

在你的视图中添加一个gif，设置＆＃34; display：none;＆＃34;然后只需添加onclick（[CODE] document.getElementById（＆＃34; loadingGif＆＃34;）。style.display =＆＃39; block＆＃39;;）[/ CODE]

如何在搜索按钮单击上添加进度条

2 个答案: