使用jQuery Ajax调用Treeview复选框检查事件
问题描述：
我生成了一个动态树视图复选框，现在当我选择一个复选框时，一个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（ 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（ 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（）== table）{
var prevChkBox = parentDiv.childNodes [i] .getElementsByTagName（ input）[ 0 跨度>];
// 如果未选中任何兄弟节点，则返回false
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.