Zusammenfassung der allgemeinen Funktionen und Features des Infinite-Tree-JQuery-Plug-Ins zTree_jquery

Tatsächlich gibt es auf der offiziellen Ztree-Website bereits eine detaillierte API-Dokumentation. Alles unterliegt den Anweisungen auf der offiziellen Website. Ich fasse nur einige häufig verwendete Ztree-Funktionsfunktionen zusammen.

(Die Syntaxstruktur von ztree basiert auf der Schlüsselwertkonfiguration)

1: Unterstützt das asynchrone Laden von Daten

Syntaxkonfiguration:

async: {
enable: true, 

url:'abc.ashx',

otherParam: { "request": "requestname" }

}

Kurze Beschreibung:

Aktivieren: Legen Sie fest, ob zTree den asynchronen Lademodus aktiviert.

URL: URL-Adresse für Ajax zum Abrufen von Daten.

otherParam: Statisches Parameter-Schlüssel-Wert-Paar, das von einer Ajax-Anfrage übermittelt wird. Entspricht dem Datenparameter in Ajax.

2: Daten laden und binden Im Allgemeinen wird die Datenstruktureinheit als Modell definiert. Diese Datenstruktur muss hierarchische Beziehungen enthalten und umfasst normalerweise: ID, übergeordnete ID, Name.

Dann konfigurieren Sie die Syntax:

data: {
simpleData: {
enable: true
}
}

oder

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

checked: "IsChecked"
}
}

Kurze Beschreibung:

simpleData: Sie können Arrays als Datenquellenbindung verwenden. Zu diesem Zeitpunkt können die asynchron geladenen Daten eine parallele Struktur sein.

Kinder: Geben Sie den Attributnamen an, um die Daten des untergeordneten Knotens in den Knotendaten zu speichern. Zu diesem Zeitpunkt handelt es sich bei den asynchron geladenen Daten um die gefaltete Struktur des Baums. Daher muss der rekursive Algorithmus verwendet werden, wenn das Backend Daten lädt.

3: Einzelauswahl- und Prüffunktion unterstützen

Syntaxkonfiguration:

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

data: {
key: {

checked: "IsChecked"
}
}

Kurze Beschreibung:

Aktivieren: Legen Sie fest, ob das Kontrollkästchen/Radio auf dem zTree-Knoten angezeigt wird

chkStyle: Kontrollkästchentyp (Kontrollkästchen oder Radio)

radioType:radio gruppierungsbereich

chkboxType: Aktivieren Sie das Kontrollkästchen für die Beziehung zwischen übergeordneten und untergeordneten Knoten

aktiviert: Gibt an, ob das Kontrollkästchen nach dem Laden von Daten aktiviert ist. Es handelt sich um ein im Back-End-Datenstrukturmodell definiertes Feld

4: Unterstützt das Hinzufügen untergeordneter Knoten, das Bearbeiten von Knoten und das Löschen von Knotenereignissen

Hier werde ich vorstellen, wie Sie Schaltflächen zum Hinzufügen, Bearbeiten und Löschen anpassen können

Syntaxkonfiguration:

view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
　}

Die Funktion addHoverDom lautet:

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);
};

Die Funktion „removeHoverDom“ lautet:

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

Kurze Beschreibung:

addHoverDom: Wird verwendet, um benutzerdefinierte Steuerelemente anzuzeigen, wenn sich die Maus zu einem Knoten bewegt. Der ausgeblendete Zustand ist derselbe wie die Schaltflächen zum Bearbeiten und Löschen in zTree

removeHoverDom: Wird verwendet, um benutzerdefinierte Steuerelemente auszublenden, wenn die Maus einen Knoten verlässt. Der ausgeblendete Zustand ist derselbe wie die Schaltflächen zum Bearbeiten und Löschen in zTree