C# 高效能開發實戰：樹狀列表動態載入核心腳本與錯誤處理（中）

第一段 HTML 代碼塊：動態載入基礎設施

當 DynamicLoadChildNodes=true 時，控件輸出支援客戶端動態載入的基礎設施代碼：

1. 暫存 XML 資料島與事件綁定

<xml id='SkyTreeViewControlTempXML' onreadystatechange='SkyTreeViewControlDynamicLoadChildNodes()'></xml>

2. 全域變數與核心載入函數

var SkyTreeViewControlDynamicRootNodeID;

function SkyTreeViewControlDynamicLoadChildNodes() {
  var xml = document.getElementById('SkyTreeViewControlTempXML');
  if (!xml || xml.readyState != 'complete') return;

  var rootNode = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_text');
  if (!rootNode) return;

  var xsl = document.getElementById('SkyTreeViewControlXSLT');
  var html = '', errorFlag = false;

  // 錯誤檢查：XSLT 缺失、XML 解析錯誤、無根節點
  if (!xsl) { html = '缺失XSLT資料'; errorFlag = true; }
  else if (xml.XMLDocument.parseError.errorCode != 0) {
    html = '錯誤:' + xml.XMLDocument.parseError.reason + '[' + xml.XMLDocument.parseError.url + ']';
    errorFlag = true;
  }
  else if (!xml.XMLDocument.documentElement) {
    html = '未找到根節點'; errorFlag = true;
  }
  else {
    // 將 RootID 寫入 XML 文件根元素，供 XSLT 使用
    xml.XMLDocument.documentElement.setAttribute('RootID', SkyTreeViewControlDynamicRootNodeID);
    html = xml.XMLDocument.transformNode(xsl.XMLDocument);
  }

  // 移除載入提示，插入生成的 HTML
  var lbl = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_Loading');
  if (lbl) {
    if (errorFlag) { lbl.innerHTML = '<br/>' + html; return; }
    lbl.insertAdjacentHTML('afterEnd', html);
    lbl.parentNode.removeChild(lbl);
  } else {
    rootNode.insertAdjacentHTML('afterEnd', html);
  }

  // 更新父節點圖示為展開狀態
  var expend = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_expend');
  var icon = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_icon');
  var text = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_text');
  var table = document.getElementById(SkyTreeViewControlDynamicRootNodeID + '_table');
  if (expend && icon && text && table) {
    // 交換 src 與 SrcBack 實現圖示切換
    var srcBack = icon.src; icon.src = icon.getAttribute('SrcBack'); icon.setAttribute('SrcBack', srcBack);
    srcBack = expend.src; expend.src = expend.getAttribute('SrcBack'); expend.setAttribute('SrcBack', srcBack);
  }
  SkyTreeViewControlDynamicRootNodeID = null;
}

設計亮點

• 完整錯誤處理： 涵蓋 XSLT 缺失、XML 解析錯誤、無根節點等異常情況，並友善顯示錯誤訊息。
• 載入狀態視覺回饋： 透過 _Loading 標籤顯示「正在載入」動畫，載入完成後自動移除。
• 圖示狀態同步： 載入成功後自動切換父節點展開/摺疊圖示，保持 UI 一致性。
• 記憶體管理： 使用 insertAdjacentHTML 高效插入 DOM，並清理暫存變數。

此腳本為控件「按需載入」特性提供了健壯的客戶端支撐。