使用Ztree實現目錄樹

目標實現。點擊按鈕，出現目錄結構樹。可以單擊選擇節點，選中之后樹隱藏，節點展示在input中。

HTML代碼如下：

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">
    核准目錄</label>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
         <input type="text" class="form-control" placeholder="" data-related='true' id='textAPPROVE_INDUSTRY' name='textAPPROVE_INDUSTRY'
         readonly value="${data.attrs.formInfo.textAPPROVE_INDUSTRY}" />
    </div>
    <label class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-left control-label" style="text-align: left;">
          <span id="menuAPPROVE_INDUSTRYBtn" class="tableBtn" data-show="false">選擇</span>
    </label>
    <input type="hidden" id="APPROVE_INDUSTRY" data-related='true' name='APPROVE_INDUSTRY' value="${data.attrs.formInfo.APPROVE_INDUSTRY}" />
</div>

 

JS代碼：

第一步、引入ztree.js

    /**
     * 綁定樹
     */
    $.fn.zTree.init($("#treeAPPROVE_INDUSTRY"), settingHzml);

 

實現setting

/**
 * setting設置
 */
var settingHzml = {
    view: {
        selectedMulti: false
    },
    async: {
        enable: true, // 啟用異步加載
        url:"" 后台請求數據地址, // 調用的后台的方法
        autoParam: ["id"], // 向后台傳遞的參數
        dataFilter: filterHzml
    },
    callback: {
        beforeClick: beforeClickHzml
    }
};

 

實現filter

function filterHzml(treeId, parentNode, childNodes) {
    var array = [];
    childNodes = childNodes.invDictHzmls;//獲取后台傳遞的數據
    if (!childNodes) return null;
    for (var i = 0, l = childNodes.length; i < l; i++) {
        repname = childNodes[i].NAME.replace(/\.n/g, '.');

        //將后台傳過來的參數拼接成json格式，並放在數組中，如果有必要需要對其是否為父節點做處理
        if (childNodes[i].isParent) {
            array[i] = { id: childNodes[i].ID, name: repname, code2: childNodes[i].CODE2, code: childNodes[i].CODE, isParent: true };
        } else {
            array[i] = { id: childNodes[i].ID, name: repname, code2: childNodes[i].CODE2, code: childNodes[i].CODE, isParent: false };
        }
    }
    return array;
}

 

實現callback

function beforeClickHzml(treeId, treeNode) {
    if (!treeNode.isParent) {
        $("#textAPPROVE_INDUSTRY").val(treeNode.name);
        $("#APPROVE_INDUSTRY").val(treeNode.code);
        $("#label_textAPPROVE_INDUSTRY5").text(treeNode.name);
        hideMenuHzml();
        return false;
    } else {
        return true;
    }
}

 

 

效果展示：

 

 

點擊后