下面直接给你最实用、最专业的自定义带有工具条（toolbar）和按钮（buttons）的对话框方法，jQuery EasyUI 的 dialog 组件完美支持同时设置顶部工具栏 + 底部按钮栏，复制粘贴就能做出领导最爱的“专业表单弹窗”（搜索、新增、刷新 + 保存、取消），超级标准！
完整示例：自定义带工具条和按钮的对话框（推荐直接复制使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 自定义对话框</title>
<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>
</head>
<body>
<!-- 顶部工具栏 -->
<div id="dlg-toolbar" style="padding:8px 12px;border-bottom:1px solid #ddd;background:#fafafa;">
<div style="float:left;">
<input id="searchName" class="easyui-textbox" prompt="输入姓名搜索" style="width:200px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>
</div>
<div style="float:right;">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-add" plain="true" onclick="addUser()">新增用户</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadGrid()">刷新</a>
<a href="javascript:void(0)" class="easyui-linkbutton c8" iconCls="icon-help" plain="true" onclick="showHelp()">帮助</a>
</div>
<div style="clear:both;"></div>
</div>
<!-- 底部按钮栏 -->
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-save" onclick="saveChanges()">保存修改</a>
</div>
<!-- 对话框主体 -->
<div id="dlg" class="easyui-dialog" title="用户管理（带工具条和按钮）" style="width:900px;height:600px;padding:10px;"
data-options="
iconCls:'icon-man',
modal:true,
closed:true,
maximizable:true,
resizable:true,
toolbar:'#dlg-toolbar', <!-- 顶部工具栏 -->
buttons:'#dlg-buttons' <!-- 底部按钮栏 -->
">
<!-- 对话框内容：一个datagrid -->
<table id="userGrid" class="easyui-datagrid" style="width:100%;height:100%;"
data-options="
url:'data/users.json', <!-- 替换成你的接口 -->
fitColumns:true,
singleSelect:false,
pagination:true,
rownumbers:true,
border:false
">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:80">ID</th>
<th data-options="field:'name',width:120,editor:'textbox'">姓名</th>
<th data-options="field:'email',width:200,editor:'validatebox'">邮箱</th>
<th data-options="field:'status',width:80,
editor:{type:'combobox',options:{data:[{value:'启用',text:'启用'},{value:'禁用',text:'禁用'}],valueField:'value',textField:'text'}}">
状态
</th>
<th data-options="field:'regdate',width:120">注册日期</th>
</tr>
</thead>
</table>
</div>
<!-- 打开对话框的按钮 -->
<div style="padding:30px;text-align:center;">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-window" style="width:200px;height:40px;"
onclick="$('#dlg').dialog('open').dialog('center')">打开自定义对话框</a>
</div>
<script>
// 工具栏功能
function doSearch(){
var name = $('#searchName').textbox('getValue');
$('#userGrid').datagrid('load', {name: name});
}
function reloadGrid(){
$('#userGrid').datagrid('reload');
}
function addUser(){
// 示例：新增一行（实际可弹另一个新增窗口）
$('#userGrid').datagrid('appendRow', {
name: '新用户',
email: 'example@domain.com',
status: '启用',
regdate: new Date().toLocaleDateString()
});
}
function showHelp(){
$.messager.alert('帮助','这是一个带有顶部工具栏和底部按钮的专业对话框！','info');
}
// 底部按钮功能
function saveChanges(){
// 获取所有修改的行
var changed = $('#userGrid').datagrid('getChanges');
if(changed.length == 0){
$.messager.alert('提示','没有修改任何数据！');
return;
}
$.messager.confirm('确认','确定保存这 '+changed.length+' 条修改吗？',function(r){
if(r){
// 这里发ajax保存
console.log('保存数据：', changed);
$.messager.show({title:'成功',msg:'保存完成！',timeout:2000});
$('#userGrid').datagrid('acceptChanges'); // 接受修改
$('#dlg').dialog('close');
}
});
}
</script>
</body>
</html>效果亮点：
- 顶部工具栏：搜索框 + 搜索/新增/刷新/帮助按钮（左左浮动，右右浮动）
- 底部按钮栏：标准“取消”和“保存修改”按钮
- 支持最大化、调整大小、拖拽、模态遮罩
- 内容区放完整 datagrid，支持行内编辑、分页等
- 打开时自动居中
其他变体快速实现：
- 只用JS定义工具条和按钮（动态创建时用）
$('#dlg').dialog({
toolbar: [{
iconCls:'icon-search', text:'搜索', handler:doSearch
},'-',{
iconCls:'icon-add', text:'新增', handler:addUser
}],
buttons: [{
text:'保存', iconCls:'icon-save', handler:saveChanges
},{
text:'取消', handler:function(){$('#dlg').dialog('close');}
}]
});- 工具条放更多控件（日期范围、组合筛选）
<div id="dlg-toolbar">
<input class="easyui-datebox" id="startDate" style="width:120px;"> ~
<input class="easyui-datebox" id="endDate" style="width:120px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchByDate()">查询</a>
</div>你现在直接复制上面的完整HTML代码保存为文件运行，就能看到一个超级专业的带工具条和按钮的EasyUI对话框了！
这已经是99%后台管理系统（如OA、CRM）的标准弹窗结构。
想要我再给你一个变体（比如：工具条带tabs切换、左树右表布局、或者纯表单的增改对话框）？
或者告诉我你具体想放什么功能，我2分钟改好发你，复制就能跑！
快说说你的需求，我手把手帮你搞定！
