用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
1.單選TreeView中的任一節(jié)點(diǎn)
2.當(dāng)一節(jié)點(diǎn)CheckBox屬性值改變時(shí):子節(jié)點(diǎn)的CheckBox屬性值跟隨其改動(dòng),父節(jié)點(diǎn)不變;
父節(jié)點(diǎn)的所有子節(jié)點(diǎn)的CheckBox屬性值都為false時(shí)才為false;有一個(gè)子節(jié)點(diǎn)的CheckBox屬性值true時(shí)則為true.
3.當(dāng)一節(jié)點(diǎn)CheckBox屬性值改變時(shí):子節(jié)點(diǎn)、父節(jié)點(diǎn)的CheckBox屬性值跟隨其改動(dòng);
父節(jié)點(diǎn)的所有子節(jié)點(diǎn)的CheckBox屬性值都為false時(shí)才為false;有一個(gè)子節(jié)點(diǎn)的CheckBox屬性值true時(shí)則為true.
javascript代碼
function OnTreeNodeChecked(id, type) {
//獲取觸發(fā)事件的對(duì)象
var element = window.event.srcElement;
//如果對(duì)象不是checkbox則不處理
if (!IsCheckBox(element))
return;
//獲取checked狀態(tài)
var isChecked = element.checked;
//獲取tree對(duì)象
var tree = TV2_GetTreeById(id);
//獲取element的相對(duì)結(jié)點(diǎn)(如果是葉結(jié)點(diǎn),則就為element,否則為其<A>結(jié)點(diǎn))
var node = TV2_GetNode(tree, element);
switch (type) {
case "1":
SetNodesUnChecked(tree);
element.checked = true;
break;
case "2":
TV2_SetChildNodesCheckStatus(node, isChecked);
break;
case "3":
TV2_SetChildNodesCheckStatus(node, isChecked);
var parent = TV2_GetParentNode(tree, node);
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
}
}
//set all nodes checkbox nochecked
function SetNodesUnChecked(TreeNode) {
var inputs = WebForm_GetElementsByTagName(TreeNode, "INPUT");
if (inputs == null || inputs.length == 0)
return;
for (var i = 0; i < inputs.length; i++) {
if (IsCheckBox(inputs[i]))
inputs[i].checked = false;
}
}
//set child nodes checkbox status
function TV2_SetChildNodesCheckStatus(node, isChecked) {
//返回當(dāng)前node所在的div層
var childNodes = TV2i_GetChildNodesDiv(node);
if (childNodes == null)
return;
var inputs = WebForm_GetElementsByTagName(childNodes, "INPUT");
if (inputs == null || inputs.length == 0)
return;
for (var i = 0; i < inputs.length; i++) {
if (IsCheckBox(inputs[i]))
inputs[i].checked = isChecked;
}
}
//change parent node checkbox status after child node changed
function TV2_NodeOnChildNodeCheckedChanged(tree, node, isChecked) {
if (node == null)
return;
var childNodes = TV2_GetChildNodes(tree, node);
if (childNodes == null || childNodes.length == 0)
return;
var isAllSame = true;
for (var i = 0; i < childNodes.length; i++) {
var item = childNodes[i];
var value = TV2_NodeGetChecked(item);
if (isChecked != value) {
isAllSame = false;
break;
}
}
var parent = TV2_GetParentNode(tree, node);
if (isAllSame) {
TV2_NodeSetChecked(node, isChecked);
TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
}
else {
TV2_NodeSetChecked(node, true);
TV2_NodeOnChildNodeCheckedChanged(tree, parent, true);
}
}
//get node relative element(etc. checkbox)
function TV2_GetNode(tree, element) {
var id = element.id.replace(tree.id, "");
id = id.toLowerCase().replace(element.type, "");
id = tree.id + id;
var node = document.getElementById(id);
if (node == null) //leaf node, no "A" node
return element;
return node;
}
//get parent node
function TV2_GetParentNode(tree, node) {
var div = WebForm_GetParentByTagName(node, "DIV");
//The structure of node: <table>information of node</table><div>child nodes</div>
var table = div.previousSibling;
if (table == null)
return null;
return TV2i_GetNodeInElement(tree, table);
}
//get child nodes array
function TV2_GetChildNodes(tree, node) {
if (TV2_NodeIsLeaf(node))
return null;
var children = new Array();
var div = TV2i_GetChildNodesDiv(node);
var index = 0;
for (var i = 0; i < div.childNodes.length; i++) {
var element = div.childNodes[i];
if (element.tagName != "TABLE")
continue;
var child = TV2i_GetNodeInElement(tree, element);
if (child != null)
children[index++] = child;
}
return children;
}
function TV2_NodeIsLeaf(node) {
return !(node.tagName == "A"); //Todo
}
function TV2_NodeGetChecked(node) {
var checkbox = TV2i_NodeGetCheckBox(node);
return checkbox.checked;
}
function TV2_NodeSetChecked(node, isChecked) {
var checkbox = TV2i_NodeGetCheckBox(node);
if (checkbox != null)
checkbox.checked = isChecked;
}
function IsCheckBox(element) {
if (element == null)
return false;
return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");
}
//get tree
function TV2_GetTreeById(id) {
return document.getElementById(id);
}
//////////////////////////////////////////////////////////////////////////////////////////////
//private mothods, with TV2i_ prefix
//////////////////////////////////////////////////////////////////////////////////////////////
//get div contains child nodes
function TV2i_GetChildNodesDiv(node) {
//如果node.tagName == "A"則不處理
if (TV2_NodeIsLeaf(node))
return null;
var childNodsDivId = node.id + "Nodes";
return document.getElementById(childNodsDivId);
}
//find node in element
function TV2i_GetNodeInElement(tree, element) {
var node = TV2i_GetNodeInElementA(tree, element);
if (node == null) {
node = TV2i_GetNodeInElementInput(tree, element);
}
return node;
}
//find "A" node
function TV2i_GetNodeInElementA(tree, element) {
var as = WebForm_GetElementsByTagName(element, "A");
if (as == null || as.length == 0)
return null;
var regexp = new RegExp("^" + tree.id + "n\\d+$");
for (var i = 0; i < as.length; i++) {
if (as[i].id.match(regexp)) {
return as[i];
}
}
return null;
}
//find "INPUT" node
function TV2i_GetNodeInElementInput(tree, element) {
var as = WebForm_GetElementsByTagName(element, "INPUT");
if (as == null || as.length == 0)
return null;
var regexp = new RegExp("^" + tree.id + "n\\d+");
for (var i = 0; i < as.length; i++) {
if (as[i].id.match(regexp)) {
return as[i];
}
}
return null;
}
//get checkbox of node
function TV2i_NodeGetCheckBox(node) {
if (IsCheckBox(node))
return node;
var id = node.id + "CheckBox";
return document.getElementById(id);
}
html代碼
<asp:TreeView ID="TreeView1" runat="server" ImageSet="Msdn" ShowCheckBoxes="All"
ShowLines="True" BorderWidth="0px" Height="430px" Width="250px" Font-Size="Small"
OnClick="OnTreeNodeChecked()">
</asp:TreeView>
- bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
- DevExpress實(shí)現(xiàn)自定義TreeListNode的Tooltip的方法
- DevExpress實(shí)現(xiàn)禁用TreeListNode CheckBox的方法
- node在兩個(gè)div之間移動(dòng),用ztree實(shí)現(xiàn)
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類(lèi)型/自制)
- TreeNodeCheckChanged事件觸發(fā)方法代碼實(shí)例
相關(guān)文章
JavaScript中為什么null==0為false而null大于=0為true(個(gè)人研究)
今天閑來(lái)沒(méi)啥事,研究了一下有關(guān)“null”和“0”的關(guān)系。希望大家看完了能有所收獲,在此與大家分享下,希望也可以受益匪淺2013-09-09微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳值以及獲取值的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳值以及獲取值的方法,結(jié)合實(shí)例形式總結(jié)分析了微信小程序頁(yè)面跳轉(zhuǎn)及傳值的常用操作技巧,需要的朋友可以參考下2017-12-12JavaScript參數(shù)個(gè)數(shù)可變的函數(shù)舉例說(shuō)明
JavaScript允許一個(gè)函數(shù)傳遞個(gè)數(shù)可變的參數(shù),因?yàn)橛衋rguments這個(gè)內(nèi)置對(duì)象,它一個(gè)函數(shù)傳遞的所有參數(shù)的數(shù)組2014-10-10JavaScript組成、引入、輸出、運(yùn)算符基礎(chǔ)知識(shí)講解
JavaScript 被數(shù)百萬(wàn)計(jì)的網(wǎng)頁(yè)用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies,以及更多的應(yīng)用。這篇文章主要介紹了JavaScript組成、引入、輸出、運(yùn)算符基礎(chǔ)知識(shí)講解,需要的朋友可以參考下2016-12-12統(tǒng)計(jì)出現(xiàn)最多的字符次數(shù)的js代碼
一小段代碼,經(jīng)常出現(xiàn)在面試筆試題中的:統(tǒng)計(jì)一個(gè)字符串中出現(xiàn)最多的字符的次數(shù),可以是英文或者數(shù)字。2010-12-12JS禁止瀏覽器右鍵查看元素或按F12審查元素自動(dòng)關(guān)閉頁(yè)面示例代碼
這篇文章主要給大家介紹了關(guān)于利用Javascript如何禁止瀏覽器右鍵查看元素,或者通過(guò)按F12審查元素,觸犯這兩個(gè)條件會(huì)自動(dòng)并關(guān)閉頁(yè)面的相關(guān)資料,通過(guò)設(shè)置這個(gè)可以防止別人扒下自己的網(wǎng)頁(yè),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-09-09詳解webpack require.ensure與require AMD的區(qū)別
本篇文章主要介紹了詳解webpack require.ensure與require AMD的區(qū)別,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12