一个两种方法供选择,一种是扩展view视图方法,另一种是利用onloadsuccess事件,两种方法全凭个人喜好。
onLoadSuccess : function(data) { if (data.total == 0) { var body = $(this).data().datagrid.dc.body2; console.info(body); body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>'); } }
扩展默认view视图。如下:
<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>
使用方法:
使用datagrid myview”和一个可选的属性(emptyMsg)。
$('#dg').datagrid({ view: myview, emptyMsg: 'no records found' });