首先，确保你已经引入了jQuery和EasyUI的相关文件。然后，你可以创建一个包含工具栏的EasyUI组件，比如datagrid。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Toolbar 示例</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 EasyUI 样式和脚本文件 -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 创建一个包含工具栏的 EasyUI Datagrid -->
<table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
url="your_data_url"
toolbar="#toolbar"
pagination="true"
rownumbers="true"
fitColumns="true"
singleSelect="true">
<thead>
<tr>
<!-- 列定义 -->
<th field="field1" width="50">列1</th>
<th field="field2" width="50">列2</th>
<!-- 添加更多列... -->
</tr>
</thead>
</table>
<!-- 定义工具栏 -->
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addRow()">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRow()">编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a>
</div>
<!-- JavaScript 部分 -->
<script type="text/javascript">
// JavaScript 代码
// 示例：添加行
function addRow() {
// 实现添加行的逻辑
}
// 示例：编辑行
function editRow() {
// 实现编辑行的逻辑
}
// 示例：删除行
function removeRow() {
// 实现删除行的逻辑
}
</script>
</body>
</html>
上述代码中，toolbar属性被设置为#toolbar，这意味着工具栏的内容将从id为"toolbar"的div中获取。在这个例子中，工具栏包含了三个按钮，分别用于添加、编辑和删除行。你需要根据实际需求实现这些按钮的点击事件相应的逻辑。
转载请注明出处：http://www.pingtaimeng.com/article/detail/13106/jQuery EasyUI