jQuery DataGrid 模板列傳遞字符串參數：必須加引號避免變量解析錯誤

在 EasyUI DataGrid 的 formatter 中構建帶字符串參數的 onclick 或 href，若直接拼接變量，JS 引擎會將字符串當作變量名解析導致語法錯誤，函數無法調用。

錯誤代碼

formatter: function(value, rowData, rowIndex) {
    // rowData.name = "三國志"
    return "<a href='javascript:del(" + rowData.id + "," + rowData.name + ")'>刪除</a>";
    // 生成：javascript:del(1,三國志) → 三國志被視為變量 → ReferenceError
}

正確寫法：字符串參數用雙引號包裹並轉義

formatter: function(value, rowData, rowIndex) {
    // 關鍵：\" + rowData.name + \"  → 生成 javascript:del(1,"三國志")
    return "<a href='javascript:del(" + rowData.id + ",\"" + rowData.name + "\")'>刪除</a>";
}

更優雅的方案：使用 data-* 屬性 + 事件委託

formatter: function(value, rowData, rowIndex) {
    return "<a href='javascript:void(0)' class='delete-btn' data-id='" + rowData.id + "' data-name='" + rowData.name + "'>刪除</a>";
}

// 頁面統一綁定（避免內聯事件、易維護）
$('#grid').on('click', '.delete-btn', function() {
    var id = $(this).data('id');
    var name = $(this).data('name');
    if (confirm("是否刪除《" + name + "》？")) {
        $.ajax({ url: "delById.action?id=" + id, success: function() { location.reload(); } });
    }
});

核心原則

1. 字符串字面量必須加引號：JS 中 "abc" 是字符串，abc 是變量。
2. 避免內聯事件：onclick="..." / href="javascript:..." 難維護、易注入、CSP 策略可能阻擋。
3. data-* 屬性存儲數據：語義化、自動類型轉換（.data()）、配合事件委託性能最優。

此問題同樣存在於所有動態生成 JS 代碼的場景（模板引擎、字符串拼接），養成「字符串加引號、數據用屬性」習慣可避免 90% 此類錯誤。