当前位置：首页 > news >正文

jQuery EasyUI 数据网格 - 设置排序

news 2026/6/14 7:36:11

jQuery EasyUI 数据网格 - 格式化列（Column Formatter）

datagrid的formatter属性是最强大、最常用的功能之一，它允许你自定义每一列的显示内容。可以返回 HTML 字符串，从而实现：

状态颜色显示（如启用绿色、禁用红色）
操作按钮（编辑、删除、查看）
图片显示
进度条、星级评分
组合多个字段显示
链接、图标等富文本

官方参考：

教程：https://www.jeasyui.com/tutorial/datagrid/datagrid3.php
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Formatter

步骤 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:true,pagination:true,rownumbers:true,singleSelect:true"><thead><tr><thfield="id"width="80">ID</th><thfield="username"width="100">用户名</th><thfield="name"width="100">姓名</th><thfield="email"width="180">邮箱</th><thfield="status"width="80"align="center"formatter="formatStatus">状态</th><thfield="regdate"width="100"formatter="formatDate">注册日期</th><thfield="score"width="100"formatter="formatScore">评分</th><thfield="avatar"width="80"formatter="formatAvatar">头像</th><thfield="action"width="150"align="center"formatter="formatAction">操作</th></tr></thead></table>

步骤 3: 定义各种格式化函数

<scripttype="text/javascript">// 1. 状态格式化（颜色文本）functionformatStatus(value,row,index){if(value==1){return'<span style="color:green;font-weight:bold;">启用</span>';}elseif(value==0){return'<span style="color:red;">禁用</span>';}else{return'<span style="color:gray;">未知</span>';}}// 2. 日期格式化functionformatDate(value,row,index){if(!value)return'';vardate=newDate(value);returndate.getFullYear()+'-'+('0'+(date.getMonth()+1)).slice(-2)+'-'+('0'+date.getDate()).slice(-2);}// 3. 评分格式化（星级）functionformatScore(value,row,index){varstars='';for(vari=1;i<=5;i++){if(i<=value){stars+='★';// 实心星}else{stars+='☆';// 空心星}}return'<span style="color:#ff9800;font-size:16px;">'+stars+'</span> ('+value+')';}// 4. 头像格式化（显示图片）functionformatAvatar(value,row,index){if(value){return'<img src="'+value+'" style="width:40px;height:40px;border-radius:50%;">';}else{return'<img src="default_avatar.jpg" style="width:40px;height:40px;border-radius:50%;">';}}// 5. 操作列格式化（按钮）functionformatAction(value,row,index){return'<a href="javascript:viewUser('+row.id+')" class="easyui-linkbutton" iconCls="icon-search" plain="true">查看</a> '+'<a href="javascript:editUser('+row.id+')" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a> '+'<a href="javascript:deleteUser('+row.id+')" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>';}// 操作函数示例functionviewUser(id){$.messager.alert('查看','查看用户详情 ID: '+id);}functioneditUser(id){$.messager.alert('编辑','打开编辑窗口 ID: '+id);}functiondeleteUser(id){$.messager.confirm('确认','确定删除 ID 为 '+id+' 的用户吗？',function(r){if(r){$('#dg').datagrid('reload');$.messager.show({title:'成功',msg:'删除成功'});}});}// 页面加载后解析按钮（重要！）$(function(){// 让格式化后的 linkbutton 生效$.parser.parse('#dg');});</script>

关键说明

formatter 函数签名：function(value, row, index)
- value：当前单元格的值
- row：整行数据对象（最常用，可访问其他字段）
- index：行索引
返回 HTML：可以返回任意 HTML 字符串，包括<span>、<img>、<a>等。
按钮生效：如果返回easyui-linkbutton，必须在加载后调用$.parser.parse()解析，否则只是普通链接。
性能：formatter 在每行渲染时调用，避免复杂逻辑。

高级格式化示例

// 组合字段显示functionformatInfo(value,row,index){return'用户：'+row.name+'<br>邮箱：'+row.email+'<br>电话：'+row.phone;}// 进度条functionformatProgress(value,row,index){return'<div style="width:100%;background:#f0f0f0;border-radius:4px;">'+'<div style="width:'+value+'%;background:#4caf50;height:18px;border-radius:4px;text-align:center;color:white;">'+value+'%'+'</div></div>';}