使用jQuery Ajax调用Treeview复选框检查事件 [英] calling Treeview checkbox checked event using jQuery Ajax

问题描述

我生成了一个动态树视图复选框，现在当我选择一个复选框时，一个javascript函数被触发，在该函数中我使用未执行的Jquery Ajax调用一个ASP.net webmethod。



这是我的javascript函数

I've generate one dynamic treeview checkbox, now while i select one checkbox one javascript function is fired, inside that function i call one ASP.net webmethod using Jquery Ajax which is not executed.

Here is my javascript function

<script type="text/javascript">
        function OnTreeClick(evt) {
            var src = window.event != window.undefined ? window.event.srcElement : evt.target;
            var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
            if (isChkBoxClick) {
                if (src.checked == true) {
                    var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;

                    var nodeValue = GetNodeValue(getNextSibling(src));

                    document.getElementById("label").innerHTML += nodeText + ",";

                    //send value to server side
                    $.ajax({
                    type: "POST",
                    url: "Default.aspx/services",
                    data: { "Name": nodeValue },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                    alert(response);
                    }
            });
                    //ends
                }
                else {
                    var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
                    var nodeValue = GetNodeValue(getNextSibling(src));
                    var val = document.getElementById("label").innerHTML;
                    document.getElementById("label").innerHTML = val.replace(nodeText + ",", "");
                }
                var parentTable = GetParentByTagName("table", src);
                var nxtSibling = parentTable.nextSibling;
                //check if nxt sibling is not null & is an element node
                if (nxtSibling && nxtSibling.nodeType == 1) {
                    //if node has children
                    if (nxtSibling.tagName.toLowerCase() == "div") {
                        //check or uncheck children at all levels
                        CheckUncheckChildren(parentTable.nextSibling, src.checked);
                    }

                }
                //check or uncheck parents at all levels
                CheckUncheckParents(src, src.checked);
            }
        }

        function CheckUncheckChildren(childContainer, check) {
            var childChkBoxes = childContainer.getElementsByTagName("input");
            var childChkBoxCount = childChkBoxes.length;
            for (var i = 0; i < childChkBoxCount; i++) {
                childChkBoxes[i].checked = check;
            }
        }

        function CheckUncheckParents(srcChild, check) {
            var parentDiv = GetParentByTagName("div", srcChild);
            var parentNodeTable = parentDiv.previousSibling;
            if (parentNodeTable) {
                var checkUncheckSwitch;
                //checkbox checked
                if (check) {
                    var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                    if (isAllSiblingsChecked)
                        checkUncheckSwitch = true;

                    else
                        return; //do not need to check parent if any(one or more) child not checked
                }
                else //checkbox unchecked
                {
                    checkUncheckSwitch = false;
                }

                var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
                if (inpElemsInParentTable.length > 0) {
                    var parentNodeChkBox = inpElemsInParentTable[0];
                    parentNodeChkBox.checked = checkUncheckSwitch;
                    //do the same recursively
                    CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
                }
            }
        }

        function AreAllSiblingsChecked(chkBox) {
            var parentDiv = GetParentByTagName("div", chkBox);
            var childCount = parentDiv.childNodes.length;
            for (var i = 0; i < childCount; i++) {
                if (parentDiv.childNodes[i].nodeType == 1) {
                    //check if the child node is an element node
                    if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                        var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                        //if any of sibling nodes are not checked, return false
                        if (!prevChkBox.checked) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        //utility function to get the container of an element by tagname
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        }

        function getNextSibling(element) {
            var n = element;
            do n = n.nextSibling;
            while (n && n.nodeType != 1);
            return n;
        }

        //returns NodeValue
        function GetNodeValue(node) {
            var nodeValue = "";
            var nodePath = node.href.substring(node.href.indexOf(",") + 2, node.href.length - 2);
            var nodeValues = nodePath.split("\\");
            if (nodeValues.length > 1)
                nodeValue = nodeValues[nodeValues.length - 1];
            else
                nodeValue = nodeValues[0].substr(1);
            return nodeValue;
        }
        function OnSuccess(response) {
            alert(response.d);
        }
    </script>

这里是asp treeview控件

And here is the asp treeview control

<asp:TreeView ID="tvTables" runat="server"  ShowCheckBoxes="Leaf" OnClick="OnTreeClick(event)">
                    </asp:TreeView>

请帮我解决这个问题。



提前致谢。

Please help me to solve this.

Thanks in advance.

推荐答案

.ajax（{
类型： POST，
url： Default.aspx / services，
data：{ 名称：nodeValue}，
contentType： 应用/ JSON; charset = utf-8，
dataType： json，
成功：OnSuccess，
失败：函数（响应）{
alert（响应）;
}
}）;
// 结束
}
其他 {
var nodeText = getNextSibling（src）.innerText || getNextSibling（src）.innerHTML;
var nodeValue = GetNodeValue（getNextSibling（src））;
var val = document.getElementById（ label）。innerHTML;
document.getElementById（ label）。innerHTML = val.replace（nodeText + ，， ）;
}
var parentTable = GetParentByTagName（ table，src）;
var nxtSibling = parentTable.nextSibling;
// 检查nxt sibling是否为null&是元素节点
如果（nxtSibling&& nxtSibling.nodeType == 1 ）{
// 如果节点有子节点
if （nxtSibling.tagName.toLowerCase（）== div）{
// 检查或取消选中所有级别的儿童
CheckUncheckChildren（parentTable.nextSibling，src。 checked ）;
}

}
// 检查或取消选中父母级别
CheckUncheckParents（src，src。 checked ）;
}
}

