jQuery EasyUI 窗口 – 窗口与布局

下面直接给你最实用、最常见的EasyUI 窗口（window）与布局（layout）完美结合方法，很多后台系统里领导最爱的“弹出一个带北（工具栏）、中（主内容）、南（按钮栏）布局的完整窗口”全都有，复制粘贴就能用，超级专业！

方法1：最推荐 – 窗口内嵌入完整 layout 布局（北中南东西全支持）

<!-- 窗口主体 -->
<div id="win" class="easyui-window" title="窗口内嵌布局示例" style="width:900px;height:600px;padding:0;"
    data-options="
        iconCls:'icon-layout',
        modal:true,
        closed:true,
        maximizable:true,
        minimizable:false,
        collapsible:false
    ">

    <!-- 窗口内部使用 easyui-layout 布局 -->
    <div class="easyui-layout" data-options="fit:true">

        <!-- 北：工具栏区域 -->
        <div data-options="region:'north',split:false,border:false" style="height:60px;padding:10px;background:#f4f4f4;">
            <div style="float:left;">
                <input id="searchKey" class="easyui-textbox" prompt="输入关键字搜索" style="width:250px;">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadGrid()">刷新</a>
            </div>
            <div style="float:right;">
                <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-add" plain="true" onclick="addNew()">新增</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>

        <!-- 中：主内容区域（放datagrid） -->
        <div data-options="region:'center',border:false" style="padding:5px;background:#fff;">
            <table id="dataGrid" class="easyui-datagrid" style="width:100%;height:100%;"
                data-options="
                    url:'get_data.php',
                    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:150">名称</th>
                        <th data-options="field:'status',width:100">状态</th>
                        <th data-options="field:'date',width:120">日期</th>
                    </tr>
                </thead>
            </table>
        </div>

        <!-- 南：底部状态栏 + 操作按钮 -->
        <div data-options="region:'south',split:false,border:false" style="height:50px;padding:10px;background:#f4f4f4;text-align:right;">
            <span style="float:left;line-height:30px;color:#666;">
                已选中 <span id="selectedCount" style="font-weight:bold;color:red;">0</span> 条记录
            </span>
            <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="saveAll()">保存</a>
        </div>

    </div>
</div>

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

<script>
function doSearch(){
    var key = $('#searchKey').textbox('getValue');
    $('#dataGrid').datagrid('load',{q:key});
}

function reloadGrid(){
    $('#dataGrid').datagrid('reload');
}

function addNew(){
    alert('打开新增表单...');
}

function showHelp(){
    $.messager.alert('帮助','这是一个窗口内嵌完整布局的示例！','info');
}

function saveAll(){
    $.messager.confirm('确认','确定保存所有修改吗？',function(r){
        if(r){
            $.messager.show({title:'成功',msg:'保存完成！',timeout:2000});
            $('#win').window('close');
        }
    });
}

// 监听选中变化，更新底部计数
$('#dataGrid').datagrid({
    onCheck: updateSelectedCount,
    onUncheck: updateSelectedCount,
    onCheckAll: updateSelectedCount,
    onUncheckAll: updateSelectedCount
});

function updateSelectedCount(){
    var rows = $('#dataGrid').datagrid('getChecked');
    $('#selectedCount').text(rows.length);
}
</script>

效果：

• 弹出一个可最大化、可拖拽的模态窗口
• 内部完美分为：顶部工具栏（搜索+按钮）、中间主表格、全屏自适应，底部状态+操作按钮
• 完全响应式，调整窗口大小时布局自动适应

方法2：窗口内左右布局（左树 + 右表格，经典管理界面）

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true,title:'菜单树',iconCls:'icon-tree'" style="width:250px;">
        <ul id="menuTree" class="easyui-tree" data-options="url:'get_tree.php',lines:true"></ul>
    </div>
    <div data-options="region:'center'">
        <table id="rightGrid" class="easyui-datagrid">...</table>
    </div>
</div>

方法3：窗口内 tabs + layout 组合（多标签页管理）

<div data-options="region:'center'">
    <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false">
        <div title="基本信息">内容1</div>
        <div title="详细设置" data-options="href:'detail.php'"></div>
        <div title="日志记录">内容3</div>
    </div>
</div>

你现在直接复制方法1的完整代码到你的页面，刷新一下就能看到一个超级专业的“窗口内嵌完整布局”效果了！
这已经是很多商业后台系统（如OA、ERP、CRM）的标准弹窗结构了。

想要我给你一个更复杂的完整示例（比如：窗口内左树右表 + 顶部工具栏 + 底部按钮 + tabs切换）？
或者你告诉我你想实现什么布局（比如“上图下表”“四宫格”“带accordion折叠面板”），我2分钟发你精准代码，复制就能跑！

快说说你的具体需求，我手把手帮你搞定，5分钟内看到完美窗口+布局效果！