在 jQuery EasyUI 的 DataGrid 中，你可以通过使用 formatter 属性和自定义函数来实现列的运算，并在列中显示计算结果。以下是一个简单的例子，演示如何在 DataGrid 中进行列运算：
<!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="name" width="100">名称</th>
                <th field="price" width="100" align="right">价格</th>
                <th field="quantity" width="100" align="right">数量</th>
                <th field="total" width="100" align="right" formatter="calculateTotal">总价</th>
                <!-- 添加更多列... -->
            </tr>
        </thead>
    </table>

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

        // 示例：计算总价的格式化函数
        function calculateTotal(value, row, index) {
            // 在这里进行列运算，这个例子是价格 * 数量
            var price = parseFloat(row.price);
            var quantity = parseFloat(row.quantity);

            if (!isNaN(price) && !isNaN(quantity)) {
                return (price * quantity).toFixed(2);  // 保留两位小数
            } else {
                return 'N/A';
            }
        }
    </script>

</body>
</html>

在上述代码中，我定义了一个 calculateTotal 函数作为 formatter 属性，用于计算总价。在这个函数中，通过获取行数据中的价格和数量，进行简单的列运算（例如，价格乘以数量），并返回计算结果。确保替换 "your_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。


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