jQuery zTree はツリーメニューをロードします function

jQuery zTree はツリーメニューをロードします function_jquery

WBOY

リリース： 2016-05-16 15:13:28

オリジナル

1231 人が閲覧しました

このプロジェクトではツリーメニュー機能を設計する必要があったため、Baidu で関連情報を検索したところ、zTree に関する情報がたくさんあることがわかり、非常に優れていると思いました。また、zTree には公式 API ドキュメントもあります。かなり詳しく紹介されていたので、悩んだ末にやっと理解できたので、zTreeの学習のまとめとも言えるものを書いてみました。

zTree の紹介:

1. zTree は、JQuery のコアコードを使用して、最も一般的な機能を実行できる一連の Tree プラグインを実装します

2. zTree v3.0 はコアコードを機能ごとに分割しており、不要なコードをロードする必要がありません

3. 遅延ロード技術を使用すると、数万のノードを簡単にロードでき、IE6 環境下でも基本的に即時停止を実現できます

4. IE、FireFox、Chrome、Opera、Safari およびその他のブラウザと互換性があります

5. JSON データをサポートします

6. ノードデータの静的および Ajax 非同期ロードをサポートします

7. スキンの変更/カスタムアイコンをサポートします (CSS に依存)

8. 非常に柔軟なチェックボックスまたはラジオ選択機能をサポートします

9. 複数のイベント応答コールバックを提供します

10. 柔軟な編集 (追加/削除/変更/確認) 機能。ノードを自由にドラッグアンドドロップでき、複数のノードをドラッグアンドドロップできます。

11. 1 ページ内に複数の Tree インスタンスを同時に生成できます

コア関数とプロパティの紹介:

コア:zTree(setting, [zTreeNodes])

この関数は、JSON 形式のデータオブジェクト設定と JSON 形式のデータオブジェクト zTreeNodes を受け入れて、ツリーを作成します。

コアパラメータ: 設定

zTree のパラメータ設定はすべてここで行われます。簡単に言えば、ツリースタイル、イベント、アクセスパスなどはすべてここで設定されます。

var setting = { 
  showLine: true, 
  checkable: true 
 };

ログイン後にコピー

パラメーターが多すぎるため、特定のパラメーターについては zTreeAPI

を参照してください。

コアパラメータ:zTreeNodes

zTree のノードデータコレクション全体は、JSON オブジェクトで構成されるデータ構造を採用しています。簡単に言うと、ツリーのすべての情報が Json 形式で保存されます。

1. zTree 公式ウェブサイト: http://www.ztree.me/v3/main.php#_zTreeInfo

zTree のソースコード、サンプル、API は、PDF でダウンロードできます。

zTree ノードのデータ取得方法は、静的 (直接定義) と動的 (バックエンドデータベースの読み込み) に分けられます

詳細な構成手順:

最初のステップ - 関連ファイルを導入します

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

ログイン後にコピー

備考:

1) 最初のファイル (zTreeStyle.css) は、zTree のスタイル CSS ファイルです。これを導入するだけでツリー構造のスタイルを表示できます。

2)、2 番目のファイル (jquery-1.9.1.min.js) は、使用する必要があるため、jQuery ファイルです。

3)、3 番目 (jquery.ztree.core-3.5.min.js) は zTree のコア js ファイルです。これは必要です。

4)、最後のファイル(js/jquery.ztree.excheck-3.5.min.js)は拡張ファイルで、主にラジオボタンやチェックボックスの機能に使用されるため、これも使用されます。持ち込む必要があります。

ステップ 2 —— 関連する設定 (特定の詳細な設定については、公式 Web サイトの詳細な API ドキュメントを参照してください)

