<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>easyUI 数据表格datagrid的使用</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="js/easyui/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" href="js/easyui/themes/icon.css"/>
</head>
<body>
<table id="grid"></table>
</body>
<script type="text/javascript">
$(function(){
$("#grid").datagrid({
columns:[[
{
field:"id",
title:"商品编号",
width:100
},
{
field:"name",
title:"商品名称",
width:100
},
{
field:"price",
title:"商品价格",
width:100
}
]],
url:"product.json",
pagination:true,//分页
toolbar:[
{
id:"saveBtn",
text:"保存",
iconCls:"icon-save",
handler:function(){
alert("这是保存操作")
}
},
{
id:"exportBtn",
text:"导出",
iconCls:"icon-save",
handler:function(){
alert("这是导出操作")
}
},
]
});
});
</script>
</html>
