Je me batte avec JQuery Jstree Plugin Case à cocher. OK, j'ai découvert comment gérer les événements sur la coche de la vérification ou de la cochérabilité. Si c'est utile, je peux coller un code: avec ce tout va bien, mais je sais que je ne peux pas trouver n'importe où comment faire vérifier sur la charge de l'arborescence, par exemple si j'utilise jstree comme Sélecteur de catégorie pour mon article d'information Lorsque je crée de nouvelles informations, tout va bien et quand je veux mettre à jour cet article, j'ai besoin de Jstree avec des catégories sélectionnées et que je ne trouve aucun exemple de sélection de nœuds sur le chargement de Jstree. Toute aide avec cette question?
8 Réponses :
J'ai trouvé la solution en réglant l'option de plug-in de la case à cocher puis si vous utilisez XML Data Ajouter tout va bien :) bonne chance;) deux_state à true Classe = "Jstree -Commez-vous " dans les params
Si vous utilisez json_data, ajoutez Classe: Jstree-coché code> à l'objet ATTR du nœud: {
"data": "node name",
"attr": { "id": "node id", "class":"jstree-checked" }
}
Si vous utilisez le format JSON à partir d'ici: Jstree.com/docs/json , à la place. de 'attr', utilisez 'a_attr'
Je viens de remarquer que cela montre seulement qu'il est vérifié, il ne la définit pas à vérifier. Donc, pour décocher cela, vous devez cliquer deux fois. Qui est inutile. Pour contourner cela, vous devez définir vérifié: true dans l'attribut d'état. Alors "état": {coché: vrai}
Essayez ceci:
$("#jstree").jstree(true).load_node('#');
Merci pour le lien comme la réponse est par le créateur de Jstree
Peut-être peut-être que cela vous aidera davantage - Jstree V1
<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>
Pour les données actuelles de Jstere version 3.2.1 et JSON, nous avons besoin d'un état d'utilisation: {coché: true}
et Ajouter à la section Cochez la case Cochez la case
"Case": { "Tie_Selection": faux }
Cet exemple fonctionne bien
Comment faire la même chose avec les données HTML? Tu sais? Merci
"état": {"sélectionné": true} code> fait une case à cocher sélectionnée $('#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"]
});
Pour compléter les réponses antérieures ci-dessus, avec le dernier V3.3.7 au moins, la spécification de l'état.Selected et a_attr.class est requise pour qu'une case à cocher à la feuille soit initialisée comme cochée avec le plug-in à cocher. Cela semble expliquer pourquoi mytree.node_select ("Lemed") fonctionne à elle seule ne l'accomplisse pas de manière programmable, probablement parce que l'attribut de classe d'enfant doit également être réglé sur jstree_checké.
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);
Essayez ceci: Rechercher des données: P> var jsonNodes = $('#jstree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
if($("#jstree").find("a#" + this.id + "_anchor").hasClass("jstree-checked")){
console.log("Selected:" + this.id);
}
else if($("#jstree").find("a#" + this.id + "_anchor i:first-child").hasClass("jstree-undetermined")){
console.log("Selected:" + this.id);
}
else {
console.log("Un Selected:" + this.id);
}
}
J'ai constaté qu'il était possible de définir des options «sélectionnées» dans votre configuration en tant que tableau, mais cela ne fonctionne pas.