jquery-easyui-1.3.2 easyui-datagrid通过url当查询到没有数据时,如何设置显示“没有相关记录”?
设置onLoadSuccess函数:
function onLoadSuccess(data){
if(data.total==0)
alert("没有数据!");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<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'
});
}
}
});
$(function(){
var list=[];//数据列表为空
$('#dg').datagrid({
data: list,
view: myview,
emptyMsg: 'no records found'
});
})
</script>
</head>
<body>
<h2>Basic DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The DataGrid is created from markup, no JavaScript code needed.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Surveys" class="easyui-datagrid" style="width:550px;height:250px" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="20">Id</th>
<th field="name" width="50">Name</th>
<th field="number" width="50">Number</th>
<th field="description" width="50">Description</th>
</tr>
</thead>
</table>
</body>
</html>