jQuery EasyUI 数据网格 - 添加工具栏
jQuery EasyUI 数据网格 - 添加工具栏（Toolbar）
datagrid的toolbar是最常用的扩展区域，用于放置新增、编辑、删除、查询、导出等操作按钮，以及搜索框、分页自定义等控件。EasyUI 支持两种方式添加工具栏：
- HTML 定义工具栏（推荐，最灵活）
- JavaScript 配置工具栏（适合动态生成）
本教程演示最常用的 HTML 方式，并结合实际 CRUD 操作按钮。
官方参考：
- 教程：https://www.jeasyui.com/tutorial/datagrid/datagrid4.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Toolbar
步骤 1: 引入 EasyUI 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建 DataGrid 和工具栏 DIV
<!-- 工具栏（单独定义一个 div） --><divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="newUser()">新增</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-edit"plain="true"onclick="editUser()">编辑</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="deleteUser()">删除</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="reload()">刷新</a><spanstyle="margin-left:20px;">|</span><inputid="search_name"class="easyui-textbox"prompt="输入姓名搜索"style="width:150px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-search"plain="true"onclick="doSearch()">搜索</a></div><!-- 数据网格 --><tableid="dg"class="easyui-datagrid"title="用户管理"style="width:800px;height:500px"data-options="url:'get_users.php',fitColumns:true,singleSelect:true,pagination:true,rownumbers:true,toolbar:'#toolbar'"><thead><tr><thfield="id"width="80">ID</th><thfield="username"width="100">用户名</th><thfield="name"width="100">姓名</th><thfield="email"width="180">邮箱</th><thfield="phone"width="120">电话</th><thfield="regdate"width="100">注册日期</th></tr></thead></table>步骤 3: JavaScript 操作函数
<scripttype="text/javascript">// 新增functionnewUser(){// 打开 dialog 或跳转页面$.messager.alert('操作','打开新增窗口');}// 编辑functioneditUser(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.alert('编辑','编辑用户：'+row.name+' (ID: '+row.id+')');// 实际可打开 dialog 并 load 数据}else{$.messager.alert('提示','请先选择一行！');}}// 删除functiondeleteUser(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('确认','确定删除用户 '+row.name+' 吗？',function(r){if(r){// $.post('delete_user.php', {id:row.id}, function(result){ ... });$('#dg').datagrid('reload');// 模拟刷新$.messager.show({title:'成功',msg:'删除成功'});}});}else{$.messager.alert('提示','请先选择一行！');}}// 刷新functionreload(){$('#dg').datagrid('reload');}// 搜索functiondoSearch(){$('#dg').datagrid('load',{name:$('#search_name').val()});}</script>关键说明
- toolbar:‘#toolbar’：datagrid 的
data-options中指定工具栏 div 的 ID。 - plain=“true”：按钮简洁风格（无背景），适合工具栏。
- 搜索功能：通过
$('#dg').datagrid('load', {param:value})传递参数给后端。 - 工具栏布局：可以使用
<div>、表格、或easyui-panel包裹多个行工具栏。
扩展：多行工具栏 + 分隔线
<divid="toolbar"style="padding:5px;"><div><ahref="#"class="easyui-linkbutton"iconCls="icon-add"plain="true">新增</a><ahref="#"class="easyui-linkbutton"iconCls="icon-edit"plain="true">编辑</a><ahref="#"class="easyui-linkbutton"iconCls="icon-remove"plain="true">删除</a></div><divstyle="margin-top:5px;">姓名:<inputclass="easyui-textbox"style="width:120px;">日期:<inputclass="easyui-datebox"style="width:100px;"><ahref="#"class="easyui-linkbutton"iconCls="icon-search">查询</a></div></div>完整效果
- 工具栏紧贴在 datagrid 标题栏下方。
- 按钮美观、带图标、响应点击。
- 支持搜索、增删改查等完整 CRUD 操作基础。
更多示例：
- 官方工具栏示例：https://www.jeasyui.com/tutorial/datagrid/datagrid4.php
- 自定义工具栏按钮：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Custom+Toolbar
如果需要导出 Excel、自定义分页器、工具栏放入 dialog或动态生成工具栏按钮，请继续提问！