在 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>解释
- 扩展 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);}}
});我们使用 $.extend 方法扩展了 EasyUI 的 DataGrid 插件，增加了一个 rownumberTitle 属性。如果 rownumbers 为 true 且 rownumberTitle 有定义，我们就修改行号列的标题。
- 使用
rownumberTitle 属性：
<table id="dg" title="示例表格" class="easyui-datagrid" style="width:700px;height:250px"data-options="rownumbers:true,singleSelect:true,fitColumns:true,rownumberTitle:'序号'"><!-- 表头定义 -->
</table>在定义 DataGrid 时，通过 data-options 属性设置 rownumbers:true 和 rownumberTitle:'序号'。
通过这种方法，你可以在 EasyUI 的 DataGrid 中通过属性来设置行号列的标题。这种方式更加简洁、易于维护。