jQuery EasyUI 数据网格 – 设置冻结列

jQuery EasyUI 数据网格 – 设置冻结列（Frozen Columns）

冻结列（Frozen Columns）是 datagrid 的重要功能，它允许将左侧的部分列“冻结”，在水平滚动表格时这些列始终固定显示，不随内容滚动。非常适合数据列较多时，让关键字段（如 ID、姓名、操作列）始终可见。

EasyUI 通过 frozenColumns 属性定义冻结列，其余列放在 columns 中。

官方参考：

• 教程：https://www.jeasyui.com/tutorial/datagrid/datagrid2.php
• 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Frozen+Columns

步骤 1: 引入 EasyUI 资源

<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>

步骤 2: 创建带冻结列的 DataGrid

<table id="dg" class="easyui-datagrid" title="用户管理（冻结列示例）" style="width:900px;height:500px"
       data-options="url:'get_users.php',fitColumns:false,pagination:true,rownumbers:true,singleSelect:true">
    <!-- 冻结列：始终固定在左侧 -->
    <thead data-options="frozen:true">
        <tr>
            <th data-options="field:'id',width:80,align:'center'">ID</th>
            <th data-options="field:'username',width:120">用户名</th>
            <th data-options="field:'name',width:100">姓名</th>
            <th data-options="field:'action',width:120,align:'center',formatter:actionFormatter">操作</th>
        </tr>
    </thead>

    <!-- 可滚动列：水平滚动时移动 -->
    <thead>
        <tr>
            <th data-options="field:'email',width:200">邮箱</th>
            <th data-options="field:'phone',width:120">电话</th>
            <th data-options="field:'address',width:200">地址</th>
            <th data-options="field:'regdate',width:100,align:'center'">注册日期</th>
            <th data-options="field:'lastlogin',width:150">最后登录</th>
            <th data-options="field:'status',width:80,align:'center',formatter:statusFormatter">状态</th>
            <th data-options="field:'remark',width:200">备注</th>
        </tr>
    </thead>
</table>

步骤 3: 添加格式化函数（可选，提升可读性）

<script type="text/javascript">
    // 操作列格式化
    function actionFormatter(value, row, index){
        return '<a href="javascript:editUser('+row.id+')" class="easyui-linkbutton" iconCls="icon-edit">编辑</a> ' +
               '<a href="javascript:deleteUser('+row.id+')" class="easyui-linkbutton" iconCls="icon-remove">删除</a>';
    }

    // 状态格式化
    function statusFormatter(value){
        if (value == 1){
            return '<span style="color:green;">启用</span>';
        } else {
            return '<span style="color:red;">禁用</span>';
        }
    }

    // 示例操作函数
    function editUser(id){
        $.messager.alert('编辑', '编辑用户 ID: ' + id);
    }
    function deleteUser(id){
        $.messager.confirm('确认', '确定删除 ID 为 ' + id + ' 的用户吗？', function(r){
            if (r){
                $.messager.show({title:'成功',msg:'删除成功'});
            }
        });
    }
</script>

关键说明

• frozen:true：在 <thead data-options="frozen:true"> 中定义冻结列（旧方式）。
• 现代方式（推荐）：直接使用 frozenColumns 和 columns 属性（更清晰）：

<table id="dg" class="easyui-datagrid" style="width:900px;height:500px"
       data-options="
            url:'get_users.php',
            pagination:true,
            rownumbers:true,
            singleSelect:true,
            fitColumns:false">

    <!-- 冻结列 -->
    <thead frozenColumns="[[
        {field:'id',title:'ID',width:80,align:'center'},
        {field:'username',title:'用户名',width:120},
        {field:'name',title:'姓名',width:100},
        {field:'action',title:'操作',width:120,align:'center',formatter:actionFormatter}
    ]]"></thead>

    <!-- 可滚动列 -->
    <thead columns="[[
        {field:'email',title:'邮箱',width:200},
        {field:'phone',title:'电话',width:120},
        {field:'address',title:'地址',width:200},
        {field:'regdate',title:'注册日期',width:100},
        {field:'lastlogin',title:'最后登录',width:150},
        {field:'status',title:'状态',width:80,align:'center',formatter:statusFormatter},
        {field:'remark',title:'备注',width:200}
    ]]"></thead>
</table>

注意事项

• fitColumns:true 与冻结列不推荐一起使用，因为会打乱冻结效果。建议设为 false，手动控制宽度。
• 冻结列通常放复选框、ID、姓名、操作等关键列。
• 支持多行冻结列（frozenColumns 为二维数组）。
• 冻结列和普通列的行高自动对齐。

完整效果

• 左侧 ID、用户名、姓名、操作列始终固定。
• 右侧长表格内容可水平滚动，而冻结列不动。
• 操作按钮始终可见，便于快速编辑/删除。

更多示例：

• 官方冻结列：https://www.jeasyui.com/tutorial/datagrid/datagrid2.php
• 多冻结列 + 工具栏：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Frozen+Columns

如果需要冻结行（固定表头，已默认支持）、冻结列 + 行内编辑、或冻结列包含复选框的完整示例，请继续提问！