在 EasyUI DataGrid 中，你可以通过绑定 onClickCell 事件来获取点击单元格所在行的其他字段的值。以下是具体的实现步骤和示例代码：

1. 初始化 DataGrid

首先，确保你已经初始化了一个 DataGrid，并填充了一些数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI DataGrid 示例</title>
    <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/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="示例表格" class="easyui-datagrid" style="width:700px;height:250px"
           data-options="singleSelect:true,fitColumns:true">
        <thead>
            <tr>
                <th field="company_name" width="200">公司名称</th>
                <th field="details_month" width="100">月份</th>
                <th field="retail_electricity_total_coefficient" width="150">零售电费（合计）</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                data: [
                    {"company_name":"公司A","details_month":"2023-01","retail_electricity_total_coefficient":100.1234},
                    {"company_name":"公司B","details_month":"2023-02","retail_electricity_total_coefficient":200.5678},
                    // 添加更多数据行...
                ],
                onClickCell: function(index, field, value) {
                    // 获取点击行的所有数据
                    var rowData = $(this).datagrid('getRows')[index];
                    
                    // 获取想要的字段值，例如 "company_name"
                    var companyName = rowData.company_name;
                    
                    // 显示值
                    alert("公司名称: " + companyName);
                }
            });
        });
    </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
2. 解释代码
  1. 初始化 DataGrid：
<table id="dg" title="示例表格" class="easyui-datagrid" style="width:700px;height:250px"
       data-options="singleSelect:true,fitColumns:true">
    <thead>
        <tr>
            <th field="company_name" width="200">公司名称</th>
            <th field="details_month" width="100">月份</th>
            <th field="retail_electricity_total_coefficient" width="150">零售电费（合计）</th>
        </tr>
    </thead>
</table>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

在这里，我们定义了一个 DataGrid 表格，并且指定了列字段。

  1. 绑定 onClickCell 事件：
onClickCell: function(index, field, value) {
    // 获取点击行的所有数据
    var rowData = $(this).datagrid('getRows')[index];
    
    // 获取想要的字段值，例如 "company_name"
    var companyName = rowData.company_name;
    
    // 显示值
    alert("公司名称: " + companyName);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

onClickCell 事件在单击单元格时触发。通过 index 参数获取当前行的索引，然后使用 datagrid('getRows')[index] 方法获取该行的所有数据。接着，可以从 rowData 中提取任何你想要的字段值。

总结

通过绑定 DataGrid 的 onClickCell 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。