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

Question

当我搜索结果时，我的数据需要一些时间才能显示，所以我希望在点击搜索后显示一个进度条 button.It 需要 5-8 秒才能显示 data.If 我在下面添加div 在检查元素 [div class="k-grid-content] div 之后加载栏工作正常但在数据之后不隐藏 load.How 我可以吗在数据加载前添加以下代码并在加载后删除。谢谢!!

<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 是您要在其上附加进度 mark-up 的 div（您可以在某些 Master\Layout 页面中添加此 div） .

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

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

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

Answer 2

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

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

How can i add progress bar on search button click

asp.net

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc