無限ツリーJqueryプラグインzTree_jqueryの共通機能・特徴まとめ

実際、Ztree 公式 Web サイトにはすでに詳細な API ドキュメントが用意されています。すべては公式 Web サイトの指示に従っています。私は、実践に基づいて一般的に使用される ztree の機能をいくつかまとめているだけです。

(ztree の構文構造はキーと値の構成に基づいています)

1: データの非同期ロードをサポート

構文構成:

async: {
enable: true, 

url:'abc.ashx',

otherParam: { "request": "requestname" }

}

簡単な説明:

enable: zTree が非同期読み込みモードを有効にするかどうかを設定します。

url: Ajax がデータを取得するための URL アドレス。

otherParam: Ajax リクエストによって送信された静的パラメーターのキーと値のペア。ajax のデータ パラメーターと同等です。

2: データをロードして をバインドします。通常、このデータ構造エンティティには階層関係が含まれている必要があり、通常は ID、親 ID、名前が含まれます。

次に、構文を設定します。

data: {
simpleData: {
enable: true
}
}

または

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

checked: "IsChecked"
}
}

簡単な説明:

simpleData: データ ソース バインディングとして配列を使用できます。このとき、非同期でロードされるデータは並列構造にすることができます。

children: 子ノード データをノード データに保存するための属性名を指定します。このとき、非同期でロードされるデータはツリーの折りたたまれた構造であるため、バックエンドがデータをロードするときに再帰アルゴリズムを使用する必要があります。 🎜>

3: 単一選択とチェック機能をサポート

構文構成:

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

data: {
key: {

checked: "IsChecked"
}
}

簡単な説明:

enable: zTree ノードにチェックボックス/ラジオを表示するかどうかを設定します

chkStyle: チェックボックスの種類 (チェックボックスまたはラジオ)

radioType:無線グループ化範囲

chkboxType: 親ノードと子ノード間の関係のチェックボックスをオンにします

checked: データのロード後にチェック ボックスがオンになっているかどうかを示します。IsChecked は、バックエンド データ構造モデルで定義されているフィールドです。

4: 子ノードの追加、ノードの編集、ノード イベントの削除をサポート

ここではボタンの追加・編集・削除をカスタマイズする方法を紹介します

構文構成:

addHoverDom 関数は次のとおりです:

view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
　}

removeHoverDom 関数は次のとおりです:

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

簡単な説明:

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

addHoverDom: マウスがノードに移動したときにユーザー定義のコントロールを表示するために使用されます。非表示の状態は、zTree

内の編集ボタンと削除ボタンと同じです。

removeHoverDom: マウスがノードの外に移動したときにユーザー定義のコントロールを非表示にするために使用されます。非表示の状態は、zTree

内の編集ボタンと削除ボタンと同じです。