EasyUI DataGrid Combobox 聯動完整實現：編輯行動態加載與值回填

核心場景

DataGrid 編輯行中，Combobox A (NMJ04) 選值後，聯動加載 Combobox B (NMJ05) 並回填 TextBox C (NMJ06)。

完整 onSelect 實現

onSelect: function(record) {
    // 1. 獲取當前編輯行索引
    var row = $('#dd').datagrid('getSelected');
    var rowIndex = $('#dd').datagrid('getRowIndex', row);
    
    // 2. 獲取 Combobox B 編輯器（注意：返回對象需 .target 轉 jQuery）
    var editorB = $('#dd').datagrid('getEditor', { index: rowIndex, field: 'NMJ05' });
    var $comboB = $(editorB.target);
    
    // 3. 清空並重新加載 Combobox B
    $comboB.combobox('clear');
    var url = '/handler/spouseinfo.ashx?flag=getValueNMK06&t=' + record.id;
    $comboB.combobox('reload', url);
    
    // 4. 異步獲取 NMJ06 值並回填 TextBox
    $.ajax({
        url: '/handler/getNMJ06.ashx',  // 返回純文本或 JSON {value: '...'}
        type: 'POST',
        data: { id: record.id },
        success: function(val) {
            var editorC = $('#dd').datagrid('getEditor', { index: rowIndex, field: 'NMJ06' });
            $(editorC.target).val(val);  // TextBox 直接 val()
        },
        error: function(xhr) { console.error('NMJ06 獲取失敗', xhr); }
    });
}

關鍵技術點

優化建議：統一 AJAX 獲取所有聯動值

onSelect: function(record) {
    var rowIndex = $('#dd').datagrid('getRowIndex', $('#dd').datagrid('getSelected'));
    $.ajax({
        url: '/handler/getLinkedData.ashx',
        data: { id: record.id },
        success: function(data) {  // data: { comboB: [...], textC: '...' }
            // 更新 Combobox B
            var $comboB = $($('#dd').datagrid('getEditor', {index:rowIndex, field:'NMJ05'}).target);
            $comboB.combobox('loadData', data.comboB);
            // 回填 TextBox C
            $($('#dd').datagrid('getEditor', {index:rowIndex, field:'NMJ06'}).target).val(data.textC);
        }
    });
}

減少網絡請求，保證數據一致性，體驗更流暢。

新增行特殊處理

// 新增按鈕點擊
$('#dd').datagrid('appendRow', { NMJ04: '', NMJ05: '', NMJ06: '' });
var newIndex = $('#dd').datagrid('getRows').length - 1;
$('#dd').datagrid('beginEdit', newIndex);
// 可選：預載默認數據源
var $comboB = $($('#dd').datagrid('getEditor', {index:newIndex, field:'NMJ05'}).target);
$comboB.combobox('loadData', defaultComboBData);

掌握 getEditor 返回值結構、combobox('reload'/'loadData') 差異、統一 AJAX 協同更新，構建穩健的 DataGrid 聯動編輯體驗。

1. 上一篇文章： Android ViewPager 類似左右切換效果開源庫推薦：JazzyViewPager 多樣化動畫
2. 下一篇文章： Spring Session 監聽器無法啟動：WebApplicationContext 獲取 Bean 正確姿勢

程式設計綜合問答

JSP 頁面中兩行 JavaScript 代碼解析：superagent 與 CSRF Token 獲取

在 JSP 頁面中常見到前端模組化載入與安全性 Token

C++ Qt 自定義菜單 QWidgetAction 構造函數缺失父類調用導致編譯錯誤

問題代碼片段 用戶提供多張截圖，顯示自定義 MyAction

Android 自定義 UI 實現賽程對陣圖：2-16 隊錦標賽頁面設計指南

需求背景與核心挑戰 在近期的 Android 專案中，需要開

Java Swing 專案除錯：字串分割正則導致玩具銷售系統異常

錯誤現象 程式運行時拋出異常或行為異常，資料讀取邏輯失效。