I am unable to set CheckBox
to unchecked["jstree-unchecked"] for the node which has children. When I use firebug to determine the class of the node on the front-end side, it shows "jstree-undetermined". What I really want is "jstree-unchecked" to be class, since that's what I am passing from server.
The following is the AJAX call I am making using JSON. I have also added JSON data I am getting from server. Is there anything wrong in the way I am formatting JSON data on server side?
For the following example "Dogs" node is causing problem. Though childrens of "Dogs" are unchecked and node class is jstree-unchecked; I am seeing "Dogs" node checked. Any advise to fix or improve code is greatly appreciated.$(function () {
$("#idTOC").bind("loaded.jstree", function (e, data) {
data.inst.open_all(-1); // -1 opens all nodes in the container
})
.jstree({
"json_data": {
"ajax": {
"url": "http://localhost/eSiriusAjax/jqTOC.wc",
"aync": false,
"data": function (n) {
return { id: n.attr ? n.attr("id") : 0 };
}
}
},
"core": { "html_titles": true },
"themes": { "theme": "apple", "dots": false, "icons": false },
"plugins": ["themes", "json_data", "checkbox"],
"ui": { "select_limit": 1 }
});
$("#idTOC").bind('before.jstree', function (event, data) {
if ((data.func === 'check_node') || (data.func === 'uncheck_node')) {
event.stopImmediatePropagation(); //stops changing select/deselect when clicked
return false;
}
});
});
JSON data:
[
{
"data": "Intro",
"attr": {
"id": "1",
"class": "jstree-checked",
"href": "ProtocolIntro.aspx"
}
},
{
"data": "Overview",
"attr": {
"id": "3",
"class": "jstree-unchecked",
"href": "ProtocolOverview.aspx"
}
},
{
"data": "Funding",
"attr": {
"id": "5",
"class": "jstree-checked"
}
},
{
"data": "Use TYPE(s)",
"attr": {
"id": "7",
"class": "jstree-unchecked"
}
},
{
"data": "Transportation",
"attr": {
"id": "9",
"class": "jstree-unchecked"
}
},
{
"data": "Dogs",
"attr": {
"id": "11",
"class": "jstree-unchecked"
},
"children": [
{
"data": "Info",
"attr": {
"id": "12",
"class": "jstree-unchecked"
}
},
{
"data": "# Justification",
"attr": {
"id": "13",
"class": "jstree-unchecked"
}
},
{
"data": "Choice Justification",
"attr": {
"id": "14",
"class": "jstree-unchecked"
}
},
{
"data": "Source",
"attr": {
"id": "15",
"class": "jstree-unchecked"
}
},
{
"data": "Enrichment/Excercise",
"attr": {
"id": "16",
"class": "jstree-unchecked"
}
},
{
"data": "Quarantine/Conditioning",
"attr": {
"id": "17",
"class": "jstree-unchecked"
}
},
{
"data": "Housing",
"attr": {
"id": "18",
"class": "jstree-unchecked"
}
},
{
"data": "Use Labs",
"attr": {
"id": "19",
"class": "jstree-unchecked"
}
},
{
"data": "Surgery",
"attr": {
"id": "20",
"class": "jstree-unchecked"
}
},
{
"data": "Procedures",
"attr": {
"id": "21",
"class": "jstree-unchecked"
}
},
{
"data": "Euthanasia",
"attr": {
"id": "22",
"class": "jstree-unchecked"
}
},
{
"data": "Methodology",
"attr": {
"id": "23",
"class": "jstree-unchecked"
}
},
{
"data": "USDA Categories",
"attr": {
"id": "24",
"class": "jstree-unchecked"
}
},
{
"data": "Adverse Consq.",
"attr": {
"id": "25",
"class": "jstree-unchecked"
}
}
]
},
{
"data": "Mice",
"attr": {
"id": "26",
"class": "jstree-unchecked"
},
"children": [
{
"data": "Info",
"attr": {
"id": "27",
"class": "jstree-unchecked"
}
},
{
"data": "# Justification",
"attr": {
"id": "28",
"class": "jstree-unchecked"
}
},
{
"data": "Choice Justification",
"attr": {
"id": "29",
"class": "jstree-unchecked"
}
},
{
"data": "Source",
"attr": {
"id": "30",
"class": "jstree-unchecked"
}
开发者_开发百科 },
{
"data": "Housing",
"attr": {
"id": "31",
"class": "jstree-unchecked"
}
},
{
"data": "Use Labs",
"attr": {
"id": "32",
"class": "jstree-unchecked"
}
},
{
"data": "Surgery",
"attr": {
"id": "33",
"class": "jstree-checked",
"href": "ProtocolSurgery.aspx"
}
},
{
"data": "Breeding",
"attr": {
"id": "34",
"class": "jstree-unchecked"
}
},
{
"data": "Methodology",
"attr": {
"id": "35",
"class": "jstree-unchecked"
}
},
{
"data": "USDA Categories",
"attr": {
"id": "36",
"class": "jstree-unchecked"
}
},
{
"data": "Adverse Consq.",
"attr": {
"id": "37",
"class": "jstree-unchecked"
}
}
]
},
{
"data": "Personnel",
"attr": {
"id": "38",
"class": "jstree-checked",
"href": "ProtocolPersonnel.aspx"
}
},
{
"data": "Database Searches",
"attr": {
"id": "40",
"class": "jstree-unchecked"
}
},
{
"data": "Error Verification",
"attr": {
"id": "42",
"class": "jstree-unchecked"
}
},
{
"data": "Preview",
"attr": {
"id": "44",
"class": "jstree-unchecked"
}
},
{
"data": "Cancel Un-finished Protocol",
"attr": {
"id": "46",
"class": "jstree-unchecked"
}
}
]
In the JSON data instead class="jstree-checked", you can send a custom attribute for example "checked" : "true" | "checked" : "false" .
Then in the ajax request add a complete callback, where you check all the elements having checked attribute set to "true".
"json_data": { "ajax": { "url": "http://localhost/eSiriusAjax/jqTOC.wc", "aync": false, "data": function (n) { return { id: n.attr ? n.attr("id") : 0 }; }, "complete" : function() { $('#idTOC li[checked=true]').each(function() { $.jstree._reference('#idTOC').check_node(this); }); } } }
this is works for me -
.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);
})
json data -
[{"data":{"title":"Electronics","icon":null},"metadata":{"id":3,"level":1,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"Folder Name","icon":null},"metadata":{"id":28,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[{"data":{"title":"New Category","icon":null},"metadata":{"id":29,"level":3,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]}]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":30,"level":2,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"File Name","icon":null},"metadata":{"id":31,"level":3,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"File Name","icon":null},"metadata":{"id":32,"level":4,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]}]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":33,"level":3,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"New Category","icon":null},"metadata":{"id":34,"level":4,"leaf":true,"mapId":13},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]}]}]}]},{"data":{"title":"Furniture","icon":null},"metadata":{"id":4,"level":1,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"Folder Name","icon":null},"metadata":{"id":20,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]},{"data":{"title":"File Name","icon":null},"metadata":{"id":22,"level":2,"leaf":true,"mapId":14},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]},{"data":{"title":"File Name","icon":null},"metadata":{"id":25,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":26,"level":2,"leaf":true,"mapId":12},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]}]}]
add an 'selected' property into 'attr' object
精彩评论