ztree詳解

 一、添加樣式、jsjavascript

<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css">css

<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">html

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>java

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>node

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>jquery

若是想要hideNodes、showNodes等方法,必須加入數據庫

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>json

若是不須要那些hideNodes、showNodes等方法以只添加一個js,代替上面的三個js數組

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>app

二、html設置一個div、ul,注意ul的class是固定的ztree

<div class="treecontentpane">

<ul id="busTree" class="ztree">

</ul>

</div>

三、寫js操做數據

    • 一、setting配置詳情
    • var setting = {
    • //顯示
    • view: {
    • selectedMulti: false, //在複製的時候,是否容許選中多個節點。true爲支持,按下ctrl鍵生效,false不支持。
    • dblClickExpand: false, //雙擊的時候是否切換展開狀態。true爲切換,false不切換
    • fontCss: setFontCss_ztree //設置節點的顏色
    • },
    • //增刪改,移動複製
    • edit: {
    • enable: true, //若是enable爲flase,那麼樹就不能移動了
    • showRemoveBtn: true, //是否顯示樹的刪除按鈕
    • showRenameBtn: true, //是否顯示數的重命名按鈕
    • isSimpleData : true, //數據是否採用簡單 Array 格式,默認false
    • treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性
    • treeNodeParentKey : "parentId",//在isSimpleData格式下,當前節點的父節點id屬性
    • showLine : true, //是否顯示節點間的連線
    • removeTitle: "刪除節點",//刪除Logo的提示
    • renameTitle: "編輯節點",//修改Logo的提示
    • //拖拽
    • drag: {
    • isCopy: true,//可以複製
    • isMove: true,//可以移動
    • prev: false,//不能拖拽到節點前
    • next: false,//不能拖拽到節點後
    • inner: true//只能拖拽到節點中
    • }
    • },
    • //異步
    • async: {
    • enable: true, //開啓異步加載
    • type:"get",
    • url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest",
    • contentType:"application/json",
    • autoParam: ["id"], //異步加載數據,自動添加id參數,會自動獲取當前節點的id值
    • dataFilter:filter, //過濾,跟easy-ui中的loadFilter方法同樣。
    • otherParam: { "id":"1", "code_name":"固網測試"}//提交的時候就會提交參數id=1&code_name=固網測試
    • },
    • data:{
    • key:{
    • name:"codeName" //節點顯示的值
    • },
    • //
    • simpleData:{
    • enable:true,//若是爲true,能夠直接把從數據庫中獲得的List集合自動轉換爲Array格式。而沒必要轉換爲json傳遞
    • idKey:"id",//節點的id
    • pIdKey:"parentId",//節點的父節點id
    • rootPId:null
    • }
    • },
    • //回調函數
    • callback: {
    • beforeDrag: beforeDrag,//拖拽以前
    • beforeDrop: beforeDrop,//拖拽結束
    • onDrop: zTreeOnDrop,//拖拽結束後
    • //onDrag: zTreeOnDrag,//拖拽的時候
    • beforeRemove: zTreeBeforeRemove,//刪除節點前
    • onRemove: zTreeOnRemove,//節點刪除以後
    • beforeEditName: zTreeBeforeEditName,//進行編輯以前
    • //beforeRename: zTreeBeforeRename,//重命名節點以前
    • //onRename: zTreeOnRename,//重命名以後
    • onClick: zTreeOnClick,//點擊
    • onRightClick: zTreeOnRightClick,//右鍵
    • onAsyncSuccess: zTreeOnAsyncSuccess//異步加載
    • //beforeExpand: beforeExpand,//展開節點前
    • //onAsyncSuccess: onAsyncSuccess,//異步數據加載成功的回調
    • //onAsyncError: onAsyncError //異步數據加載錯誤後回調
    • }
    • };
    • 二、zTree回調方法
    • //對獲得的json數據進行過濾,加載樹的時候執行
    • function filter(treeId, parentNode, responseData) {
    • var contents = (responseData.content)?responseData.content:responseData;
    • //當第一次加載的時候只顯示一級節點,可是要讓別人知道對應一級節點下是否有數據,那麼就須要設置isParent,爲true能夠展開,下面有數據。
    • //我這裏是因爲異步加載數據,只加載根節點以及一級節點。那麼一級節點下還有子節點,因此設置isParent顯示還有子節點的效果
    • if(contents.length >0){
    • for(var i= 0 ; i <contents.length;i++){
    • //是不是葉子節點
    • var isParent = contents[i].isParent;
    • if(isParent == false){
    • isParent = true;
    • }else{
    • isParent = false;
    • }
    • contents[i].isParent = isParent;
    • }
    • }
    • return contents;
    • };
    • //節點異步加載完成後顯示形狀
    • //加載樹的默認顯示根節點,以及一級節點,每次異步加載數據都會執行這個方法,也就是有請求都會異步
    • function zTreeOnAsyncSuccess(event, treeId, msg) {
    • try {
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • //獲取全部節點
    • var nodes = treeObj .getNodes();
    • for(var i = 0;i<nodes.length;i++){
    • //展開一級節點
    • treeObj .expandNode(nodes[i], true);
    • }
    • } catch (err) {
    • holly.showError("數據異常", err);
    • }
    • }
    • //設置一個標識,是爲了解決點擊的時候,執行異步。顯示全部的以及節點,以及一級節點下的全部節點
    • 注意:若是你是異步只加載了根節點和一級節點,那麼增刪改的時候,獲得的異步結果,會獲取不到該節點的子節點,只有zTreeOnAsyncSuccess方法執行完後,纔可以取到子節點的信息。因此在Eclipse中run執行和debugger執行獲得不一樣的結果。由於run運行數據還沒接受到。
    • /* var firstAsyncSuccessFlag = 0;
    • function zTreeOnAsyncSuccess(event, treeId, msg) {
    • if (firstAsyncSuccessFlag == 0 ) {
    • try {
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • var selectedNode = zTree.getSelectedNodes();
    • //獲取整個json節點
    • var nodes = zTree.getNodes();
    • //展開根節點下的第一個節點
    • treeObj.expandNode(nodes[0], true);
    • //把根節點下的全部節點轉換爲數組
    • var childNodes = zTree.transformToArray(nodes[0]);
    • //展開根節點下的第一個節點的第一節節點
    • treeObj .expandNode(childNodes[1], true);
    • //選中根節點下的第一個節點
    • treeObj .selectNode(childNodes[1]);
    • firstAsyncSuccessFlag = 1;
    • } catch (err) {
    • holly.showError("數據異常", err);
    • }
    • }
    • }*/
    • //初始化樹
    • zTree = $.fn.zTree.init($("#busTree"), setting);
    • //獲取樹
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • //異步刷新整個樹,不推薦使用
    • treeObj.reAsyncChildNodes(null, "refresh");
    • //新增的時候局部刷新,刷新子節點
    • treeObj.reAsyncChildNodes(zTree.getSelectedNodes().childNodes,"refresh");
    • //修改的節點的時候,更改節點信息
    • //一、設置節點值
    • treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val();
    • treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val();
    • treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val();
    • //二、更新節點信息
    • treeObj.updateNode(zTree.getSelectedNodes()[0]);
    • //搜索功能:
    • 一、根據查詢的結果,顯示對應樹形結構。注意這裏只能是對應查找幾級節點的信息,還有待優化。
    • //根據code_name模糊查詢
    • function searchByValue(){
    • var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    • //通過transformToArray轉換後是一個Array數組,數組裏的每一個元素都是object對象,這個對象裏包含了node的21個屬性。
    • var nodes = zTree.transformToArray(zTree.getNodes()[0].children);
    • var key=$("#codeName").val();
    • //空格回車符 不作查詢 直接顯示所有
    • if(/^\s*$/.test(key)){
    • //updateNodes(false);
    • zTree.showNodes(nodes);
    • return;
    • }
    • //首先隱藏
    • zTree.hideNodes(nodes);
    • var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); //模糊匹配
    • //把獲得的節點放到filterNodes臨時數組中
    • var filterNodes=[];
    • for(var i=0;i<nodeList.length;i++){
    • //這裏只能是級別是2的
    • if(nodeList[i].level==2) {
    • filterNodes.push(nodeList[i]);
    • }
    • }
    • //顯示
    • zTree.showNodes(filterNodes);
    • //取得每個節點的父節點,進行展現
    • for(var i=0;i<filterNodes.length;i++){
    • //主要是找不到父節點的問題
    • var parentNode = filterNodes[i].getParentNode();
    • //展開當前節點的父節點下的全部節點
    • zTree.expandNode(parentNode, true, false, false);
    • //顯示全部父節點
    • zTree.showNode(parentNode);
    • }
    • }
    • 二、搜索變色功能,可是會顯示所有信息,查詢到的結果會顯示不一樣的顏色
    • //展開全部節點
    • function expand_ztree(treeId){
    • var treeObj = $.fn.zTree.getZTreeObj(treeId);
    • treeObj.expandAll(true);
    • }
    • //節點沒有父節點,展開,有父節點隱藏
    • function close_ztree(treeId){
    • var treeObj = $.fn.zTree.getZTreeObj(treeId);
    • var nodes = treeObj.transformToArray(treeObj.getNodes());
    • var nodeLength = nodes.length;
    • for (var i = 0; i < nodeLength; i++) {
    • if (nodes[i].PARENT_ID == null) {
    • //根節點:展開
    • treeObj.expandNode(nodes[i], true, true, false);
    • } else {
    • //非根節點:收起
    • treeObj.expandNode(nodes[i], false, true, false);
    • }
    • }
    • }
    • //查詢的onclick時間
    • function searchByValue(){
    • searchByFlag_ztree("treeDemo","codeName");
    • }
    • //獲得查詢結果,並進行設置樣式和展開
    • function searchByFlag_ztree(treeId, searchConditionId){
    • //<1>.搜索條件
    • var searchCondition = $('#' + searchConditionId).val();
    • // <2>.獲得模糊匹配搜索條件的節點數組集合
    • var highlightNodes = new Array();
    • if (searchCondition != "") {
    • var treeObj = $.fn.zTree.getZTreeObj(treeId);
    • //模糊查詢
    • highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
    • }
    • // <3>.高亮顯示並展現【指定節點】
    • highlightAndExpand_ztree(treeId, highlightNodes);
    • }
    • //展開,並顯示不一樣顏色
    • function highlightAndExpand_ztree(treeId, highlightNodes){
    • var treeObj = $.fn.zTree.getZTreeObj(treeId);
    • // <1>. 先把所有節點更新爲普通樣式
    • var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    • var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children);
    • for (var i = 0; i < treeNodes.length; i++) {
    • treeNodes[i].highlight = false;
    • treeObj.updateNode(treeNodes[i]);
    • }
    • //<2>.收起樹, 只展開根節點下的一級節點
    • close_ztree(treeId);
    • // <3>.把指定節點的樣式更新爲高亮顯示,並展開
    • if (highlightNodes != null) {
    • for (var i = 0; i < highlightNodes.length; i++) {
    • //高亮顯示節點,並展開
    • highlightNodes[i].highlight = true;
    • treeObj.updateNode(highlightNodes[i]);
    • //高亮顯示節點的父節點的父節點....直到根節點,並展現
    • var parentNode = highlightNodes[i].getParentNode();
    • var parentNodes = getParentNodes_ztree(treeId, parentNode);
    • //展開
    • treeObj.expandNode(parentNodes, true, false, true);
    • treeObj.expandNode(parentNode, true, false, true);
    • //設置顏色
    • setFontCss_ztree("",highlightNodes[i]);
    • }
    • }
    • }
    • //遞歸查找父節點
    • function getParentNodes_ztree(treeId, node){
    • if (node != null) {
    • var treeObj = $.fn.zTree.getZTreeObj(treeId);
    • var parentNode = node.getParentNode();
    • return getParentNodes_ztree(treeId, parentNode);
    • } else {
    • return node;
    • }
    • }
    • //設置顏色
    • function setFontCss_ztree(treeId, treeNode) {
    • if (treeNode.PARENT_ID == null) {
    • //根節點
    • return {color:"#333", "font-weight":"bold"};
    • } else if (treeNode.isParent == false){
    • //葉子節點
    • return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
    • } else {
    • //父節點
    • return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
    • }
    • }
    • //點擊的時候判斷節點有沒有數據,以便於datadrid是否請求後臺刷新
    • if(treeNodes.isParent){
    • datagrid刷新
    • }else{
    • 提示
    • }
    • //獲取過濾以外的全部數據
    • var filterNodes = treeObj.getNodesByFilter(filters);
    • function filters(node) {
    • return (node.highlight == true);
    • }
    • //獲取過濾的全部數據
    • treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
    • //當焦點放在節點上顯示新增Logo
    • function addHoverDom(treeId, treeNode) {
    • var sObj = $("#" + treeNode.tId + "_span");
    • if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    • var addStr = " <span class='button add' id='addBtn_" + treeNode.tId
    • + "' title='新增節點' onfocus='this.blur();'></span>";
    • sObj.after(addStr);
    • var btn = $("#addBtn_"+treeNode.tId);
    • if (btn) btn.bind("click", function(){
    • //彈出easy-ui新增對話框
    • treeBusinessManager.newTreeDialog();
    • return false;
    • });
    • };
    • //當鼠標不在節點的時候,自動隱藏新增按鈕
    • function removeHoverDom(treeId, treeNode) {
    • $("#addBtn_"+treeNode.tId).unbind().remove();
    • };
    • //獲取某個節點下的全部節點
    • //需求:當只能在葉子節點上添加數據的時候,可是展示的時候,須要若是點擊葉子節點顯示葉子節點的數據,點擊節點顯示該節點下的全部葉子節點的信息。
    • //注意:這裏數據用,區分id,是爲了去後臺進行in查詢
    • function getAllChildNodes(treeNode) {
    • var treeObj = $.fn.zTree.getZTreeObj("sheetTree");//獲取ztree
    • var childNodes = treeObj.transformToArray(treeNode);//把該節點的下的全部數據轉換爲數組
    • var nodes = new Array();
    • var j = 0;
    • for(i = 0; i < childNodes.length; i++) {
    • //只有保存葉子節點的數據
    • if(!childNodes[i].isParent){
    • nodes[j] = childNodes[i].id;
    • //nodes.join(",");
    • j++;
    • }
    • }
    • return nodes;
    • }
    • //獲取該節點下的全部子節點
    • getChildNodes:function(treeNode,result){
    • if (treeNode.isParent) {
    • var childrenNodes = treeNode.children;
    • if (childrenNodes) {
    • for (var i = 0; i < childrenNodes.length; i++) {
    • result += ',' + childrenNodes[i].id;
    • result = sheetShareManager.getChildNodes(childrenNodes[i], result);
    • }
    • }
    • }
    • return result;
    • }
    • //刷新節點
    • function refreshNode(id) {
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • var node = treeObj.getNodeByParam("id", id, null);
    • if (node) {
    • treeObj.reAsyncChildNodes(node, "refresh");
    • } else {
    • setTimeout(function() {
    • refreshNode(id);
    • }, 10);
    • }
    • }
    • //刷新父節點
    • function refreshParentNode(id) {
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • var node = treeObj.getNodeByParam("id", id, null);
    • var pNode = node.getParentNode();
    • if (pNode) {
    • refreshNode(pNode.id);
    • } else {
    • refreshNode("0");
    • }
    • }
    • //刪除根節點的時候,銷燬整棵樹
    • $.fn.zTree.destroy("busTree");
    • //修改節點名,判斷是否爲空,或者超出限制
    • function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
    • if (newName.length>10||newName.trim().length<=0) {
    • toastr.error("填寫信息不符合規則!");
    • var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    • treeObj.cancelEditName();
    • return false;
    • }
    • return true;
    • }
    • function zTreeOnRename(event, treeId, treeNodes, isCancel) {
    • //真正觸發的時候爲undefiend。觸發不成功的時候,爲true
    • if(isCancel == undefined){
    • //修改操做
    • }
    • }
    • //右鍵顯示新增,修改,刪除(與easy-ui總體相似)
    • //右鍵,填出編輯框
    • function zTreeOnRightClick(event, treeId, treeNode) {
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • //設置選中右鍵節點
    • treeObj.selectNode(treeNode);
    • //這裏能夠爲爲div添加click事件,進行新增,修改,刪除操做。
    • 注意:設置選中節點,才能去對應的操做方法中獲取選中的幾點
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • var nodes = treeObj.getSelectedNodes();)
    • $('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY});
    • };
    • //刪除節點的時候須要注意
    • //因爲數據是異步加載的,因此不只須要進行數據刪除,還須要進行邏輯刪除。不然數據沒有及時的回顯,那麼樹的狀態isParent還沒改變。
    • for (var i=0, l=nodes.length; i < l; i++) {
    • treeObj.removeNode(nodes[i]);
    • }
    • //在onBeforeRemove中操做,異步的判斷
    • //在數據操做成功以後
    • var treeObj = $.fn.zTree.getZTreeObj("busTree");
    • treeObj.selectNode(treeNode);
    • var nodes = treeObj.getSelectedNodes();
    • for (var i=0, l=nodes.length; i < l; i++) {
    • treeObj.removeNode(nodes[i]);//默認是false,若是設置爲true,那麼就會觸發onRemove函數
    • }
    • //html中的menu
    • <div id="configure-tree-menu" class="easyui-menu" style="width:150px;">
    • <div id="configureAdd" data-options="iconCls:'icon-add'">新增節點</div>
    • <div id="configureEdit" data-options="iconCls:'icon-edit'">編輯節點</div>
    • <div id="configureDelete" data-options="iconCls:'icon-remove'">刪除節點</div>
相關文章
相關標籤/搜索