jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示
在使用jQuery EasyUI的datagrid组件时,如果数据源为空或没有记录,你可以通过监听datagrid的loadsuccess
事件来检查是否有数据,并显示一个提示信息。以下是一个简单的实现方法:
$('#your-datagrid').datagrid({
url: 'your-data-source',
// 其他datagrid配置...
}).datagrid('getPanel').panel('append', '<div class="datagrid-empty">暂无数据</div>');
$('#your-datagrid').datagrid({
onLoadSuccess: function(data){
if (data.total == 0) {
var panel = $(this).datagrid('getPanel');
var emptyMsg = panel.find('.datagrid-empty');
if (emptyMsg.length == 0) {
panel.append('<div class="datagrid-empty">暂无数据</div>');
}
emptyMsg.show();
} else {
$('.datagrid-empty').hide();
}
}
});
在上述代码中,我们首先初始化了datagrid,并为它添加了一个loadsuccess
事件处理函数。当数据加载成功后,我们检查total
字段(这取决于你的数据格式,可能是total
或者是其他表示总数的字段)。如果总数为0,即没有记录,我们在datagrid面板中查找或创建一个带有datagrid-empty
类的提示信息,并显示它。如果有记录,我们隐藏提示信息。
评论已关闭