javascript 擷取TreeView控制項選中節點的Text和Value )

javascript 擷取TreeView控制項選中節點的Text和Value

在實際項目中，遇到一個問題，首先彈出一個新視窗，新視窗中放了一個TreeView控制項，TreeView控制項的資料繫結在我的上一篇隨筆 (TreeView綁定XML資料來源C#程式碼範例)中有講到，現在要解決的是，如何單擊TreeView中一個節點，返回Text和Value到父頁面並關閉該新視窗。

首先，在後台代碼中為TreeView添加屬性onclick以支援TreeView的用戶端事件，代碼如下：

if (!IsPostBack)
{
      TreeView1.Attributes.Add("onclick", "ReturnValue()");//ReturnValue為javascript函數
      BindTreeView();
}

那現在就要解決如何通過js獲得TreeView中被選中的那個節點，指令碼如下：

function ReturnValue() {
      var objNode = event.srcElement;
      var unitid = event.srcElement.href;
      if (objNode.tagName != "SPAN") {
            return;
      }
      window.opener.document.getElementById("txtUnit").value = objNode.getAttribute("innerHtml");
      window.opener.document.getElementById("txtUnitID").value = unitid;
      window.close();
}

其實這裡用了點小花招，因為我實在不知道在哪個屬性裡能獲得綁定給TreeView的ValueField的值，所以，Value值我一併綁給了 NavigateUrl，也就是寫黃色部分代碼的原因，Html代碼如下：

<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1">
      <DataBindings>
            <asp:TreeNodeBinding TextField="NAME" ValueField="Value" NavigateUrlField="Value" SelectAction="None" />
      </DataBindings>
</asp:TreeView>

紅色部分代碼是用來擷取TreeView上顯示文字的，因為如果你去查看源檔案的話，你會發現，TreeView的Text屬性值被放在了SPAN 中。

綠色部分代碼是用來回填父頁面的，但是要注意的是，"txtUnit"必須是用戶端控制項，因為如果是伺服器端控制項，彈窗在編譯時間會報不存在該控制項。

這樣，我需要的功能就實現了！另外，有人可能會說，父頁面中用來裝載回填值的是用戶端控制項，那如果要在伺服器事件中使用怎麼辦？也很簡單，C#代碼如下：

Request.Form["txtUnit"].ToString();

但是要注意了，這裡的"txtUnit"可不是控制項ID，而是name屬性了！