<1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
<link href="easyui.css" rel="stylesheet" type="text/css" />
<link href="icon.css" rel="stylesheet" type="text/css" />
<link href="demo.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.2.js" type="text/javascript"></script>
<script src="jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<h2>DataGrid with Toolbar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Put buttons on top toolbar of DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="DataGrid with Toolbar" style="width:700px;height:250px" data-options="rownumbers:true,singleSelect:true,url:'../datagrid/datagrid_data1.json',toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'itemid',width:80,align:'left'">编号</th>
<th data-options="field:'productid',width:100,align:'left'">姓名</th>
<th data-options="field:'listprice',width:80,align:'left'">年龄</th>
<th data-options="field:'unitcost',width:80,align:'left'">籍贯</th>
<th data-options="field:'attr1',width:80,align:'left'">性别</th>
<th data-options="field:'status',width:250,align:'left'">地址</th>
</tr>
</thead>
</table>
</body>
</html>
</body>
<script type="text/javascript">
var toolbar = [{
text: '添加',
iconCls: 'icon-add',
handler: function () { alert('添加') }
}, '-', //这个'-'的效果是将各个字段用 |隔开
{
text: '删除',
iconCls: 'icon-remove',
handler: function () { alert('删除') }
}, '-',
{
text: '剪切',
iconCls: 'icon-cut',
handler: function () { alert('剪切') }
}, '-',
{
text: '编辑',
iconCls: 'icon-edit',
handler: function () { alert('编辑') }
}, '-',
{
text: '保存',
iconCls: 'icon-save',
handler: function () { alert('保存') }
}];
</script>
</html>
原文：http://blog.csdn.net/fanbin168/article/details/43032317