js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
更新時(shí)間：2012年11月24日 13:49:46 作者：
在實(shí)際項(xiàng)目中，遇到一個(gè)問(wèn)題，首先彈出一個(gè)新窗口，新窗口中放了一個(gè)TreeView控件，現(xiàn)在要解決的是，如何單擊TreeView中一個(gè)節(jié)點(diǎn)，返回Text和Value到父頁(yè)面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)
在實(shí)際項(xiàng)目中，遇到一個(gè)問(wèn)題，首先彈出一個(gè)新窗口，新窗口中放了一個(gè)TreeView控件，TreeView控件的數(shù)據(jù)綁定在我的上一篇隨筆(TreeView綁定XML數(shù)據(jù)源C#代碼示例)中有講到，現(xiàn)在要解決的是，如何單擊TreeView中一個(gè)節(jié)點(diǎn)，返回Text和Value到父頁(yè)面并關(guān)閉該新窗口。
首先，在后臺(tái)代碼中為T(mén)reeView添加屬性onclick以支持TreeView的客戶端事件，代碼如下：
if (!IsPostBack)
{
TreeView1.Attributes.Add("onclick", "ReturnValue()");//ReturnValue為javascript函數(shù)
BindTreeView();
}
那現(xiàn)在就要解決如何通過(guò)js獲得TreeView中被選中的那個(gè)節(jié)點(diǎn)，腳本如下：
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();
}
其實(shí)這里用了點(diǎn)小花招，因?yàn)槲覍?shí)在不知道在哪個(gè)屬性里能獲得綁定給TreeView的ValueField的值，所以，Value值我一并綁給了NavigateUrl，也就是寫(xiě)黃色部分代碼的原因，Html代碼如下：
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1">
<DataBindings>
<asp:TreeNodeBinding TextField="NAME" ValueField="Value" NavigateUrlField="Value" SelectAction="None" />
</DataBindings>
</asp:TreeView>
紅色部分代碼是用來(lái)獲取TreeView上顯示文字的，因?yàn)槿绻闳ゲ榭丛次募脑挘銜?huì)發(fā)現(xiàn)，TreeView的Text屬性值被放在了SPAN中。
綠色部分代碼是用來(lái)回填父頁(yè)面的，但是要注意的是，"txtUnit"必須是客戶端控件，因?yàn)槿绻欠?wù)器端控件，彈窗在編譯時(shí)會(huì)報(bào)不存在該控件。
這樣，我需要的功能就實(shí)現(xiàn)了！另外，有人可能會(huì)說(shuō)，父頁(yè)面中用來(lái)裝載回填值的是客戶端控件，那如果要在服務(wù)器事件中使用怎么辦？也很簡(jiǎn)單，C#代碼如下：
Request.Form["txtUnit"].ToString();
但是要注意了，這里的"txtUnit"可不是控件ID，而是name屬性了！
首先，在后臺(tái)代碼中為T(mén)reeView添加屬性onclick以支持TreeView的客戶端事件，代碼如下：
復(fù)制代碼 代碼如下:
if (!IsPostBack)
{
TreeView1.Attributes.Add("onclick", "ReturnValue()");//ReturnValue為javascript函數(shù)
BindTreeView();
}
那現(xiàn)在就要解決如何通過(guò)js獲得TreeView中被選中的那個(gè)節(jié)點(diǎn)，腳本如下：
復(fù)制代碼 代碼如下:
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();
}
其實(shí)這里用了點(diǎn)小花招，因?yàn)槲覍?shí)在不知道在哪個(gè)屬性里能獲得綁定給TreeView的ValueField的值，所以，Value值我一并綁給了NavigateUrl，也就是寫(xiě)黃色部分代碼的原因，Html代碼如下：
復(fù)制代碼 代碼如下:
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1">
<DataBindings>
<asp:TreeNodeBinding TextField="NAME" ValueField="Value" NavigateUrlField="Value" SelectAction="None" />
</DataBindings>
</asp:TreeView>
紅色部分代碼是用來(lái)獲取TreeView上顯示文字的，因?yàn)槿绻闳ゲ榭丛次募脑挘銜?huì)發(fā)現(xiàn)，TreeView的Text屬性值被放在了SPAN中。
綠色部分代碼是用來(lái)回填父頁(yè)面的，但是要注意的是，"txtUnit"必須是客戶端控件，因?yàn)槿绻欠?wù)器端控件，彈窗在編譯時(shí)會(huì)報(bào)不存在該控件。
這樣，我需要的功能就實(shí)現(xiàn)了！另外，有人可能會(huì)說(shuō)，父頁(yè)面中用來(lái)裝載回填值的是客戶端控件，那如果要在服務(wù)器事件中使用怎么辦？也很簡(jiǎn)單，C#代碼如下：
Request.Form["txtUnit"].ToString();
但是要注意了，這里的"txtUnit"可不是控件ID，而是name屬性了！
您可能感興趣的文章:
- JS控制TreeView的結(jié)點(diǎn)選擇
- Bootstrap樹(shù)形菜單插件TreeView.js使用方法詳解
- 動(dòng)態(tài)加載dtree.js樹(shù)treeview(示例代碼)
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- js獲取Treeview選中的節(jié)點(diǎn)(C#選中CheckBox項(xiàng))
- 用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
- 選擇TreeView控件的樹(shù)狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
- javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致
- js編寫(xiě)的treeview使用方法
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關(guān)于小程序開(kāi)發(fā)指南之全局配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼
這篇文章主要給大家介紹了關(guān)于uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
僅Firefox中鏈接A無(wú)法實(shí)現(xiàn)模擬點(diǎn)擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫(xiě)的事件模塊在Firefox5中無(wú)法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法，因此模擬點(diǎn)擊直接調(diào)用click方法即可。2011-07-07
javascript時(shí)間排序算法實(shí)現(xiàn)活動(dòng)秒殺倒計(jì)時(shí)效果
這篇文章主要介紹了javascript時(shí)間排序算法實(shí)現(xiàn)活動(dòng)秒殺倒計(jì)時(shí)效果，即一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JS如何判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器
本篇文章主要介紹了JS判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器的代碼，非常具有實(shí)用價(jià)值，有興趣的可以了解一下。2017-03-03
js正則表達(dá)exec與match的區(qū)別說(shuō)明
本篇文章主要是對(duì)js正則表達(dá)exec與match的區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語(yǔ)言中比較特殊的一個(gè)，可以單獨(dú)使用作為判斷運(yùn)算符，也常被用于for...in循環(huán)中遍歷對(duì)象屬性2011-09-09
js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域
這篇文章主要介紹了通過(guò)js實(shí)現(xiàn)點(diǎn)擊div區(qū)域外隱藏div區(qū)域，原理及示例代碼如下2014-06-06
淺談javascript中for in 和 for each in的區(qū)別
兩個(gè)的作用都用來(lái)遍歷對(duì)象，但為什么有了for in語(yǔ)句了還要for each in語(yǔ)句呢，后來(lái)看了下for each in開(kāi)發(fā)的文檔，for each in是作為E4X標(biāo)準(zhǔn)的一部分在javascript 1.6中發(fā)布的，而且它不是ECMAScript標(biāo)準(zhǔn)的一部分2015-04-04