EasyUI Datagrid動態控制操作列按鈕顯示：根據前置Select值變化

需求場景

EasyUI Datagrid中，某列為<select>，根據選中值動態調整同行操作列按鈕數量/類型。

核心實現

<select onchange="schr(this)">
  <option value="1">類型A</option>
  <option value="2">類型B</option>
</select>

function schr(selectElem) {
    // 1. 獲取所在行TR
    var $tr = $(selectElem).closest('tr');
    
    // 2. 獲取操作列TD（最後一列）
    var $td = $tr.find('td:last');  // 注意：若非最後一列需調整選擇器
    
    // 3. 根據選中值動態構建按鈕
    var val = $(selectElem).val();
    var buttonsHtml = '';
    
    if (val === '1') {
        buttonsHtml = '<a href="#" class="easyui-linkbutton" onclick="edit(this)">編輯</a>';
    } else if (val === '2') {
        buttonsHtml = '<a href="#" class="easyui-linkbutton" onclick="edit(this)">編輯</a> ' +
                      '<a href="#" class="easyui-linkbutton" onclick="del(this)">刪除</a>';
    }
    
    // 4. 更新單元格內容並重新解析EasyUI
    $td.html(buttonsHtml).find('a').linkbutton();
}

關鍵技術點

1. closest('tr')：向上查找最近的行元素
2. find('td:last')：定位操作列（需確認列位置）
3. .linkbutton()：關鍵步驟，將動態插入的HTML初始化為EasyUI組件
4. 事件綁定用onclick屬性或.on()委託

進階優化

// 使用formatter函數統一管理（推薦）
$('#dg').datagrid({
    columns: [[
        {field: 'type', title: '類型', width: 100, 
         formatter: function(value, row) {
             return '<select onchange="typeChange(this,' + row.id + ')">...</select>';
         }},
        {field: 'action', title: '操作', width: 200,
         formatter: function(value, row) {
             return generateButtons(row.type, row.id);
         }}
    ]]
});

function typeChange(selectElem, rowId) {
    // 更新數據源
    $('#dg').datagrid('updateRow', {
        index: $('#dg').datagrid('getRowIndex', rowId),
        row: { type: $(selectElem).val() }
    });
    // 刷新操作列
    $('#dg').datagrid('refreshRow', rowIndex);
}

避坑指南

• 動態插入HTML後必須調用.linkbutton()初始化樣式/事件
• 避免重複綁定事件，用.off().on()或檢查.data('bound')
• 大數據量時考慮formatter模式而非逐行操作DOM

核心模式：DOM定位 → HTML構建 → 組件初始化，掌握此模式應對所有動態列需求。