EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: tomhj on July 01, 2013, 02:49:34 PM



Title: Displaying 'no records loaded' message in empty datagrid
Post by: tomhj 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).


Title: Re: Displaying 'no records loaded' message in empty datagrid
Post by: stworthy 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'
});


Title: Re: Displaying 'no records loaded' message in empty datagrid
Post by: tomhj 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?


Title: Re: Displaying 'no records loaded' message in empty datagrid
Post by: tomhj 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>


Title: Re: Displaying 'no records loaded' message in empty datagrid
Post by: mw515 on April 08, 2014, 08:46:00 PM
我测试了一下,在没有设定div的高度时,不能显示,设定了之后,才显示 "no records",

是这样的吗?