Tree View Checkbox Expand collapse
Question
Am trying to add expand collapse effect , but its not working :(
Here is my fiddle
http://jsfiddle.net/Pervez/udc8f/6/
EDIT:
I also want to place these 'li' side by side in two column
3 answers
solution1
1 2013-01-31 11:01:12
- Your
id='chk_7''have an extra'. You could see it clearly in the jsfiddle syntax highlighting. - You better wrap the checkbox inside the label (will make label clicks work as checkbox clicks)
- It works a bit better but only when you click the
<li>not the checkbox.
There were several other small bugs, and some bugs remaining. You better practice debugging (ie. setting breakpoints, stepping the code, etc.). I changed it to handle checkbox clicks and few fixes here: http://jsfiddle.net/jjfaB/4/ . Its still not perfect but you should be doing your own debugging...
solution2
1 2013-01-31 11:04:37
here is a simple example of tree view I've made for you. It basically shows you to organize your code. If you cannot see it clearly, how can you manipulate it.
Super simple implementation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('.parent >ul').each(function(){ $(this).hide();});
$('.parent >label').click(function(){
$(this).parent().find('ul').each(function(){
$(this).toggle();
});
});
});
</script>
</head>
<body>
<ul>
<li class='parent'>
<label value="*">*</label><input type="checkbox" value="" />
<ul>
<li><input type="checkbox" value="" class="child"/></li>
<li><input type="checkbox" value="" class="child"/></li>
<li><input type="checkbox" value="" class="child"/></li>
</ul>
</li>
<li class='parent'>
<label value="*">*</label><input type="checkbox" value="" />
<ul>
<li><input type="checkbox" value="" class="child"/></li>
<li><input type="checkbox" value="" class="child"/></li>
</ul>
</li>
<ul>
</body>
</html>
you can enhance to n-levels of node, animation, Id wise retrieval, different color at each level and what not..
solution3
0 2013-01-31 10:58:50
I have usedjstree for one of my project. http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/4_themes.html ..check if it helps for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.