jQuery UI Datagrid formatter 函數作用域陷阱與解決方案

問題現象

$('#grid').datagrid({
    columns: [[
        { field: 'caozuo', title: '操作', width: 100, align: 'center',
          formatter: formatterOper }
    ]]
});

function formatterOper() {
    return '<a href="javascript:void(0)" onclick="showYssj();">查看</a>';
}

將 showYssj 定義在 $(function(){}) 內時，點擊連結報錯「找不到函數」；移到全域作用域則正常。

根本原因：作用域與聲明提升

• $(function(){ ... }) 相當於 $(document).ready(...)，內部函數屬於區域作用域，外部無法直接存取。
• formatterOper 在 datagrid 渲染時被呼叫，生成的 HTML 字串包含 onclick="showYssj()"。瀏覽器稍後解析此行內事件時，在全域作用域尋找 showYssj，自然找不到。
• 若 showYssj 定義在全域（或掛載到 window），瀏覽器即可解析成功。

解決方案

方案一：掛載到 window（最快修復）

$(function() {
    window.showYssj = function() { /* ... */ };
});

方案二：使用事件委派（推薦，符合現代最佳實踐）

// formatter 只回傳帶 data-action 的元素
formatter: function() {
    return '<a href="#" class="view-btn" data-id="' + row.id + '">查看</a>';
}

// 頁面載入後統一綁定
$('#grid').on('click', '.view-btn', function(e) {
    e.preventDefault();
    const id = $(this).data('id');
    showYssj(id);
});

優點：不汙染全域、動態新增列也生效、關注點分離。

方案三：formatter 直接回傳函數引用（jQuery UI 1.12+ 支援）

formatter: function(value, row, index) {
    return '<button type="button" class="view-btn">查看</button>';
}
// 搭配方案二的事件委派

總結

行內事件處理器（onclick="..."）強制要求函數在全域作用域。現代開發應避免行內事件，改用事件委派或框架內建綁定機制，徹底解決作用域問題並提升可維護性。