函数CheckUncheckChildren（childContainer，check）{
var childChkBoxes = childContainer.getElementsByTagName （ input）;
var childChkBoxCount = childChkBoxes.length;
for （ var i = 0 ; i < childChkBoxCount; i ++）{
childChkBoxes [i]。 checked =校验;
}
}

函数CheckUncheckParents（srcChild，check）{
var parentDiv = GetParentByTagName（< span class =code-string> div，srcChild）;
var parentNodeTable = parentDiv.previousSibling;
if （parentNodeTable）{
var checkUncheckSwitch;
// 复选框选中
if （check）{
var isAllSiblingsChecked = AreAllSiblingsChecked（srcChild）;
if （isAllSiblingsChecked）
checkUncheckSwitch = true ;

else
return ; // 如果未检查任何（一个或多个）子项，则无需检查父项
}
其他 // 复选框未选中
{
checkUncheckSwitch = false ;
}

var inpElemsInParentTable = parentNodeTable.getElementsByTagName（ < span class =code-string> input）;
if （inpElemsInParentTable.length > 0 ）{
var parentNodeChkBox = inpElemsInParentTable [ 0 ];
parentNodeChkBox。 checked = checkUncheckSwitch;
// 递归地执行相同的操作
CheckUncheckParents（parentNodeChkBox，checkUncheckSwitch）;
}
}
}

函数AreAllSiblingsChecked（chkBox）{
var parentDiv = GetParentByTagName（ div，chkBox）;
var childCount = parentDiv.childNodes.length;
for （ var i = 0 ; i < childCount; i ++）{
if （parentDiv.childNodes [i ] .nodeType == 1 ）{
// 检查子节点是否为元素节点
if （parentDiv.childNodes [i] .tagName.toLowerCase（）== < span class =code-string> table）{
var prevChkBox = parentDiv.childNodes [i] .getElementsByTagName（ input）[ 0 ];
// 如果未选中任何兄弟节点，则返回false
< span class =code-keyword> if （！prevChkBox。 checked ）{
return false ;
}
}
}
}
返回 true ;
}

// 实用程序函数，用于通过标记名获取元素的容器
函数GetParentByTagName（parentTagName，childElementObj）{
var parent = childElementObj.parentNode;
while （parent.tagName.toLowerCase（）！= parentTagName.toLowerCase（））{
parent = parent.parentNode;
}
return parent;
}

