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

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

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

<tableid="dg"class="easyui-datagrid"title="用户管理（冻结列示例）"style="width:900px;height:500px"data-options="url:'get_users.php',fitColumns:false,pagination:true,rownumbers:true,singleSelect:true"><!-- 冻结列：始终固定在左侧 --><theaddata-options="frozen:true"><tr><thdata-options="field:'id',width:80,align:'center'">ID</th><thdata-options="field:'username',width:120">用户名</th><thdata-options="field:'name',width:100">姓名</th><thdata-options="field:'action',width:120,align:'center',formatter:actionFormatter">操作</th></tr></thead><!-- 可滚动列：水平滚动时移动 --><thead><tr><thdata-options="field:'email',width:200">邮箱</th><thdata-options="field:'phone',width:120">电话</th><thdata-options="field:'address',width:200">地址</th><thdata-options="field:'regdate',width:100,align:'center'">注册日期</th><thdata-options="field:'lastlogin',width:150">最后登录</th><thdata-options="field:'status',width:80,align:'center',formatter:statusFormatter">状态</th><thdata-options="field:'remark',width:200">备注</th></tr></thead></table>

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

<scripttype="text/javascript">// 操作列格式化functionactionFormatter(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>';}// 状态格式化functionstatusFormatter(value){if(value==1){return'<span style="color:green;">启用</span>';}else{return'<span style="color:red;">禁用</span>';}}// 示例操作函数functioneditUser(id){$.messager.alert('编辑','编辑用户 ID: '+id);}functiondeleteUser(id){$.messager.confirm('确认','确定删除 ID 为 '+id+' 的用户吗？',function(r){if(r){$.messager.show({title:'成功',msg:'删除成功'});}});}</script>

关键说明

• frozen:true：在<thead><tableid="dg"class="easyui-datagrid"style="width:900px;height:500px"data-options="url:'get_users.php', pagination:true, rownumbers:true, singleSelect:true, fitColumns:false"><!-- 冻结列 --><theadfrozenColumns="[[ {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><!-- 可滚动列 --><theadcolumns="[[ {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

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