网页设计与网站建设课程设计报告北京网页制作电话
张小明 2026/1/2 5:31:18
网页设计与网站建设课程设计报告,北京网页制作电话,wordpress 调用搜索词,湖北省建设安全管理站网站jQuery EasyUI 数据网格 - 设置冻结列#xff08;Frozen Columns#xff09;
冻结列#xff08;Frozen Columns#xff09;是 datagrid 的重要功能#xff0c;它允许将左侧的部分列“冻结”#xff0c;在水平滚动表格时这些列始终固定显示#xff0c;不随内容滚动。非常…jQuery EasyUI 数据网格 - 设置冻结列Frozen Columns冻结列Frozen Columns是datagrid的重要功能它允许将左侧的部分列“冻结”在水平滚动表格时这些列始终固定显示不随内容滚动。非常适合数据列较多时让关键字段如 ID、姓名、操作列始终可见。EasyUI 通过frozenColumns属性定义冻结列其余列放在columns中。官方参考教程https://www.jeasyui.com/tutorial/datagrid/datagrid2.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemFrozenColumns步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建带冻结列的 DataGridtableiddgclasseasyui-datagridtitle用户管理冻结列示例stylewidth:900px;height:500pxdata-optionsurl:get_users.php,fitColumns:false,pagination:true,rownumbers:true,singleSelect:true!-- 冻结列始终固定在左侧 --theaddata-optionsfrozen:truetrthdata-optionsfield:id,width:80,align:centerID/ththdata-optionsfield:username,width:120用户名/ththdata-optionsfield:name,width:100姓名/ththdata-optionsfield:action,width:120,align:center,formatter:actionFormatter操作/th/tr/thead!-- 可滚动列水平滚动时移动 --theadtrthdata-optionsfield:email,width:200邮箱/ththdata-optionsfield:phone,width:120电话/ththdata-optionsfield:address,width:200地址/ththdata-optionsfield:regdate,width:100,align:center注册日期/ththdata-optionsfield:lastlogin,width:150最后登录/ththdata-optionsfield:status,width:80,align:center,formatter:statusFormatter状态/ththdata-optionsfield:remark,width:200备注/th/tr/thead/table步骤 3: 添加格式化函数可选提升可读性scripttypetext/javascript// 操作列格式化functionactionFormatter(value,row,index){returna hrefjavascript:editUser(row.id) classeasyui-linkbutton iconClsicon-edit编辑/a a hrefjavascript:deleteUser(row.id) classeasyui-linkbutton iconClsicon-remove删除/a;}// 状态格式化functionstatusFormatter(value){if(value1){returnspan stylecolor:green;启用/span;}else{returnspan stylecolor: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>tableiddgclasseasyui-datagridstylewidth:900px;height:500pxdata-optionsurl: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?pluginDataGridpitemFrozenColumns如果需要冻结行固定表头已默认支持、冻结列 行内编辑、或冻结列包含复选框的完整示例请继续提问