I'm fighting with jQuery jsTree plugin checkbox. Ok, I have find out how to handle events on checking or unchecking checkbox. If its useful I can paste a code:
.bind("check_node.jstree", function(e, data)
{
if(data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined)
{
jQuery.ajax({
async : false,
type: "POST",
dataType: "json",
url: "adsmanager/adsfields/ajaxappendcategory",
data:
{
"id" : data.rslt.obj.attr(\'id\'),
"itemId" : "' . Yii::app()->getRequest()->getParam('id') . '",
},
success: function(r)
{
if(r === undefined || r.status === undefined || !r.status)
{
data.rslt.obj.removeClass(\'jstree-checked\');
data.rslt.obj.addClass(\'jstree-unchecked\');
}
else
{
niceBox(\'ok\');
}
}
});
}
return true;
})
With this everything is ok, but know I cant find anywhere how to checked checkboxes on tree load, for example, if I'm using jsTree like category selector for my news Item when I create new news item everything is ok and when I want to update that item I need jsTree with selected categories and that's I cant find any example how to select nodes on loading jsTree.
Any help with this question?
If you are using JSON_DATA, add class:jstree-checked to the node's attr object:
{
"data": "node name",
"attr": { "id": "node id", "class":"jstree-checked" }
}
For current JSTREE version 3.2.1 and JSON data we need use state : { checked : true }
and add to config for checkbox section
"checkbox":{
"tie_selection": false
}
this example work fine
data : [
{ "text" : "Root", state : { opened : true }, children : [
{ "text" : "Child 2", state : { checked : true },
]
Try this:
$("#jstree").jstree(true).load_node('#');
It worked for me.
Here are related reference:
https://groups.google.com/forum/#!topic/jstree/bPv19DwQYFU
I have found the solution by setting checkbox plugin option two_state to true
"checkbox" => array( "two_state" => true)
and then if you are using Xml data add class="jstree-checked" in params
everything fine :)
good luck ;)
To complete earlier answers above, with latest v3.3.7 at least, the specification of BOTH state.selected and a_attr.class are required for a leaf checkbox to be initialized as checked with the checkbox plugin. This seems to explain why mytree.node_select("leafId") function alone does not accomplish this programatically, presumably because the child a class attribute also has to be set to jstree_checked.
var mytree = $( "myjstreediv" ).jstree();
var leafParentId = "#";
var name = "My test node";
var visible = true;
if (visible)
leafId = mytree.create_node(leafParentId, {
text: name,
state: { selected: visible },
a_attr: { class: "jstree-checked" }
});
else
leafId = mytree.create_node(leafParentId, name);
May be this will help you more - jstree v1
<script src="@Url.Content("~/Scripts/jquery.jstree.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
below - for check and uncheck event bind for jstree
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
var dataId = {};
$('#MainTree')
.bind("before.jstree", function (e, data) {
})
.jstree({
"json_data": {
ajax: {
"url": function (node) {
var url;
if (node == -1) {
url = "";
} else {
var id = $(node).data("id");
url = "?categoryId=" + id;
}
var productId = $("#Product_ProductId").val();
if (!productId) {
url = "/Products/GetTreeData" + url;
} else {
url = "/Products/GetTreeData/" + productId + url;
}
return url;
},
//"url": "@Url.Action("GetTreeData", "Categories")",
"type": "GET",
//"data": JSON.stringify(dataId),
"dataType": "json",
"contentType": "application/json charset=utf-8",
},
progressive_render: true
},
"themes": {
"theme": "classic",
"dots": true,
"icons": true,
"url": "@Url.Content("~/content/themes/classic/style.css")"
},
"types": {
"max_depth": -2,
"max_children": -2,
"valid_children": ["folder"],
"types": {
"default": {
"valid_children": "none",
"icon": {
"image": "@Url.Content("~/gfx/file.png")"
}
},
"folder": {
"valid_children": ["default", "folder"],
"icon": {
"image": "@Url.Content("~/gfx/folder.png")"
}
}
}
},
"plugins": ["themes", "json_data", "ui", "types", "checkbox"]
})
.bind("load_node.jstree", function (event, data) {
var productId = $("#Product_ProductId").val();
if (!productId || productId < 1) {
data.inst.hide_checkboxes();
} else
data.inst.change_state('li[selected=selected]', false);
})
.bind("check_node.jstree", function (e, data) {
var productId = $("#Product_ProductId").val();
if (!productId)
return;
$.post(
"@Url.Action("ProductCategoriesSaveData", "Products")",
{
"ProductCategory.ProductId": productId,
"ProductCategory.CategoryId": $(data.rslt.obj).data("id")
},
function (r) {
//Display message if any
if (r.Message) {
alert(r.Message);
}
//Display error if any
if (r.ValidationError) {
$.jstree.rollback(data.rlbk);
alert(r.ValidationError);
} else {
if (r.NewCreatedId) {
$(data.rslt.obj).data("mapId", r.NewCreatedId);
}
}
});
})
.bind("uncheck_node.jstree", function (e, data) {
var productId = $("#Product_ProductId").val();
if (!productId)
return;
var mapId = $(data.rslt.obj).data("mapId");
$.ajax({
async: false,
type: 'POST',
url: "@Url.Action("ProductCategoryDelete", "Products")",
data: {
"id": mapId
},
success: function (r) {
//Display message if any
if (r.Message) {
alert(r.Message);
}
//Display error if any
if (r.ValidationError) {
alert(r.ValidationError);
} else {
data.inst.refresh();
}
}
});
});
}
</script>
Server side Asp.net MVC
"state" : { "selected" : true } Makes a checkbox selected
$('#frmt').jstree( {
'core' : {
'data' : [{
"text" : "root text",
"state" : { "opened" : true } ,
"children" : [{
"text" : "child text",
"id" : "idabc",
"state" : { "selected" : true } ,
"icon" : "jstree-file",
}]
},
]},
'checkbox': {
three_state: true
},
'plugins': ["checkbox"]
});
