Easyui datagrid 添加自定义 loading 效果 附效果图

Easyui datagrid 添加新 loading 遮罩，并隐藏原生的loading

datagrid自带的loading

在Easyui官方文档中，datagrid有一个默认的属性。可查看：Easyui官方中文文档。

官方文档中datagrid中有一个loadMsg属性，其描述是：在从远程站点加载数据的时候显示提示消息。默认会显示一个Processing, please wait …

但是这并不是我们想要的，下面的方法是利用Easyui messager消息窗口创建数据加载的显示内容。

在前台展示重写loading效果

1、首先需要将datagrid自带效果去除，查看官方文档后，得知loadMsg属性的属性值时字符串String，所以在datagrid属性值中添加

<table id="datagrid1"></table>

<script type="text/javascript">
$(function(){
	$("#datagrid1").datagrid({
		//省略其他属性...
		//该属性将去除自带的loading
		loadMsg: ""
		//
	})
})
</script>

2、利用Easyui messager消息窗口创建数据加载的显示内容

官方文档中$.messager.progress方法：

官方文档中datagrid又有两个加载事件，加载数据前触发，加载成功时触发，所以我们可以使进度消息窗体$.messager.progress在加载前onBeforeLoad触发，在加载成功后onLoadSuccess关闭，这样就能达到请求数据时Loading的效果。

<table id="datagrid1"></table>

<script type="text/javascript">
$(function(){
	$("#datagrid1").datagrid({
		//省略其他属性...
		//该属性将去除自带的loading
		loadMsg: ""
		//
		//省略其他属性...
		onBeforeLoad: function() {
			$.messager.progress({
				title:'请等待',
        		msg:'<div class="panel-loading">请稍等,正在查询数据......</div>',
        		text:''
			});
		},
		onLoadSuccess: function() {
			//加载成功关闭窗口，，，，一定要关闭，不然一直转圈
			$.messager.progress('close');
		}
	})
})
</script>

下面是效果图：

但是，进度条对于用户来说是不友好的，因为它并不能到100%结束的时候刚好查询出数据，具有不确定性，所以我们需要把进度条给隐藏。

<table id="datagrid1"></table>

<script type="text/javascript">
$(function(){
	$("#datagrid1").datagrid({
		//省略其他属性...
		//该属性将去除自带的loading
		loadMsg: ""
		//
		//省略其他属性...
		onBeforeLoad: function() {
			$.messager.progress({
				title:'请等待',
        		msg:'<div class="panel-loading">请稍等,正在查询数据......</div>',
        		text:''
			});
			//这里是隐藏进度条
			$(".messager-p-bar.progressbar").hide();
			//这里隐藏去掉进度条后的阴影部分
			$(".window-shadow").hide();
		},
		onLoadSuccess: function() {
			//加载成功关闭窗口，，，，一定要关闭，不然一直转圈
			$.messager.progress('close');
		}
	})
})
</script>

下面是最终效果图：

转圈的是需要用easyui.css <div class="panel-loading"></div>

总结

以上就是自定义一个简单的datagrid loading遮罩效果，都是在工作中遇到的，发出来分享一下。