dhtmlxGrid載入完成後自動定位焦點到最後一行實現方案

dhtmlxGrid是功能強大的客戶端網格組件，常用於AJAX應用的數據表格展示。需求：Grid數據異步載入完成後，自動將選中焦點定位到最後一行。利用loadXML的回調參數afterCall配合selectCell、getRowsNum輕鬆實現。

核心API

• grid.loadXML(url, afterCall)：異步載入XML數據，載入完成後自動調用afterCall函數。
• grid.getRowsNum()：返回當前Grid總行數。
• grid.selectCell(rowIndex, colIndex, preserveSelection)：選中指定單元格，preserveSelection=true保持滾動位置。
• grid.rowsCol[index]：獲取指定索引的行對象（內部數組）。

完整實現代碼

<div id="gridbox" style="width:600px; height:400px;"></div>
<script>
    // 定義載入完成後的回調函數
    function scrollToLastRow() {
        var rowCount = mygrid.getRowsNum();
        if (rowCount > 0) {
            // 索引從0開始，最後一行索引為 rowCount-1
            // 選中第0列，preserveSelection=true 保持視圖不跳動
            mygrid.selectCell(mygrid.rowsCol[rowCount - 1], 0, true);
        }
    }

    // 初始化Grid
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../imgs/");
    mygrid.setHeader("Author,Title");
    mygrid.setInitWidths("150,150");
    mygrid.setColAlign("left,left");
    mygrid.setColTypes("ro,link");      // 唯讀、超鏈接
    mygrid.setColSorting("str,str");
    mygrid.setColumnColor("white,#d5f1ff");
    mygrid.init();

    // 載入數據，註冊回調
    mygrid.loadXML("grid_links.xml", scrollToLastRow);
</script>

關鍵細節

• 行索引邊界：getRowsNum()返回行數，最後一行索引為rowCount - 1，需判空防呆。
• selectCell第三參數：true表示保持選中狀態不觸發onRowSelect事件，避免副作用；false會觸發選中事件。
• 異步時序：回調在XML解析完、DOM構建完後同步調用，此時rowsCol已就緒，可安全操作。
• 滾動到可視區：若Grid高度受限需自動滾動，可配合mygrid.objBox.scrollTop = mygrid.rowsCol[rowCount-1].offsetTop或調用mygrid.showRow(rowCount-1)（若版本支持）。

擴展場景

常見坑點

• 數據為空時getRowsNum()=0，直接selectCell拋錯 → 必須判空。
• 同步調用loadXML（舊版參數sync=true）時回調不會觸發 → 僅異步模式生效。
• Grid未init()前調用API → 遵循init() → loadXML()順序。

dhtmlxGrid的異步回調機制配合豐富的客戶端API，讓複雜交互邏輯保持簡潔。掌握afterCall模式，是駕馭該組件的關鍵。

1. 上一篇文章： JSP頁面輸出捕獲緩存技術：Filter包裝Response實現靜態化加速
2. 下一篇文章： JSP驗證碼生成、顯示、驗證與無刷新刷新完整實戰

關於JSP

基於 JSP + Tomcat 7 + HTML5 WebSocket 實現簡易聊天室 Demo 全程實戰

WebSocket 協議（RFC 6455）實現瀏覽器與服務

JSP EL 表達式語法與實戰指南

JSP EL 表達式語法與實戰指南 EL（Expressio

JSP 簡明教程（三）：九大隱含對象速查與常用方法表

JSP 簡明教程（三）：九大隱含對象速查與常用方法表 JSP

JBuilder2005 實戰：Switch 控制頁面實現用戶驗證與頁面轉發

JSP 切換控制頁面：Bean 自動映射表單數據、數據庫驗證