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