jQuery EasyUI 数据网格 – 格式化列

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

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

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

<script type="text/javascript">
    // 1. 状态格式化（颜色文本）
    function formatStatus(value, row, index){
        if (value == 1){
            return '<span style="color:green;font-weight:bold;">启用</span>';
        } else if (value == 0){
            return '<span style="color:red;">禁用</span>';
        } else {
            return '<span style="color:gray;">未知</span>';
        }
    }

    // 2. 日期格式化
    function formatDate(value, row, index){
        if (!value) return '';
        var date = new Date(value);
        return date.getFullYear() + '-' + 
               ('0' + (date.getMonth()+1)).slice(-2) + '-' + 
               ('0' + date.getDate()).slice(-2);
    }

    // 3. 评分格式化（星级）
    function formatScore(value, row, index){
        var stars = '';
        for(var i=1; i<=5; i++){
            if(i <= value){
                stars += '★';  // 实心星
            } else {
                stars += '☆';  // 空心星
            }
        }
        return '<span style="color:#ff9800;font-size:16px;">' + stars + '</span> (' + value + ')';
    }

    // 4. 头像格式化（显示图片）
    function formatAvatar(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. 操作列格式化（按钮）
    function formatAction(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>';
    }

    // 操作函数示例
    function viewUser(id){
        $.messager.alert('查看', '查看用户详情 ID: ' + id);
    }
    function editUser(id){
        $.messager.alert('编辑', '打开编辑窗口 ID: ' + id);
    }
    function deleteUser(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 在每行渲染时调用，避免复杂逻辑。

高级格式化示例

// 组合字段显示
function formatInfo(value, row, index){
    return '用户：' + row.name + '<br>邮箱：' + row.email + '<br>电话：' + row.phone;
}

// 进度条
function formatProgress(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>';
}

完整效果

• 状态列显示彩色文字。
• 日期自动格式化。
• 评分显示金色五星。
• 头像显示圆形图片。
• 操作列显示三个可点击的图标按钮。

更多示例：

• 官方格式化列：https://www.jeasyui.com/tutorial/datagrid/datagrid3.php
• 复杂格式化 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Formatter

如果需要条件格式化（如根据值变色）、编辑器结合格式化、自定义 tooltip 或 格式化冻结列，请继续提问！