EasyUI DataGrid 列數據提取：getRows 遍歷實現導出/統計

需求：獲取 DataGrid 某列（如 `price`）的所有行值，用於前端求和、導出 Excel 或圖表繪製。

核心 API：`getRows`

// 返回所有數據行的數組（包含當前頁/所有頁視分頁模式）
var rows = $('#dg').datagrid('getRows'); 

// 提取指定字段值
var field = 'price';
var values = rows.map(row => row[field]); // ES6
// 或兼容寫法
var values = [];
for (var i = 0; i < rows.length; i++) values.push(rows[i][field]);

完整應用場景

1. 前端求和顯示

var total = values.reduce((sum, v) => sum + (parseFloat(v) || 0), 0);
$('#totalPrice').text('總計：' + total.toFixed(2));

2. 導出 CSV

function exportColumnCsv(field, filename) {
    var rows = $('#dg').datagrid('getRows');
    var header = $('#dg').datagrid('getColumnOption', field).title;
    var csv = [header].concat(rows.map(r => r[field])).join('\n');
    
    var blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename || field + '.csv';
    link.click();
}

3. 遠程分頁模式下獲取全量數據

若 `pagination:true` 且 `serverSide:true`，`getRows` 僅返回**當前頁**數據。需調用後端導出接口或臨時關閉分頁：

// 方案一：後端提供 /export?field=price 接口，返回完整 CSV/Excel 流
// 方案二：前端臨時載入全量（慎用，大數據會卡死）
$('#dg').datagrid('options').pagination = false;
$('#dg').datagrid('load', { _export_all: 1 }); // 後端識別返回全部
// 導出完成後恢復分頁
$('#dg').datagrid('options').pagination = true;
$('#dg').datagrid('load');

性能提示

• DataGrid 內部已緩存數據，`getRows` 為 O(1) 引用返回，**無重複請求**。
• 大數據（>5000 行）建議使用虛擬滾動或服務端導出，避免前端內存壓力。
• 字段名區分大小寫，需與 `columns` 定義的 `field` 完全一致。