news 2026/6/6 23:26:09

jQuery EasyUI 窗口 - 自定义窗口工具栏

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 窗口 - 自定义窗口工具栏

下面直接给你最实用、最常见的自定义窗口工具栏(toolbar)方法,jQuery EasyUI 的window组件支持超级灵活的工具栏设置,复制粘贴就能在窗口顶部添加搜索框、按钮、刷新、下拉等,领导最爱的“专业弹窗工具栏”效果全都有!

方法1:最简单最常用 - 在窗口顶部添加工具栏(推荐现在就用这个)

<!-- 定义工具栏div --><divid="win-toolbar"style="padding:5px 10px;border-bottom:1px solid #ddd;background:#f4f4f4;"><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"iconCls="icon-add"plain="true"onclick="addUser()">新增</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="reloadData()">刷新</a><ahref="javascript:void(0)"class="easyui-linkbutton c8"iconCls="icon-help"plain="true"onclick="showHelp()">帮助</a></div><divstyle="clear:both;"></div></div><!-- 窗口主体 --><divid="win"class="easyui-window"title="用户管理窗口(带自定义工具栏)"style="width:900px;height:600px;"data-options="iconCls:'icon-man', modal:true, closed:true, toolbar:'#win-toolbar'<!-- 关键:指定工具栏 -->"><!-- 窗口内容,比如一个datagrid --><tableid="userDg"class="easyui-datagrid"style="width:100%;height:100%;"data-options="url:'get_users.php',fitColumns:true,singleSelect:true,pagination:true"><thead><tr><thfield="id"width="80">ID</th><thfield="name"width="120">姓名</th><thfield="email"width="200">邮箱</th><thfield="status"width="80">状态</th></tr></thead></table></div><!-- 打开窗口按钮 --><divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-window"onclick="$('#win').window('open')">打开带工具栏的窗口</a></div><script>functiondoSearch(){varname=$('#searchName').textbox('getValue');$('#userDg').datagrid('load',{name:name});}functionaddUser(){alert('打开新增用户表单...');// 可以再弹一个子窗口}functionreloadData(){$('#userDg').datagrid('reload');}functionshowHelp(){$.messager.alert('帮助','这是一个带工具栏的EasyUI窗口示例!','info');}</script>

效果:窗口顶部出现一个灰色工具栏,左边搜索框+搜索按钮,右边新增/刷新/帮助按钮,超级专业!

方法2:JS动态设置工具栏(更灵活)

$('#win').window({title:'动态工具栏窗口',width:800,height:500,modal:true,closed:true,toolbar:[{// 直接用对象数组定义工具栏iconCls:'icon-search',text:'搜索',handler:function(){alert('搜索功能');}},'-',{// '-' 是分隔线iconCls:'icon-add',text:'新增',handler:function(){alert('新增功能');}},{iconCls:'icon-remove',text:'删除',handler:function(){alert('删除功能');}}]});

方法3:窗口底部添加按钮栏(footer,常用于保存/取消)

<divid="win-footer"style="text-align:right;padding:10px;border-top:1px solid #ddd;background:#f4f4f4;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel"onclick="$('#win').window('close')">取消</a><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-save"onclick="saveData()">保存</a></div><!-- 在窗口data-options里添加 --><divid="win"class="easyui-window"...data-options="..., footer:'#win-footer'"><!-- 内容 --></div>

方法4:同时设置顶部工具栏 + 底部按钮栏

data-options=" toolbar:'#win-toolbar',footer:'#win-footer'"

你现在直接复制方法1的完整代码到你的页面,刷新一下就能看到窗口顶部有完美自定义工具栏的效果了!
结合之前的 datagrid(双击行打开编辑窗口 + 工具栏搜索/刷新),你的后台弹窗功能已经完全专业级了。

想要我给你一个完整的HTML示例(带工具栏搜索 + 新增弹窗 + 底部保存按钮 + 远程加载datagrid)?
或者你告诉我你想在工具栏放什么功能(比如“导出Excel”“批量删除”“切换视图”“日期范围筛选”),我2分钟发你精准代码,复制就能跑!

快说说你的具体需求,我手把手帮你搞定,5分钟内看到超级专业的自定义窗口工具栏!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/6 7:28:13

ECI国际艾奇奖携手华为鲸鸿动能,共启数字创新价值新纪元

华为鲸鸿动能 2025年12月6日&#xff0c;全球数字创新领域标杆奖项ECI国际艾奇奖&#xff08;ECIAwards&#xff09;年度终审会在华为上海青浦全球研发中心举办。本届大会以“定义未来”为主题&#xff0c;联合华为旗下基于鸿蒙生态的全场景智慧营销平台“鲸鸿动能”&#xff0…

作者头像 李华
网站建设 2026/6/4 2:12:22

华为Mate 80鸿蒙6.0恢复推送:iOS互传+广告拦截双实用功能上线

华为鸿蒙系统 华为Mate80系列鸿蒙6.0重磅升级&#xff1a;支持iOS跨生态互传&#xff0c;拦截摇一摇广告&#xff0c;相机、图库体验全面优化&#xff0c;系统更流畅安全。 12月15日消息&#xff0c;华为Mate80系列恢复推送鸿蒙HarmonyOS6.0.0.120SP9版本更新&#xff08;更新包…

作者头像 李华
网站建设 2026/6/3 15:17:41

传统抢票VS脚本抢票:效率对比实测分析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 设计一个测试方案&#xff0c;比较手动操作和脚本抢票的效率。脚本需要记录从开始到成功下单的时间、尝试次数、成功率和被封禁风险。手动操作部分模拟用户典型行为&#xff08;如刷…

作者头像 李华
网站建设 2026/6/6 20:30:11

City-Roads城市道路可视化终极指南:重新定义城市数据探索

City-Roads城市道路可视化终极指南&#xff1a;重新定义城市数据探索 【免费下载链接】city-roads Visualization of all roads within any city 项目地址: https://gitcode.com/gh_mirrors/ci/city-roads City-Roads是一款革命性的城市道路网络可视化工具&#xff0c;通…

作者头像 李华
网站建设 2026/6/2 11:38:43

企业级Docker私有镜像仓库实战指南

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个企业级Docker私有镜像仓库解决方案&#xff0c;基于Harbor实现。包含以下功能&#xff1a;1) 一键部署Harbor服务&#xff1b;2) 多租户权限管理界面&#xff1b;3) 镜像同…

作者头像 李华
网站建设 2026/6/7 2:13:48

MuJoCo物理仿真终极指南:闭环机构约束优化与工程实战技巧

MuJoCo物理仿真终极指南&#xff1a;闭环机构约束优化与工程实战技巧 【免费下载链接】mujoco Multi-Joint dynamics with Contact. A general purpose physics simulator. 项目地址: https://gitcode.com/GitHub_Trending/mu/mujoco 你是否遇到过精心设计的机械臂在仿真…

作者头像 李华