函数getNextSibling（element）{
var n = element;
do n = n.nextSibling;
while （n&& n.nodeType！= 1 ）;
return n;
}

// 返回NodeValue
函数GetNodeValue（node）{
var nodeValue = ;
var nodePath = node.href.substring（node.href.indexOf（ ，）+ 2 ，node.href.length - 2 < /跨度>）;
var nodeValues = nodePath.split（ \\）;
if （nodeValues.length > 1 ）
nodeValue = nodeValues [nodeValues.length - 1 ];
else
nodeValue = nodeValues [ 0 ]。substr（ 1 ）;
return nodeValue;
}
函数OnSuccess（响应）{
alert（response.d）;
}
< / script >

.ajax({ type: "POST", url: "Default.aspx/services", data: { "Name": nodeValue }, contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response); } }); //ends } else { var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML; var nodeValue = GetNodeValue(getNextSibling(src)); var val = document.getElementById("label").innerHTML; document.getElementById("label").innerHTML = val.replace(nodeText + ",", ""); } var parentTable = GetParentByTagName("table", src); var nxtSibling = parentTable.nextSibling; //check if nxt sibling is not null & is an element node if (nxtSibling && nxtSibling.nodeType == 1) { //if node has children if (nxtSibling.tagName.toLowerCase() == "div") { //check or uncheck children at all levels CheckUncheckChildren(parentTable.nextSibling, src.checked); } } //check or uncheck parents at all levels CheckUncheckParents(src, src.checked); } } function CheckUncheckChildren(childContainer, check) { var childChkBoxes = childContainer.getElementsByTagName("input"); var childChkBoxCount = childChkBoxes.length; for (var i = 0; i < childChkBoxCount; i++) { childChkBoxes[i].checked = check; } } function CheckUncheckParents(srcChild, check) { var parentDiv = GetParentByTagName("div", srcChild); var parentNodeTable = parentDiv.previousSibling; if (parentNodeTable) { var checkUncheckSwitch; //checkbox checked if (check) { var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild); if (isAllSiblingsChecked) checkUncheckSwitch = true; else return; //do not need to check parent if any(one or more) child not checked } else //checkbox unchecked { checkUncheckSwitch = false; } var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input"); if (inpElemsInParentTable.length > 0) { var parentNodeChkBox = inpElemsInParentTable[0]; parentNodeChkBox.checked = checkUncheckSwitch; //do the same recursively CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch); } } } function AreAllSiblingsChecked(chkBox) { var parentDiv = GetParentByTagName("div", chkBox); var childCount = parentDiv.childNodes.length; for (var i = 0; i < childCount; i++) { if (parentDiv.childNodes[i].nodeType == 1) { //check if the child node is an element node if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") { var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0]; //if any of sibling nodes are not checked, return false if (!prevChkBox.checked) { return false; } } } } return true; } //utility function to get the container of an element by tagname function GetParentByTagName(parentTagName, childElementObj) { var parent = childElementObj.parentNode; while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) { parent = parent.parentNode; } return parent; } function getNextSibling(element) { var n = element; do n = n.nextSibling; while (n && n.nodeType != 1); return n; } //returns NodeValue function GetNodeValue(node) { var nodeValue = ""; var nodePath = node.href.substring(node.href.indexOf(",") + 2, node.href.length - 2); var nodeValues = nodePath.split("\\"); if (nodeValues.length > 1) nodeValue = nodeValues[nodeValues.length - 1]; else nodeValue = nodeValues[0].substr(1); return nodeValue; } function OnSuccess(response) { alert(response.d); } </script>

这里是asp treeview控件

And here is the asp treeview control

<asp:TreeView ID="tvTables" runat="server"  ShowCheckBoxes="Leaf" OnClick="OnTreeClick(event)">
                    </asp:TreeView>

请帮我解决这个问题。



提前致谢。

Please help me to solve this.

Thanks in advance.

这篇关于使用jQuery Ajax调用Treeview复选框检查事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！