这里写自定义目录标题
- 需求
- 解决办法
需求
使用datagrid显示记录时,结果查询记录数为0,此时需要显示无数据。
示例代码
<table id="dg"></table>
$('#dg').datagrid({url:'datagrid_data.json',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]
});
当url查询无数据时,显示无数据。
解决办法
重新定义view视图
var noDataView = $.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" style="background-color: #f3f3f3;"></div>').html(opts.emptyMsg || 'no data').appendTo(vc);d.css({position: 'absolute',left: 0,top: 20,width: '100%',textAlign: 'center'});}}});
使用该视图
$('#dg').datagrid({url:'datagrid_data.json',view: noDataView,emptyMsg:'没有记录',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]});