ホームページ >ウェブフロントエンド >jsチュートリアル >JqueryツリープラグインzTreeの使い方tutorial_jquery
この記事では、Jquery ツリー プラグイン zTree の使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
zTree の概要を検索してください。
この例の最終的な効果は次のとおりです:
マウスが第 1 レベルのディレクトリに移動すると、[すべて選択] リンクが表示され、[すべて選択] リンクをクリックすると、ディレクトリ内のすべてのサブアイテムが受信者のテキスト ボックスに追加されます。サブアイテムは 1 つ追加されます。どのような情報を追加するかはあなた次第です。
1. zTee をダウンロードし、jquery.js をページに導入し、機能要件に応じて zTree の対応する js と css を追加します
zTree セットアップ情報:
変数: zTree で使用される HTML タグ ID には、最後に次のサフィックスが追加されます。たとえば、第 1 レベルのディレクトリの前にある展開された画像と閉じられた画像の ID は IDMark_Switch です。
}、
コールバック: {
beforeClick: beforeClick、
onClick: onClick
}
};
function beforeClick(treeId, TreeNode, clickFlag) {
//alert(treeNode.id);
var ticketBagNo = ツリーノード.phone
re =new RegExp(チケットバッグ番号)
var accept = $("#accept").val();//データを配置する場所を見つけて、それがすでに存在するかどうかをテストします
If(!re.test(accept)){
$("#accept").val(accept TreeNode.name "<" ticketBagNo ">,");
}
}
関数 onClick(event,treeId,treeNode,clickFlag) {
//alert(clickFlag "zzz");
}
コールバックには 2 つのコールバック関数があります
クリック前:
は、チェックまたはチェック解除の前にイベント コールバック関数をキャプチャするために使用され、戻り値に基づいてチェックまたはチェック解除を許可するかどうかを決定します: null
クリックされたノードをキャプチャするために使用されるイベント コールバック関数
beforeClick メソッドが設定されていて false を返す場合、onClick イベント コールバック関数はトリガーされません。
デフォルト値: nulladdHoverDom は、マウスがノード上に移動したときの反応です。ここでは、第 1 レベルのディレクトリに全選択関数を追加します。
コードをコピー
コードは次のとおりです:
全选すべて選択方法:
removeHoverDom:ネズミ标移除节点所為的反应,去掉全选
zTree ポイント情報: 必要に応じて生成できます。
以下はデモデータであり、各ノード内の名前、電話機は必要に応じて追加または変更できます。たとえば、1 年分の追加が必要な場合: age="23"、ただし注意すべき点は格式です。
{id:7,name:"二班",open:true,
子供たち:[
{id:8,name:"小家",phone:"25364215211"},
{id:9,name:"小沙",phone:"365241253"}
}
];
以下は、jsp を使用してサービス アクティビティから生成した例です。省略する必要はなく、後の参照として残しておきます。
標準が表示されます。
が表示される場所を初期化します。
ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。