Résumé des fonctions et caractéristiques communes du plug-in Jquery à arbre infini zTree_jquery

En fait, le site officiel de Ztree dispose déjà d'une documentation détaillée de l'API. Tout est soumis aux instructions du site officiel. Je résume simplement quelques fonctionnalités fonctionnelles de ztree couramment utilisées basées sur la pratique.

(La structure syntaxique de ztree est basée sur la configuration clé-valeur)

1 : Prise en charge du chargement asynchrone des données

Configuration de la syntaxe :

async: {
enable: true, 

url:'abc.ashx',

otherParam: { "request": "requestname" }

}

Brève description :

activer : définissez si zTree active le mode de chargement asynchrone.

url : adresse URL permettant à Ajax d'obtenir des données.

otherParam : paire clé-valeur de paramètre statique soumise par la requête Ajax. Équivalent au paramètre de données en ajax.

2 : Charger les données et lier Généralement, l'entité de structure de données est définie comme modèle. Cette structure de données doit contenir des relations hiérarchiques et comprend généralement : ID, ID parent, Nom.

.

Configurez ensuite la syntaxe :

data: {
simpleData: {
enable: true
}
}

ou

data: {
key: {
children: "childrens",

checked: "IsChecked"
}
}

Brève description :

simpleData : vous pouvez utiliser des tableaux comme liaison de source de données. À ce stade, les données chargées de manière asynchrone peuvent être une structure parallèle.

enfants : spécifiez le nom de l'attribut pour enregistrer les données du nœud enfant dans les données du nœud. À ce stade, les données chargées de manière asynchrone sont la structure pliée de l'arborescence ; l'algorithme récursif doit donc être utilisé lorsque le backend charge les données.

3 : Prise en charge de la sélection unique et de la fonction de vérification

Configuration de la syntaxe :

check: {
enable: true,
chkStyle: "checkbox",
radioType: "all"
chkboxType:{ "Y": "", "N": "" }
},

data: {
key: {

checked: "IsChecked"
}
}

Brève description :

activer : définissez si la case à cocher/la radio est affichée sur le nœud zTree

chkStyle : type de case à cocher (case à cocher ou radio)

radioType : plage de regroupement radio

chkboxType : Cochez la case pour la relation entre les nœuds parent et enfant

checked : indique si la case est cochée après le chargement des données. IsChecked est un champ défini dans le modèle de structure de données back-end

.

4 : Prise en charge de l'ajout de nœuds enfants, de la modification de nœuds et de la suppression d'événements de nœuds

Ici, je vais vous présenter comment personnaliser l'ajout, la modification et la suppression de boutons

Configuration de la syntaxe :

view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
　}

La fonction addHoverDom est :

function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_" + treeNode.id).length > 0) return;
var str= "<a id='addBtn_" + treeNode.id + "' onclick='自定义函数1(" + treeNode.DepartmentID + ")'>添加子节点</a>";
str+= "<a id='addBtn1_" + treeNode.id + "' onclick='自定义函数2(" + treeNode.DepartmentID + ")'>编辑节点</a>";
str+= "<a id='addBtn2_" + treeNode.id + "' onclick='自定义函数3(" + treeNode.DepartmentID + ")'>删除节点</a>";
sObj.after(str);
};

La fonction RemoveHoverDom est :

function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
$("#addBtn1_" + treeNode.id).unbind().remove();
$("#addBtn2_" + treeNode.id).unbind().remove();
　};

Brève description :

addHoverDom : utilisé pour afficher les contrôles définis par l'utilisateur lorsque la souris se déplace vers un nœud. L'état caché est le même que les boutons d'édition et de suppression à l'intérieur de zTree

.

removeHoverDom : utilisé pour masquer les contrôles définis par l'utilisateur lorsque la souris quitte un nœud. L'état masqué est le même que les boutons d'édition et de suppression à l'intérieur de zTree
.