jQuery EasyUI 数据网格 - 创建复杂工具栏-平芜编程栈

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 资源

<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: 创建复杂工具栏（多行 + 多种控件）

<!-- 复杂工具栏 --><divid="toolbar"style="padding:8px;background:#fafafa;border-bottom:1px solid #ddd;"><!-- 第一行：主要操作按钮 + 下拉菜单 --><divstyle="margin-bottom:6px;"><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-splitbutton"data-options="menu:'#exportMenu',iconCls:'icon-export',plain:true">导出</a><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#moreMenu',iconCls:'icon-more',plain:true">更多操作</a><spanclass="toolbar-separator"style="margin:0 10px;color:#ccc;">|</span><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="reload()">刷新</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-tip"plain="true"onclick="showHelp()">帮助</a></div><!-- 第二行：高级搜索 + 状态显示 --><divstyle="margin-top:6px;"><span>用户名：</span><inputid="search_username"class="easyui-textbox"style="width:120px;"prompt="模糊搜索"><spanstyle="margin-left:10px;">状态：</span><selectid="search_status"class="easyui-combobox"style="width:100px;"data-options="panelHeight:'auto'"><optionvalue="">全部</option><optionvalue="1">启用</option><optionvalue="0">禁用</option></select><spanstyle="margin-left:10px;">注册日期：</span><inputid="search_start"class="easyui-datebox"style="width:110px;"><span>~</span><inputid="search_end"class="easyui-datebox"style="width:110px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-search"style="margin-left:10px;"onclick="doSearch()">查询</a><ahref="javascript:void(0)"class="easyui-linkbutton"plain="true"onclick="clearSearch()">清空</a><!-- 右侧状态信息 --><divstyle="float:right;color:#666;font-size:12px;line-height:28px;">共<spanid="totalCount">0</span>条记录 已选中<spanid="selectedCount">0</span>条</div><divstyle="clear:both;"></div></div></div><!-- 导出下拉菜单 --><divid="exportMenu"class="easyui-menu"style="width:120px;"><divonclick="exportExcel()">导出 Excel</div><divonclick="exportPDF()">导出 PDF</div><divonclick="exportCSV()">导出 CSV</div></div><!-- 更多操作菜单 --><divid="moreMenu"class="easyui-menu"style="width:150px;"><diviconCls="icon-lock">批量启用</div><diviconCls="icon-unlock">批量禁用</div><divclass="menu-sep"></div><diviconCls="icon-email">发送邮件</div></div><!-- 数据网格 --><tableid="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><thfield="ck"checkbox="true"></th><thfield="id"width="80">ID</th><thfield="username"width="100">用户名</th><thfield="name"width="100">姓名</th><thfield="email"width="180">邮箱</th><thfield="status"width="80"formatter="formatStatus">状态</th><thfield="regdate"width="100">注册日期</th></tr></thead></table>

步骤 3: JavaScript 实现复杂功能

<scripttype="text/javascript">$(function(){// 加载完成后更新总数$('#dg').datagrid({onLoadSuccess:function(data){$('#totalCount').text(data.total);},onSelect:updateSelectedCount,onUnselect:updateSelectedCount,onSelectAll:updateSelectedCount,onUnselectAll:updateSelectedCount});functionupdateSelectedCount(){varrows=$('#dg').datagrid('getSelections');$('#selectedCount').text(rows.length);}});// 查询functiondoSearch(){$('#dg').datagrid('load',{username:$('#search_username').val(),status:$('#search_status').combobox('getValue'),startdate:$('#search_start').datebox('getValue'),enddate:$('#search_end').datebox('getValue')});}// 清空搜索functionclearSearch(){$('#search_username').textbox('clear');$('#search_status').combobox('setValue','');$('#search_start').datebox('clear');$('#search_end').datebox('clear');$('#dg').datagrid('load',{});}// 状态格式化functionformatStatus(value){returnvalue==1?'<span style="color:green;">启用</span>':'<span style="color:red;">禁用</span>';}// 导出示例functionexportExcel(){$.messager.alert('导出','正在导出为 Excel...');}functionexportPDF(){$.messager.alert('导出','正在导出为 PDF...');}// 其他操作functionnewUser(){$.messager.alert('新增','打开新增窗口');}functioneditUser(){$.messager.alert('编辑','打开编辑窗口');}functiondeleteUser(){$.messager.confirm('确认','确定删除选中记录吗？',function(r){if(r){$.messager.show({title:'成功',msg:'删除成功'});}});}functionreload(){$('#dg').datagrid('reload');}functionshowHelp(){$.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

如果需要导入功能、自定义分页器、权限控制显示按钮、或响应式工具栏，请继续提问！