jQuery EasyUI 数据网格 – 创建复杂工具栏
datagrid 的工具栏（toolbar）支持非常灵活的布局，可以创建包含多行按钮、分隔线、下拉菜单、搜索框、分页自定义、状态显示等的复杂工具栏。这在实际后台管理系统中非常常见，能让操作区更专业、功能更丰富。
官方参考：
- 复杂工具栏示例：https://www.jeasyui.com/tutorial/datagrid/datagrid5.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Custom+Toolbar
步骤 1: 引入 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://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建复杂工具栏（多行 + 多种控件）
<!-- 复杂工具栏 -->
<div id="toolbar" style="padding:8px;background:#fafafa;border-bottom:1px solid #ddd;">
<!-- 第一行：主要操作按钮 + 下拉菜单 -->
<div style="margin-bottom:6px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除</a>
<a href="javascript:void(0)" class="easyui-splitbutton"
data-options="menu:'#exportMenu',iconCls:'icon-export',plain:true">导出</a>
<a href="javascript:void(0)" class="easyui-menubutton"
data-options="menu:'#moreMenu',iconCls:'icon-more',plain:true">更多操作</a>
<span class="toolbar-separator" style="margin:0 10px;color:#ccc;">|</span>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">刷新</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-tip" plain="true" onclick="showHelp()">帮助</a>
</div>
<!-- 第二行：高级搜索 + 状态显示 -->
<div style="margin-top:6px;">
<span>用户名：</span>
<input id="search_username" class="easyui-textbox" style="width:120px;" prompt="模糊搜索">
<span style="margin-left:10px;">状态：</span>
<select id="search_status" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'">
<option value="">全部</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
<span style="margin-left:10px;">注册日期：</span>
<input id="search_start" class="easyui-datebox" style="width:110px;">
<span>~</span>
<input id="search_end" class="easyui-datebox" style="width:110px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" style="margin-left:10px;" onclick="doSearch()">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="clearSearch()">清空</a>
<!-- 右侧状态信息 -->
<div style="float:right;color:#666;font-size:12px;line-height:28px;">
共 <span id="totalCount">0</span> 条记录
已选中 <span id="selectedCount">0</span> 条
</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- 导出下拉菜单 -->
<div id="exportMenu" class="easyui-menu" style="width:120px;">
<div onclick="exportExcel()">导出 Excel</div>
<div onclick="exportPDF()">导出 PDF</div>
<div onclick="exportCSV()">导出 CSV</div>
</div>
<!-- 更多操作菜单 -->
<div id="moreMenu" class="easyui-menu" style="width:150px;">
<div iconCls="icon-lock">批量启用</div>
<div iconCls="icon-unlock">批量禁用</div>
<div class="menu-sep"></div>
<div iconCls="icon-email">发送邮件</div>
</div>
<!-- 数据网格 -->
<table id="dg" class="easyui-datagrid" title="用户管理" style="width:100%;height:500px"
data-options="url:'get_users.php',fitColumns:true,singleSelect:false,pagination:true,rownumbers:true,toolbar:'#toolbar'">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th field="id" width="80">ID</th>
<th field="username" width="100">用户名</th>
<th field="name" width="100">姓名</th>
<th field="email" width="180">邮箱</th>
<th field="status" width="80" formatter="formatStatus">状态</th>
<th field="regdate" width="100">注册日期</th>
</tr>
</thead>
</table>步骤 3: JavaScript 实现复杂功能
<script type="text/javascript">
$(function(){
// 加载完成后更新总数
$('#dg').datagrid({
onLoadSuccess: function(data){
$('#totalCount').text(data.total);
},
onSelect: updateSelectedCount,
onUnselect: updateSelectedCount,
onSelectAll: updateSelectedCount,
onUnselectAll: updateSelectedCount
});
function updateSelectedCount(){
var rows = $('#dg').datagrid('getSelections');
$('#selectedCount').text(rows.length);
}
});
// 查询
function doSearch(){
$('#dg').datagrid('load',{
username: $('#search_username').val(),
status: $('#search_status').combobox('getValue'),
startdate: $('#search_start').datebox('getValue'),
enddate: $('#search_end').datebox('getValue')
});
}
// 清空搜索
function clearSearch(){
$('#search_username').textbox('clear');
$('#search_status').combobox('setValue', '');
$('#search_start').datebox('clear');
$('#search_end').datebox('clear');
$('#dg').datagrid('load',{});
}
// 状态格式化
function formatStatus(value){
return value == 1 ? '<span style="color:green;">启用</span>' : '<span style="color:red;">禁用</span>';
}
// 导出示例
function exportExcel(){
$.messager.alert('导出', '正在导出为 Excel...');
}
function exportPDF(){
$.messager.alert('导出', '正在导出为 PDF...');
}
// 其他操作
function newUser(){ $.messager.alert('新增', '打开新增窗口'); }
function editUser(){ $.messager.alert('编辑', '打开编辑窗口'); }
function deleteUser(){ $.messager.confirm('确认','确定删除选中记录吗？',function(r){if(r){$.messager.show({title:'成功',msg:'删除成功'});}}); }
function reload(){ $('#dg').datagrid('reload'); }
function showHelp(){ $.messager.alert('帮助', '这是帮助信息'); }
</script>关键特性总结
- 多行布局：使用
<div>分隔多行工具。 - 下拉菜单：使用
splitbutton和menubutton实现导出、更多操作。 - 搜索区：多个输入框 + 查询/清空按钮。
- 状态显示：实时显示总记录数和选中数。
- 美化：使用
plain="true"、分隔线、浮动布局。
效果
一个专业、功能齐全的复杂工具栏，支持：
- CRUD 操作
- 批量导出（下拉选择格式）
- 高级多条件搜索
- 实时状态统计
- 更多扩展操作
更多示例：
- 官方复杂工具栏：https://www.jeasyui.com/tutorial/datagrid/datagrid5.php
- 自定义分页器 + 工具栏：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Custom+Pager
如果需要导入功能、自定义分页器、权限控制显示按钮、或响应式工具栏，请继续提问！
