EasyUI Forum
December 03, 2020, 09:36:41 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Displaying 'no records loaded' message in empty datagrid  (Read 21795 times)
tomhj
Newbie
*
Posts: 40


View Profile
« on: July 01, 2013, 02:49:34 PM »

Is there a way to have a datagrid display a message inside the datagrid when there are no rows loaded?  Something like "no records found" - but the message would be provided or overridden by a property like emptyMsg (similar in concept to loadMsg).
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3576


View Profile Email
« Reply #1 on: July 01, 2013, 07:04:39 PM »

Here is the solution by extending datagrid view.
Code:
<script>
var myview = $.extend({},$.fn.datagrid.defaults.view,{
onAfterRender:function(target){
$.fn.datagrid.defaults.view.onAfterRender.call(this,target);
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if (!$(target).datagrid('getRows').length){
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position:'absolute',
left:0,
top:50,
width:'100%',
textAlign:'center'
});
}
}
});
</script>

Apply datagrid with 'myview' and an optional property(emptyMsg).
Code:
$('#dg').datagrid({
  view: myview,
  emptyMsg: 'no records found'
});
Logged
tomhj
Newbie
*
Posts: 40


View Profile
« Reply #2 on: July 01, 2013, 09:26:15 PM »

Thanks - that works great for the case where the datagrid load returns no records.

But there are two cases that need to be addressed:

a)  adding a row with 'insertRow' doesn't remove the emptyMsg

b)  if the datagrid loads with data (and the empty message is not displayed) and then the last row is removed with 'deleteRow', the emptyMsg does not appear.

I could manually force the adjustment of the emptyMsg entry, but it would be much cleaner if I could extend the view or the datagrid to handle those cases automatically.  How can I do that?
Logged
tomhj
Newbie
*
Posts: 40


View Profile
« Reply #3 on: July 04, 2013, 10:22:41 PM »

I figured out how to handle both of those other cases by extending the custom view:
Code:
<script>
function refreshView(target) {
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if (!$(target).datagrid('getRows').length){
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position:'absolute',
left:0,
top:50,
width:'100%',
textAlign:'center'
});
}
}

var myview = $.extend({},$.fn.datagrid.defaults.view,{
onAfterRender:function(target){
$.fn.datagrid.defaults.view.onAfterRender.call(this,target);
refreshView(target);
},
insertRow: function(target, index, row) {
$.fn.datagrid.defaults.view.insertRow.call(this, target, index, row);
refreshEmpty(target);
},
deleteRow: function(target, index) {
$.fn.datagrid.defaults.view.deleteRow.call(this, target, index);
refreshEmpty(target);
}
});
</script>
Logged
mw515
Newbie
*
Posts: 2


View Profile Email
« Reply #4 on: April 08, 2014, 08:46:00 PM »

我测试了一下,在没有设定div的高度时,不能显示,设定了之后,才显示 "no records",

是这样的吗?
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!