在 jQuery EasyUI 的 DataGrid 中，你可以使用 formatter 属性来格式化列的显示内容。formatter 属性允许你定义一个函数，该函数接收列的值作为参数，然后返回格式化后的内容。以下是一个简单的例子，演示了如何使用 formatter 来格式化列：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 格式化列示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 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://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true">
        <thead>
            <tr>
                <!-- 列定义，其中 'formatter' 属性用于格式化列 -->
                <th field="column1" width="100" formatter="formatColumn1">列1</th>
                <th field="column2" width="100" formatter="formatColumn2">列2</th>
                <!-- 添加更多列... -->
            </tr>
        </thead>
    </table>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        // 示例：格式化列1
        function formatColumn1(value, row, index) {
            // 在这里可以编写自定义的格式化逻辑
            return '<span style="color:red;">' + value + '</span>';
        }

        // 示例：格式化列2
        function formatColumn2(value, row, index) {
            // 在这里可以编写自定义的格式化逻辑
            return value.toUpperCase();
        }
    </script>

</body>
</html>

在上述代码中，每个列的定义中都包含了一个 formatter 属性，该属性指定了用于格式化列内容的 JavaScript 函数。在示例中，formatColumn1 函数将列1的值用红色文本显示，而 formatColumn2 函数将列2的值转换为大写。

你可以根据需要自定义这些格式化函数的逻辑，以满足你的特定要求。确保替换 "your_data_url" 为实际数据源的 URL，并根据你的需求修改列的名称和数量。


转载请注明出处：http://www.zyzy.cn/article/detail/13110/jQuery EasyUI