JS 遍歷表格資料：從 SQL 到前端渲染的完整鏈路

架構概覽

資料流向：SQL Server → C# Web API → JSON → AJAX → jQuery EasyUI DataGrid

後端實作

1. 實體類別

public class GridData {
    public int total { get; set; }
    public List<RowData> rows { get; set; }
}
public class RowData {
    public string Id { get; set; }
    public string Name { get; set; }
    public decimal Amount { get; set; }
    public DateTime CreateTime { get; set; }
}

2. Web API 控制器

[HttpPost]
public GridData GetGridData(int page = 1, int rows = 20, string sort = "Id", string order = "asc") {
    using (var db = new SqlConnection(connStr)) {
        // 總筆數
        int total = db.ExecuteScalar<int>("SELECT COUNT(*) FROM BusinessTable");
        
        // 分頁查詢（SQL Server 2012+ OFFSET FETCH）
        string sql = $@"SELECT * FROM BusinessTable 
            ORDER BY {sort} {order}
            OFFSET @offset ROWS FETCH NEXT @pageSize ROWS ONLY";
        
        var list = db.Query<RowData>(sql, new { offset = (page-1)*rows, pageSize = rows }).ToList();
        
        return new GridData { total = total, rows = list };
    }
}

前端實作

1. EasyUI DataGrid 初始化

<table id="dg" title="業務資料" class="easyui-datagrid" 
    url="/api/GetGridData" method="post" pagination="true"
    pageSize="20" pageList="[10,20,50]" fitColumns="true"
    rownumbers="true" singleSelect="true">
    <thead>
        <tr>
            <th field="Id" width="80" sortable="true">編號</th>
            <th field="Name" width="150" sortable="true">名稱</th>
            <th field="Amount" width="100" align="right" formatter="fmtMoney">金額</th>
            <th field="CreateTime" width="150" formatter="fmtDate">建立時間</th>
        </tr>
    </thead>
</table>

2. 格式化函數

function fmtMoney(val) {
    return '¥' + parseFloat(val).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
function fmtDate(val) {
    if (!val) return '';
    var d = new Date(val.replace(/-/g, '/')); // 相容 Safari
    return d.getFullYear() + '-' + (d.getMonth()+1).toString().padStart(2,'0') + '-' + d.getDate().toString().padStart(2,'0');
}

3. 程式化重載與查詢

// 重載（保持當前分頁/排序）
$('#dg').datagrid('reload'); 

// 帶條件查詢
$('#dg').datagrid('load', {
    keyword: $('#txtKey').val(),
    startDate: $('#dtStart').datebox('getValue'),
    endDate: $('#dtEnd').datebox('getValue')
});

進階技巧

1. 虛擬滾動大資料量

$('#dg').datagrid({
    // 啟用虛擬滾動（需 EasyUI 1.5+）
    view: scrollview, 
    onScrollDown: function() {
        $(this).datagrid('loadMore'); // 自動追加下一頁
    }
});

2. 編輯模式同步後端

var editIndex = undefined;
function endEditing() {
    if (editIndex == undefined) return true;
    if ($('#dg').datagrid('validateRow', editIndex)) {
        var row = $('#dg').datagrid('getRows')[editIndex];
        // 送往後端更新
        $.post('/api/UpdateRow', row, function(r) {
            if (r.success) $('#dg').datagrid('acceptChanges');
            else $.messager.alert('錯誤', r.msg);
        });
        editIndex = undefined;
        return true;
    }
    return false;
}

常見問題排查

替代方案對比

• Layui Table：國產、輕量、文檔中文友善
• Bootstrap Table：生態豐富、支援工具列自訂
• AG Grid：企業級、效能極強、功能最全但學習曲線陡峭

採用 EasyUI DataGrid 可快速實現「SQL 到前端表格」的完整閉環，內建分頁、排序、編輯、匯出等企業級功能，極大降低前端開發負擔。