您的位置：首页 > 产品设计 > UI/UE

easyui-datagrid未查询到数据时控件扩展

2014-07-10 10:39 459 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航