jquery-easyui中列表控件datagrid没有数据时显示列表为空信息

傷城~ 2022-04-10 02:55 351阅读 0赞

jquery-easyui控件datagrid下，如果有数据，会显示按照列表显示，如果没有数据，那么会显示如下的界面。没有任何提示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

为了让没有数据的情况下，提示“列表为空”，我们需要设置datagrid属性。这个属性就是emptyMsg。默认情况下，这个属性是为空，没有值。

![20181224115532279.png][]

当我们设置了emptyMsg这个之后，列表页面仍然不会显示，这个应该是easyui的一个bug。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

通过控制台打印信息，我们确定emptyMsg这个值确实被我们设置了，而且页面元素中，是有这个类为datagrid-emtpy的节点的。

![20181224115739678.png][]

从上面的截图，可以看出，类datagrid-empty的节点元素高度是25像素，而datagrid-view的高度仅仅是34也就是说是表头的高度，这个25像素高的datagrid-empty的节点被隐藏了。知道了这些，我们就好解决了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

设置datagrid-view的样式，增加min-height:59px;效果如图，列表为空的提示出现在列表中。

最终的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3][]

本例完整代码：

<!doctype html>
    <html>
    	<head>
    	<meta charset="UTF-8"/>
    	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    	<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    	<link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
    	<style>
    		.datagrid-view{min-height:59px;}
    	</style>
    	<script type="text/javascript" src="../jquery.min.js"></script>
    	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
    	</head>
    	<body class="easyui-layout">
    	<div class="easyui-container-fluid">
    	<div class="easyui-panel" style="width:100%;border:none;" data-options="title:'用户列表'">
    	<div class="table-wrapper">
    	<table class="easyui-datagrid" id="datagrid" style="width:100%;">
    		<thead>
    		<th data-options="field:'id',align:'center',width:'14%'">ID</th>
    		<th data-options="field:'name',align:'center',width:'14%'">Name</th>
    		<th data-options="field:'code',align:'center',width:'14%'">Code</th>
    		<th data-options="field:'email',align:'center',width:'14%'">Email</th>
    		<th data-options="field:'status',align:'center',width:'14%'">Status</th>
    		<th data-options="field:'mobile',align:'center',width:'14%'">Mobile</th>
    		<th data-options="field:'action',align:'center',width:'16%'">Action</th>
    		</thead>
    		<tbody>
    		</tbody>
    	</table>
    	</div>
    	</div>
    	</div>
    	<script type="text/javascript">
    		$(function(){ 
    			$("#datagrid").datagrid({
    				pagination:true,
    				rownumbers:true,
    				emptyMsg:"列表为空",
    				method:'get'
    			}).datagrid("loadData",{rows:[],total:0});
    		});
    	</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220403/a507838f6fff48fc9fb96be1a331148e.png
[20181224115532279.png]: /images/20220403/a4ce30b1c59649fc931e5d5dd45a778f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220403/e62a1c9b417a4364a2c5cf11f0fefd05.png
[20181224115739678.png]: /images/20220403/768ef1f9f56d42fd81f8331a3540a418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: /images/20220403/dc3f8901672e4e78b04906fcad6f916f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3]: /images/20220403/d274a35bff654e0f932f49b889c1cd01.png