EasyUI DataGrid首列顯示行號並自定義表頭標題的方法

核心配置：`rownumbers: true`

EasyUI DataGrid 內建行號功能，只需在初始化選項中開啟：

$('#dg').datagrid({
    rownumbers: true,  // 自動在第一列顯示 1,2,3... 序號
    columns: [[
        {field:'name', title:'姓名', width:100},
        {field:'age', title:'年齡', width:50}
    ]]
});

自定義行號列表頭文字

默認表頭為空，需通過 jQuery 動態修改渲染後的 DOM：

$(function () {
    // 等待 DataGrid 渲染完成後執行
    $('#dg').closest('div.datagrid-view')
          .find('div.datagrid-header-rownumber')
          .html('序號');  // 設置你想要的表頭文字
});

完整頁面示例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <script src="jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="用戶列表" style="width:500px;height:300px"></table>
    <script>
        $('#dg').datagrid({
            rownumbers: true,
            columns: [[
                {field:'name', title:'姓名', width:120},
                {field:'dept', title:'部門', width:100}
            ]],
            data: [
                {name:'張三', dept:'技術部'},
                {name:'李四', dept:'市場部'}
            ]
        });
        // 修改行號列表頭
        $('#dg').closest('div.datagrid-view')
              .find('div.datagrid-header-rownumber')
              .html('排名');
    </script>
</body>
</html>

注意事項

• 行號列**不佔用 `columns` 定義**，自動插入最左側。
• 排序、分頁、過濾後行號**自動重算**，無需手動維護。
• 若需隱藏行號列，設置 `rownumbers: false` 即可。