EasyUI DataGrid IE 下行編輯器控件隨滾動條浮動：版本兼容性問題

現象描述

IE 瀏覽器中，DataGrid 啟用行編輯模式時，編輯器內的輸入框、下拉框等控件隨著垂直滾動條滾動而脫離單元格位置，懸浮在頁面上。

根本原因

**EasyUI 版本過舊**。1.4.1 及以上版本已修復此 IE 專有渲染 Bug。舊版本 (1.3.x, 1.2.x) 在 IE 的 position: absolute 定位計算上有缺陷，滾動時未重新計算編輯器座標。

解決方案

方案一：升級 EasyUI (最徹底)

• 下載 EasyUI 1.5.x 或最新 1.10.x
• 替換專案中 jquery.easyui.min.js、easyui.css、icons.css、images/ 目錄
• 檢查破壞性變更：官方變更日誌

方案二：CSS Hack 臨時修復 (不升級時)

<!-- 僅針對 IE -->
<!--[if IE]>
<style>
    .datagrid-editor {
        position: relative !important;  /* 強制相對定位 */
    }
    .datagrid-row-editing .datagrid-cell {
        overflow: visible !important;   /* 防止裁剪 */
    }
</style>
<![endif]-->

方案三：JS 重新定位補丁

// 在 onAfterEdit / onBeginEdit 事件中
$('#dg').datagrid({
    onBeginEdit: function(index, row) {
        // 強制瀏覽器重繪
        setTimeout(function() {
            var editors = $('#dg').datagrid('getEditors', index);
            editors.forEach(function(ed) {
                $(ed.target).css('position', 'relative');
            });
        }, 0);
    }
});

Layout 配置檢查

確保 DataGrid 在 固定高度容器 中，而非 fit: true 的全屏 layout 直接包裹：

<div style="height: 500px; overflow: auto;">  <!-- 固定高度容器 -->
    <table id="dg" class="easyui-datagrid"></table>
</div>

版本對照表

專家建議

**不要在 2024 年繼續維護 EasyUI 1.x 舊專案**。考慮遷移至：

• Bootstrap Table + jQuery (輕量、現代)
• Vue/React + Element Plus / Ant Design (前後端分離)
• Blazor (若堅持 .NET 全棧)