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

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

方法1：最简单最常用 – 在窗口顶部添加工具栏（推荐现在就用这个）

<!-- 定义工具栏div -->
<div id="win-toolbar" style="padding:5px 10px;border-bottom:1px solid #ddd;background:#f4f4f4;">
    <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" iconCls="icon-add" plain="true" onclick="addUser()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadData()">刷新</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="win" class="easyui-window" title="用户管理窗口（带自定义工具栏）" style="width:900px;height:600px;"
    data-options="
        iconCls:'icon-man',
        modal:true,
        closed:true,
        toolbar:'#win-toolbar'   <!-- 关键：指定工具栏 -->
    ">
    <!-- 窗口内容，比如一个datagrid -->
    <table id="userDg" class="easyui-datagrid" style="width:100%;height:100%;"
        data-options="url:'get_users.php',fitColumns:true,singleSelect:true,pagination:true">
        <thead>
            <tr>
                <th field="id" width="80">ID</th>
                <th field="name" width="120">姓名</th>
                <th field="email" width="200">邮箱</th>
                <th field="status" width="80">状态</th>
            </tr>
        </thead>
    </table>
</div>

<!-- 打开窗口按钮 -->
<div style="padding:20px;">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-window" onclick="$('#win').window('open')">打开带工具栏的窗口</a>
</div>

<script>
function doSearch(){
    var name = $('#searchName').textbox('getValue');
    $('#userDg').datagrid('load', {name: name});
}

function addUser(){
    alert('打开新增用户表单...');
    // 可以再弹一个子窗口
}

function reloadData(){
    $('#userDg').datagrid('reload');
}

function showHelp(){
    $.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，常用于保存/取消）

<div id="win-footer" style="text-align:right;padding:10px;border-top:1px solid #ddd;background:#f4f4f4;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#win').window('close')">取消</a>
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-save" onclick="saveData()">保存</a>
</div>

<!-- 在窗口data-options里添加 -->
<div id="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分钟内看到超级专业的自定义窗口工具栏！