JqueryツリープラグインzTreeの使い方tutorial_jquery-jsチュートリアル-php.cn

JqueryツリープラグインzTreeの使い方tutorial_jquery

WBOY

リリース： 2016-05-16 16:13:46

オリジナル

1393 人が閲覧しました

この記事では、Jquery ツリープラグイン zTree の使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

zTree の概要を検索してください。

この例の最終的な効果は次のとおりです:

マウスが第 1 レベルのディレクトリに移動すると、[すべて選択] リンクが表示され、[すべて選択] リンクをクリックすると、ディレクトリ内のすべてのサブアイテムが受信者のテキストボックスに追加されます。サブアイテムは 1 つ追加されます。どのような情報を追加するかはあなた次第です。

1. zTee をダウンロードし、jquery.js をページに導入し、機能要件に応じて zTree の対応する js と css を追加します

コードをコピーコードは次のとおりです:

jquery.ztree.core-3.5.js: zTree コアパッケージ

jquery.ztree.excheck-3.5.js: チェックボックス関数パッケージ

jquery.ztree.exedit-3.5.js: 関数パッケージの編集

zTree コアパッケージを導入する必要があります。
2. zTree を構成します。個別の手順については、コード内のコメントを参照してください。

zTree セットアップ情報:

変数: zTree で使用される HTML タグ ID には、最後に次のサフィックスが追加されます。たとえば、第 1 レベルのディレクトリの前にある展開された画像と閉じられた画像の ID は IDMark_Switch です。

コードをコピーしますコードは次のとおりです:var IDMark_Switch = "_switch", IDMark_Icon = "_ico",

IDMark_Span = "_span",

IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a";
変数設定 = {
ビュー: {
addHoverDom: addHoverDom、削除HoverDom: 削除HoverDom

}、
コールバック: {
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 イベントコールバック関数はトリガーされません。

デフォルト値: null

addHoverDom は、マウスがノード上に移動したときの反応です。ここでは、第 1 レベルのディレクトリに全選択関数を追加します。

コードをコピー

コードは次のとおりです:

関数 addHoverDom(treeId,treeNode) {
if (!treeNode.children)return;
    if (treeNode.parentNode && TreeNode.parentNode.id!=1 ) return;
    var aObj = $("#" TreeNode.tId IDMark_A);
    if (treeNode.children.length>0) {
if ($("#diyBtn1_"treeNode.id).length>0) return;
if ($("#diyBtn2_"treeNode.id).length>0) return;//' onclick='allSelect("treeNode ")
var editStr = "全选";
aObj.append(editStr);
document.getElementById("diyBtn1_"treeNode.id).onclick = function() {
      allSelect(ツリーノード);
};
    }
}

全选すべて選択方法：

复制代码代码如下:

function allSelect(treeNode){ 

    if (!treeNode.children)return;  

    for(i=0;i
 var ticketBagNo = TreeNode.children[i].phone;  

    re =new RegExp(ticketBagNo);    

    var accept = $("#accept").val();//找到達文本框如果该记录未添加就追加 

    if(!re.test(accept)){ 

 $("#accept").val(accept TreeNode.children[i].name "<" ticketBagNo ">,");  

    } 

    } 

}

removeHoverDom：ネズミ标移除节点所為的反应，去掉全选

复制代码代码如下:

function RemoveHoverDom(treeId,treeNode) { 

if (!treeNode.children)return;  

$("#diyBtn1_" TreeNode.id).unbind().remove();  

}

zTree ポイント情報: 必要に応じて生成できます。

以下はデモデータであり、各ノード内の名前、電話機は必要に応じて追加または変更できます。たとえば、1 年分の追加が必要な場合: age="23"、ただし注意すべき点は格式です。

复制代码代码如下:

var zNodes =[
    {id:1,name:"全部老师",open:false,//这里falseは默认关闭,true打开
子供たち:[
  {id:2,name:"测试老师",phone:"123456789101"},
  {id:3,name:"大老师",phone:"15623545621"}
]
    }、
    {id:4,name:"一班",open:true,
子供たち:[

   {id:5,name:"小花",phone:"25364215211"},
  {id:6,name:"小绿",phone:"365241253"}
  }、

{id:7,name:"二班",open:true,
子供たち:[

   {id:8,name:"小家",phone:"25364215211"},
  {id:9,name:"小沙",phone:"365241253"}
   }
];

以下は、jsp を使用してサービスアクティビティから生成した例です。省略する必要はなく、後の参照として残しておきます。

复制代码代码如下:

/*var zNodes =[ 

    {id:1,name:"すべて老师",open:false, 

 子供たち:[ 

  {id:>
  {id:,name:" ",phone:""}< ;/s:if>  

 ] 

    }、

    {id:,name:"",open:true, 

 子供たち:[ 

   {id:,name:"",phone:""},  

  {id:,name:"",phone:""}  

     ]},  

     ]}  

];*/

標準が表示されます。
が表示される場所を初期化します。

复制代幣代码如下:

$(document).ready(function(){ 

    $.fn.zTree.init($("#treeDemo"), 設定, zNodes);  

});

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。