ホームページ > 記事 > ウェブフロントエンド > ztreeは左側にダイナミックスパニングツリーを実装し、右側にコンテンツ詳細機能の共有例を実装します。
この記事では主に、左側で動的に生成されたツリーの ztree の実装について、右側でコンテンツの詳細について説明します。zTree は、JQuery のコア コードを使用して、最も一般的な機能を実行できる Tree プラグインのセットを実装します。 IE、FireFox、Chrome およびその他のブラウザで、ページ内で複数のツリー インスタンスを同時に生成できます。JSON データをサポートします。複数のイベント応答とフィードバックをサポートします。スキン/個人用アイコンの任意の変更をサポートします (CSS に応じて)。
ページのプロトタイプ:
機能要件: 左側のツリーで子ノードをクリックし、バックグラウンドにリクエストを送信し、右側のフォームに要求された情報を表示します
フロントエンド コードの実装:
cssドキュメントの導入:
<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" /> <link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" /> <link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /css/global/ztree_custom.css"/>" />
jsファイルの導入:
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script> <script src="<c:url value="/js/system/organ.js"/>"></script>
jsp部分: HTML部分は非常に単純で、開花した木のpに相当します
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>
js部分:
ツリーノードの設定
var setting = { check : { enable : false }, view : { selectedMulti : false, // addHoverDom: addHoverDom, // removeHoverDom: removeHoverDom, }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId" } }, edit : { enable : true, removeTitle : "删除节点", showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false, showRenameBtn : false }, callback : { // onRightClick : onRightClick, // 单击事件 onClick : zTreeOnClick, onNodeCreated : zTreeOnNodeCreated, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove } };
初期化、ノードを展開するかどうかを決定します:
var zTreeObj; function initTree() { $.get(basePath + "/system/organ/getOrganTreeList", function(data) { zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree); zTreeObj.expandAll(false); }); } // 给生成的节点添加class属性 // 控制节点是否显示删除图标 function setRemoveBtn(treeId, treeNode) { return treeNode.pId != null; } // 给生成的节点添加class属性 function zTreeOnNodeCreated(event, treeId, treeNode) { var str = treeNode.tId + "_span"; $("#" + str).addClass(treeNode.type); }
バックグラウンド開始リクエストなどのイベントをクリックして、右側の情報をリクエストします
// 单击事件,向后台发起请求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } $("#moreinform").show(); $("#baseinform").hide(); $(".po_phone_num_r").css("display", "none"); $(" .po_email_r").css("display", "none"); if (treeNode.type == "organ") { $("#organ").html("部门名称"); $("#Partman").show(); $("#Email").hide(); $("#sorgan").html("上级部门"); $("#partaddress").html("部门地址"); $("#partman").html("部门负责人"); $("#parttel").html("手机"); if (treeNode.id == "1") { $("#po").hide(); } else { $("#po").show(); } $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "get", success : function(data) { var organ = data.returnData.organ; $("#organId").val(organ.organId); $("#sex").hide(); $("#name").val(organ.organName); $("#diz").val(organ.address); $("#tel").val(organ.phone); $("#manage").val(organ.manager); $("#parentOrgan").val(organ.parentId); } }); } else { $("#po").show(); $("#organ").html("姓名"); $("#sex").show(); $("#Email").show(); $("#Partman").hide(); $("#sorgan").html("所属部门"); $("#partaddress").html("职位"); $("#parttel").html("手机"); $.ajax({ url : basePath + "/system/organ/getStaff/" + treeNode.id, type : "get", success : function(data) { var staff = data.returnData.staff; $("#organId").val(staff.id); $("#name").val(staff.name); $("#diz").val(staff.position); $("#tel").val(staff.tel); $("#profession").val(staff.sex) $("#Email02").val(staff.email); $("#parentOrgan").val(staff.organId); } }); } }
イベントを削除します:
// 删除节点事件 function zTreeOnRemove(event, treeId, treeNode) { if (treeNode.type == "organ") { $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { location.reload(); } } }); } else { $.ajax({ url : basePath + "/system/organ/deleteStaff/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { initTree(); } } }); } }
関連する推奨事項:
例の説明 jQuery は zTree を使用しますドラッグアンドドロップ機能を実装するプラグイン
zTree jQuery ツリープラグインの使用例の詳細な説明
ztree を使用してツリーテーブルを実装する jQuery の詳細な例
以上がztreeは左側にダイナミックスパニングツリーを実装し、右側にコンテンツ詳細機能の共有例を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。