使用jquery复选框的Xml树视图不起作用 [英] Xml tree view using jquery checkbox not working
本文介绍了使用jquery复选框的Xml树视图不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hi all,
i have one douts about my application,
i have created one xml tree using jquery, for that i have some douts,
I have a checkbox on my tree view
1. For that when i tick my parent node then the entire sub child also ticked this is okay
2. when i untick my parent node then the entire sub child also unticked this is also okay
3. But followed by the first option when am untick all the subchild then i want my parent node also untick automatically
but this is not happen in my code
so please have a look at my code and let me know if i have done anything wrong.
HTML
<div>
<style type="text/css">
ul
{
margin-left: 0px;
list-style: none;
padding-left: 40px;
margin-left: -20px;
padding: 0 0 0 16px;
margin: 0;
}
li
{
margin: 0;
padding: 0px 0 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>');
var sHTML = drawTreeFromXml(xmlData);
document.getElementById("tree").innerHTML = sHTML;
});
function drawTreeFromXml(xmlData) {
var html = "";
var properties = xmlData.getElementsByTagName("properties");
html += ""
$(properties).each(function () {
var department = $(this);
var CustomerID = $(department).find("CustomerID").text();
html += "<ul>";
html += "<li><input type='checkbox'/><a href='javascript:;'>" + CustomerID + "</a>";
html += "<ul>";
var CompanyName = $(department).find("CompanyName").text();
html += createElement(CompanyName);
var ContactName = $(department).find("ContactName").text();
html += createElement(ContactName);
var ContactTitle = $(department).find("ContactTitle").text();
html += createElement(ContactTitle);
var Address = $(department).find("Address").text();
html += createElement(Address);
var City = $(department).find("City").text();
html += createElement(City);
var PostalCode = $(department).find("PostalCode").text();
html += createElement(PostalCode);
var Country = $(department).find("Country").text();
html += createElement(Country);
var Phone = $(department).find("Phone").text();
html += createElement(Country);
var Fax = $(department).find("Fax").text();
html += createElement(Fax);
html += "</ul></li></ul>";
});
return html;
}
function createElement(ElementValue) {
return "<li><input type='checkbox'/><a href='javascript:;'>" + ElementValue + "</a></li>";
}
$("#tree input:checkbox").live('change', function () {
if ($(this).nextAll('ul').length == 0) {
if ($(this)[0].checked == false) {
$(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', false);
} else {
if ($(this).closest('ul').parent().find('input:checkbox:checked').length == $(this).closest('ul').parent().find('input:checkbox').length - 1) {
$(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', true);
}
}
} else {
if ($(this)[0].checked == true) {
$(this).nextAll('ul').find('input:checkbox').attr('checked', true);
} else {
$(this).nextAll('ul').find('input:checkbox').attr('checked', false);
}
}
});
$('#tree a').live('click', function () {
if ($(this).nextAll('ul').length != 0) {
if ($(this).nextAll('ul').is(':visible')) {
$(this).nextAll('ul').hide();
} else {
$(this).nextAll('ul').show();
}
}
});
function readXml(xmlFile) {
var xmlDoc;
if (typeof window.DOMParser != "undefined") {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlFile, false);
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
}
else {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
</script>
<div id="tree">
</div>
</div>
$ / b
XMLFILE.xml:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed>
<entry>
<content>
<properties>
<CustomerID>ALFKI</CustomerID>
<CompanyName>Alfreds Futterkiste</CompanyName>
<ContactName>Maria Anders</ContactName>
<ContactTitle>Sales Representative</ContactTitle>
<Address>Obere Str. 57</Address>
<City>Berlin</City>
<PostalCode>12209</PostalCode>
<Country>Germany</Country>
<Phone>030-0074321</Phone>
<Fax>030-0076545</Fax>
</properties>
</content>
</entry>
<entry>
<content>
<properties>
<CustomerID>ANATR</CustomerID>
<CompanyName>Ana Trujillo Emparedados y helados</CompanyName>
<ContactName>Ana Trujillo</ContactName>
<ContactTitle>Owner</ContactTitle>
<Address>Avda. de la Constitución 2222</Address>
<City>México D.F.</City>
<PostalCode>05021</PostalCode>
<Country>Mexico</Country>
<Phone>(5) 555-4729</Phone>
<Fax>(5) 555-3745</Fax>
</properties>
</content>
</entry>
</feed>
提前感谢。
我尝试了什么：
xml使用jquery复选框查看树视图
thanks in advance.
What I have tried:
xml tree view using jquery checkbox not working
推荐答案
（ function （）{
var xmlData = readXml（' <％= ResolveUrl（〜/ XmlFiles / XMLFile.xml）％>' ）;
var sHTML = drawTreeFromXml（xmlData）;
document .getElementById（ tree).innerHTML = sHTML;
}）;
function drawTreeFromXml（xmlData）{
var html = < span class =code-string> ;
var properties = xmlData.getElementsByTagName（ 属性）;
html + =
(function () { var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>'); var sHTML = drawTreeFromXml(xmlData); document.getElementById("tree").innerHTML = sHTML; }); function drawTreeFromXml(xmlData) { var html = ""; var properties = xmlData.getElementsByTagName("properties"); html += ""
（属性）.each（ function （）{
var department =
(properties).each(function () { var department =
（ this ）;
var CustomerID =
(this); var CustomerID =
这篇关于使用jquery复选框的Xml树视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
