Hello.
I am trying to replicate the behaviour of the nested tree list of checkboxes in the following link using the JStree Jquery module -
http://www.blueshoes.org/_bsJavascript/components/tree/examples/example3.html
JStree - www dot jstree dot com
I've swiped the callback behaviour below from another post on the subject, but haven't been able to boot anything other than the default jstree behaviour and theme. I am running the following config code in a js script that is called from the HTML page after the jstree scripts.
Any help gratefully appreciated.
$(document).ready(function()
{
$('.nested-category').jstree({
ui: { theme_name : "checkbox" },
callback : {
onchange : function (NODE, TREE_OBJ) {
var $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();
if($this.children("a.unchecked").size() === 0) {
TREE_OBJ.container.find("a").addClass("unchecked");
}
$this.children("a").removeClass("clicked");
if($this.children("a").hasClass("checked")) {
$this.find("li").andSelf().children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
var state = 0;
}
else {
$this.find("li").andSelf().children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
var state = 1;
}
$this.parents("li").each(function () {
if(state === 1) {
if($(this).find("a.unchecked, a.undetermined").size() - 1 > 0) {
$(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
return false;
}
else {
$(this).children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
}}
else {
if($(this).find("a.checked, a.undetermined").size() - 1 > 0) {
$(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
return false;
}
else {
$(this).children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
}}
});
}
},
plugins : {checkbox: {} }
});
}
);
The HTML I am targeting is as follows -
<html>
<head>
<script type="text/javascript" src="/_lib/jquery.js"></script>
<body>
<div class="nested-category">
<label>test list</label>
<ul class="">
<li><input class="required" type="checkbox" name="" value="" /><label>group1</label>
<ul>
<li><input class="required" type="checkbox" name="" value="" /> <label>subgroup1</label>
<ul>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item1</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item2</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item3</label></li>
</ul>
</li>
<li><input class="required" type="checkbox" name="" value="" /> <label>subgroup2</label>
<ul>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item4</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item5</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item6</label></li>
</ul>
</li>
</ul>
</li>
<li><input class="required" type="checkbox" name="" value="" /><label>group2</label>
<ul>
<li><input class="required" type="checkbox" name="" value="" /> <label>subgroup3</label>
<ul>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item7</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item8</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item9</label></li>
</ul>
</li>
<li><input class="required" type="checkbox" name="" value="" /> <label>subgroup4</label>
<ul>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item10</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item11</label></li>
<li><input class="required principal-group" type="checkbox" name="" value="" /> <label>item12</label></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>