var zTree;
var setting = {
 view: {
  dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
  showLine: true,//是否显示节点之间的连线
  fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
  selectedMulti: false //设置是否允许同时选中多个节点
 },
 check:{
  //chkboxType: { "Y": "ps", "N": "ps" },
  chkStyle: "checkbox",//复选框类型
  enable: true //每个节点上是否显示 CheckBox 
 },
 data: {
  simpleData: {//简单数据模式
   enable:true,
   idKey: "id",
   pIdKey: "pId",
   rootPId: ""
  }
 },
 callback: {
  beforeClick: function(treeId, treeNode) {
   zTree = $.fn.zTree.getZTreeObj("user_tree");
   if (treeNode.isParent) {
    zTree.expandNode(treeNode);//如果是父节点，则展开该节点
   }else{
    zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
   }
  }
 }
};

ログイン後にコピー

第 3 ステップ - ノードデータをロードし、ツリー構造を表示します

1) HTML ページに ul を直接配置するだけで、データは最終的に ul 要素に自動的に読み込まれます

<body>
 <div class="zTreeDemoBackground left">
  <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul>
 </div>
</body>

ログイン後にコピー

2)、js にデータをロードします

1. 静的メソッド (直接定義)

var zNodes =[
 { id:1, pId:0, name:"test 1", open:false},
 { id:11, pId:1, name:"test 1-1", open:true},
 { id:111, pId:11, name:"test 1-1-1"},
 { id:112, pId:11, name:"test 1-1-2"},
 { id:12, pId:1, name:"test 1-2", open:true},
     ];
     
$(document).ready(function(){
 $.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
 var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
 nodes=treeObj.getCheckedNodes(true),
 v="";
 for(var i=0;i<nodes.length;i++){
  v+=nodes[i].name + ",";
  alert(nodes[i].id); //获取选中节点的值
 }
}

ログイン後にコピー

2. 動的メソッド (バックグラウンドデータベースからロード)

/**
 * 页面初始化
 */
$(document).ready(function(){
 onLoadZTree();
});

/**
 * 加载树形结构数据
 */
function onLoadZTree(){
 var treeNodes;
 $.ajax({
  async:false,//是否异步
  cache:false,//是否使用缓存
  type:'POST',//请求方式：post
  dataType:'json',//数据传输格式：json
  url:$('#ctx').val()+"SendNoticeMsgServlet&#63;action=loadUserTree",//请求的action路径
  error:function(){
   //请求失败处理函数
   alert('亲，请求失败！');
  },
  success:function(data){
//  console.log(data);
   //请求成功后处理函数
   treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
  }
 });
 
 var t = $("#user_tree");
 t = $.fn.zTree.init(t, setting, treeNodes);
}

ログイン後にコピー

Java バックグラウンド読み込みデータコード:

1. ツリーの VO クラスを定義します。他の操作を使用する必要があるため、これを定義する必要はありません。

/**
 * zTree树形结构对象VO类
 * 
 * @author Administrator
 * 
 */
public class TreeVO {
 private String id;//节点id
 private String pId;//父节点pId I必须大写
 private String name;//节点名称
 private String open = "false";//是否展开树节点，默认不展开

 public String getId() {
  return id;
 }

 public void setId(String id) {
  this.id = id;
 }

 public String getpId() {
  return pId;
 }

 public void setpId(String pId) {
  this.pId = pId;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getOpen() {
  return open;
 }

 public void setOpen(String open) {
  this.open = open;
 }

}

ログイン後にコピー

2. データベースにクエリを実行します。SQL 構造フィールドも id、pId、name、open (オプション) の形式にする必要があります (注: pId の中央の I は大文字にする必要があります)。結果を TreeVO クラスに格納します。

/**
  * 加载树形结构数据
  * @param request
  * @param response
  * @throws IOException 
  */
 public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
  WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
  List<TreeVO> user_tree_list = weixinUserService.getUserTreeList();
  String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
  
  PrintWriter out = response.getWriter();
  //利用Json插件将Array转换成Json格式 
  out.print(treeNodesJson);
  
  //释放资源
  out.close();
 }

ログイン後にコピー

すべての操作はここで完了します。残念ながら、文章はうまくなく、組織的な言語も当然良くありません。ご容赦ください。一緒に学び、一緒に成長しましょう！