EasyUI TreeGrid 單選按鈕默認選中與互斥實現方案

問題場景

在 EasyUI treegrid 中通過 formatter 渲染單選按鈕組，需根據數據值默認選中對應項，並保證同組互斥。原代碼：

function formatProgress(value, row) {
    if (value == '1') {
        var s = '<input type="radio" value="1" checked="true">分行'
            + '<input type="radio" value="2">支行'
            + '<input type="radio" value="3">網點';
    } else if (value == '2') { ... }
    return s;
}

問題：所有行的 radio 共用同一 name 導致全表只能選一個；去掉 name 則失去互斥。

解決方案：行級唯一 name + 事件代理

1. 為每行生成唯一 name

function formatProgress(value, row, index) {
    var name = "orgtype_" + index; // 行級唯一 name
    var checked1 = value == '1' ? 'checked' : '';
    var checked2 = value == '2' ? 'checked' : '';
    var checked3 = value == '3' ? 'checked' : '';
    return '<input type="radio" name="' + name + '" value="1" ' + checked1 + '>分行'
         + '<input type="radio" name="' + name + '" value="2" ' + checked2 + '>支行'
         + '<input type="radio" name="' + name + '" value="3" ' + checked3 + '>網點';
}

2. 獲取選中值 (提交時遍歷)

function getSelectedTypes() {
    var rows = $('#tg').treegrid('getRows');
    var result = [];
    rows.forEach(function(row, i) {
        var name = "orgtype_" + i;
        var val = $('input[name="' + name + '"]:checked').val();
        if (val) result.push({id: row.id, type: val});
    });
    return result;
}

3. 進階：雙向綁定 (編輯後同步回數據源)

$('#tg').treegrid({
    onLoadSuccess: function() {
        // 渲染後綁定 change 事件
        $('input[type="radio"][name^="orgtype_"]').change(function() {
            var rowIndex = $(this).attr('name').split('_')[1];
            var row = $('#tg').treegrid('getRows')[rowIndex];
            row.orgtype = $(this).val();
            $('#tg').treegrid('updateRow', {index: rowIndex, row: row});
        });
    }
});

關鍵點總結

• name 唯一性：以行索引或行 ID 構造唯一 name，保證行內互斥、行間獨立。
• 默認選中：formatter 中根據 row.orgtype 動態輸出 checked 屬性。
• 數據同步：通過事件代理將 UI 選擇實時寫回 row 數據，提交時直接序列化 rows 陣列。