I am using jsTree to create a collapsible tree with html that has multiple levels. The levels all have checkboxes, and I have been successful setting checkboxes and retrieving their state. However, I need to know the state of checkboxes even if their branch is collapsed? How do you that. I have include my javascript, so far.
<script type="text/javascript">
$(document).ready(function () {
$('#jstree-container').hide();
$('#jstree-container').append('<ul id="v' + @Model.VenueId + '"></ul>');
//Build Venue Tree
$.post("GetVenuesShort", { venueId: "@Model.VenueId" })
.done(function (data) {
var parentId = @Model.VenueId;
for (i = 0; i < data.length; i++) {
var selector = '#v' + data[i].Parent_Id;
if (data[i].Parent_Id == parentId) {
$(selector).append('<li class="jstree-open"><a style="color:#000;">' + data[i].Name + '</a><ul id="v' + data[i].Id + '"></ul></li>');
}
else {
$(selector).append('<li><a style="color:#000;">' + data[i].Name + '</a><ul id="v' + data[i].Id + '"></ul></li>');
}
}
//Insert devices
$.post("GetDevicesShort", {venueId : "@Model.VenueId", mediaId : "@Model.MediaId"})
.done(function(data){
for(i=0; i<data.length; i++) {
var selector = '#v' + data[i].Venue_Id;
$(selector).append('<li class="device" device-id="' + data[i].Id + '"><a style="color:#000;">' + data[i].Name + '</a></li>');
}
$('#jstree-container').jstree({
"core" : {
"themes" : {
"icons" : false
}
},
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : ["checkbox"]
});
$('#jstree-container').bind('select_node.jstree', function(e, data){
return data.instance.open_all(data.node);
});
$('#jstree-container').show();
});
});
});
function clearTree() {
$.each($('li'),function(index,value) {$.jstree.reference('#jstree-container').uncheck_node(value)});
}
function saveCheckedNodes() {
var checkedNodes = $('#jstree-container').jstree('get_checked',null,true);
var deviceArray = new Array();
$.each(checkedNodes, function(index,value){
var selector = '#' + value;
var deviceId = $(selector).attr('device-id');
deviceArray.push(deviceId);
});
var definedDevices = deviceArray.filter(function(n) {return n !== undefined});
$.post("SaveCheckedDevices", $.param({data : definedDevices}, true), function(data) {});
}
</script>
Aucun commentaire:
Enregistrer un commentaire