在 EasyUI 的 DataGrid 中，没有直接的属性可以设置行号列的标题，但是你可以通过扩展的方法来实现这一功能。通过扩展 EasyUI 的 DataGrid 插件，来增加一个 rownumberTitle 属性，以便通过属性来设置行号列的标题。

以下是具体实现步骤与代码：

扩展 EasyUI DataGrid

首先，我们需要扩展 EasyUI 的 DataGrid 插件，增加一个 rownumberTitle 属性，用于设置行号列的标题。

<!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>
    <style>
        .datagrid-header-rownumber {
            text-align: center;
            font-weight: bold;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <table id="dg" title="示例表格" class="easyui-datagrid" style="width:700px;height:250px"
           data-options="rownumbers:true,singleSelect:true,fitColumns:true,rownumberTitle:'序号'">
        <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">
        // 扩展 datagrid 插件，增加 rownumberTitle 属性
        $.extend($.fn.datagrid.defaults, {
            onLoadSuccess: function(){
                var opts = $(this).datagrid('options');
                if (opts.rownumbers && opts.rownumberTitle) {
                    var dc = $(this).data('datagrid').dc;
                    dc.header1.add(dc.header2).find('div.datagrid-header-rownumber').html(opts.rownumberTitle);
                }
            }
        });

        $(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},
                    // 添加更多数据行...
                ]
            });
        });
    </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.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
解释
  1. 扩展 DataGrid 插件：
$.extend($.fn.datagrid.defaults, {
    onLoadSuccess: function(){
        var opts = $(this).datagrid('options');
        if (opts.rownumbers && opts.rownumberTitle) {
            var dc = $(this).data('datagrid').dc;
            dc.header1.add(dc.header2).find('div.datagrid-header-rownumber').html(opts.rownumberTitle);
        }
    }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

我们使用 $.extend 方法扩展了 EasyUI 的 DataGrid 插件，增加了一个 rownumberTitle 属性。如果 rownumbers 为 true 且 rownumberTitle 有定义，我们就修改行号列的标题。

  1. 使用 rownumberTitle 属性：
<table id="dg" title="示例表格" class="easyui-datagrid" style="width:700px;height:250px"
       data-options="rownumbers:true,singleSelect:true,fitColumns:true,rownumberTitle:'序号'">
    <!-- 表头定义 -->
</table>
  • 1.
  • 2.
  • 3.
  • 4.

在定义 DataGrid 时，通过 data-options 属性设置 rownumbers:true 和 rownumberTitle:'序号'。

通过这种方法，你可以在 EasyUI 的 DataGrid 中通过属性来设置行号列的标题。这种方式更加简洁、易于维护。