如何在搜索按钮单击时添加进度条答案

【问题标题】：How can i add progress bar on search button click如何在搜索按钮单击时添加进度条
【发布时间】：2017-02-07 10:52:07
【问题描述】：

当我搜索结果时，我的数据需要一些时间才能显示，所以我希望在单击搜索按钮后显示进度条。显示数据需要 5-8 秒。如果我在 [div class= 之后添加下面的 div检查元素中的“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>

【问题讨论】：

既然您已将您的帖子标记为 Kendo，那么我假设您已使用 AJAX 帖子向服务器提交数据。如果是这种情况，那么您可以使用 AJAX Start 来显示繁忙的加载器并使用 Ajax Stop 或 Ajax Complete 来隐藏繁忙的加载器。

标签： asp.net asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案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) 隐藏它。

【讨论】：

谢谢先生，帮助我！！

【解决方案2】：

在视图中添加 gif，设置“display: none;”然后只需添加 onclick( [CODE]document.getElementById("loadingGif").style.display = 'block';)[/CODE]

【讨论】：