当前位置：首页 > news >正文

jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

news 2026/8/19 13:27:15

下面直接给你最实用、最专业的自定义带有工具条（toolbar）和按钮（buttons）的对话框方法，jQuery EasyUI 的dialog组件完美支持同时设置顶部工具栏+底部按钮栏，复制粘贴就能做出领导最爱的“专业表单弹窗”（搜索、新增、刷新 + 保存、取消），超级标准！

完整示例：自定义带工具条和按钮的对话框（推荐直接复制使用）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>EasyUI 自定义对话框</title><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></head><body><!-- 顶部工具栏 --><divid="dlg-toolbar"style="padding:8px 12px;border-bottom:1px solid #ddd;background:#fafafa;"><divstyle="float:left;"><inputid="searchName"class="easyui-textbox"prompt="输入姓名搜索"style="width:200px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-search"plain="true"onclick="doSearch()">搜索</a></div><divstyle="float:right;"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-add"plain="true"onclick="addUser()">新增用户</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="reloadGrid()">刷新</a><ahref="javascript:void(0)"class="easyui-linkbutton c8"iconCls="icon-help"plain="true"onclick="showHelp()">帮助</a></div><divstyle="clear:both;"></div></div><!-- 底部按钮栏 --><divid="dlg-buttons"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel"onclick="javascript:$('#dlg').dialog('close')">取消</a><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-save"onclick="saveChanges()">保存修改</a></div><!-- 对话框主体 --><divid="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 --><tableid="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><thdata-options="field:'ck',checkbox:true"></th><thdata-options="field:'id',width:80">ID</th><thdata-options="field:'name',width:120,editor:'textbox'">姓名</th><thdata-options="field:'email',width:200,editor:'validatebox'">邮箱</th><thdata-options="field:'status',width:80, editor:{type:'combobox',options:{data:[{value:'启用',text:'启用'},{value:'禁用',text:'禁用'}],valueField:'value',textField:'text'}}">状态</th><thdata-options="field:'regdate',width:120">注册日期</th></tr></thead></table></div><!-- 打开对话框的按钮 --><divstyle="padding:30px;text-align:center;"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-window"style="width:200px;height:40px;"onclick="$('#dlg').dialog('open').dialog('center')">打开自定义对话框</a></div><script>// 工具栏功能functiondoSearch(){varname=$('#searchName').textbox('getValue');$('#userGrid').datagrid('load',{name:name});}functionreloadGrid(){$('#userGrid').datagrid('reload');}functionaddUser(){// 示例：新增一行（实际可弹另一个新增窗口）$('#userGrid').datagrid('appendRow',{name:'新用户',email:'example@domain.com',status:'启用',regdate:newDate().toLocaleDateString()});}functionshowHelp(){$.messager.alert('帮助','这是一个带有顶部工具栏和底部按钮的专业对话框！','info');}// 底部按钮功能functionsaveChanges(){// 获取所有修改的行varchanged=$('#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');}}]});

工具条放更多控件（日期范围、组合筛选）

<divid="dlg-toolbar"><inputclass="easyui-datebox"id="startDate"style="width:120px;">~<inputclass="easyui-datebox"id="endDate"style="width:120px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-search"onclick="searchByDate()">查询</a></div>