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