用ztree的封装树形下拉框

这里用公司原来封装的框架，没有树形下拉框，用的手动写的联级下拉，比较麻烦，我自己前后端封装一个封装树形下拉框，市面上也有不少封装的，可以直接使用，我这边使用的是html

ComboTree（树形下拉框）_js 树形下拉框源码-优快云博客

我这边是使用jauery-ztree自己封装的封装树形下拉框

以行政区划为例

html页面

<div style="width: 90%;margin: 0 auto;height: 40px;display: flex;align-items: center;">
    <label>所属区域:</label>
	<input id="regionCodeName" value=""  style="width: 87%;margin-left: 10px;" type="text" class="sun_input noBorder" readonly="readonly"/>
	<input id="regionCode" value="" type="hidden"/>
</div>

页面js

    //行政区区划
    getRegionSelectTree();
	function getRegionSelectTree() {
        //查询条件
		var params = {
			regionCode: "" 
		};
        //设置同步访问
		$.ajaxSettings.async = false;
        //获取后台list数据，我这边直接用子父的
		$.post('后端访问地址', params, function (retStr) {
			console.log("getRegionTree============================");
			console.log(retStr);
            //获取到的转成json 一般ajax 可以设置dataType:'json' 直接返回接收json的数据，这里我没有这么做，就手动转了下
			var zNodes = stringToJson(retStr);
            //复制全局变量，后面其他可以用到，不必在调取ajax请求了
			regionList = zNodes;
            //这里是我对ztree树又做了封装，方便我后面调用
			regionCodeNameTree = selectTree("regionCodeName", {
				data: {
					key: {
						name: "text",
						title: "title"
					},
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pid"
					}
				},
				check: {
					enable: false,
					chkStyle: "checkbox",
					chkboxType: {'Y': '', 'N': ''}
				},
				view: {
					showLine: true,
					showTitle: true
				},
				callback: {
					onClick: function (node) {
						hideMenu("regionCodeName");
						$("#regionCodeName").val(node.text);
						$("#regionCode").val(node.regionCode);
					}
				}
			}, zNodes);
            
            //我们存入库的数据，需要回显，可以用这个方法，注意这个只是下拉的回显
			if(templeteRegionCode != ''){
				//回显数据
                //获取节点
				var node = regionCodeNameTree.getNodesByParam("regionCode",templeteRegionCode);
                //节点选中
				regionCodeNameTree.selectNode(node[0]);
                //赋值
				$("#regionCode").val(templeteRegionCode);
                //赋值名称
				$("#regionCodeName").val(node[0].regionName);
			}
            
            //这里是重写了点击input弹出下拉树的方法，主要是这个项目css样式比较乱，我封装好的有可能不适用，主要是重定义下拉框和输入框的位置
			/*$('#regionCodeName').off('click');
			$('#regionCodeName').on("click", function () {
				let id = $(this).attr("id");
				var cityObj = $("#" + id);
				var cityOffset = $("#" + id).offset();
				$("#" + id + "Content").css({
					left: cityOffset.left-25 + "px",
					top: cityObj.outerHeight()+2 + "px",
					"min-width": cityObj.width()
				}).slideDown("fast");
                //点击其他地方，关闭下拉框
				$("body").bind("mousedown", function (event) {
					onBodyDown(event, id);
				});
			})*/

		});
        //设置回去，防止影响其他访问
		$.ajaxSettings.async = true;
	}

我封装的js方法

function selectTree(id, setting, zNodes) {
    var idObj = $("#" + id);
    idObj.attr("readonly", "readonly");
    var divid = id + "Content";
    var treeid = id + "tree";
    var inputid = id + "input";
    var divh = `<div id="` + divid + `" class="menuContent" style="display:none; position: absolute;z-index:88;">
             <!--   <input type="text" style="width: 100%;height:20px;border:1px solid #e6e6e6" value="">-->
                <ul id="` + treeid + `" class="ztree" style="margin-top:0; min-width:100%; min-height: 100px;max-height: 500px; background-color: #fff;overflow: auto;border:1px solid #e6e6e6 "></ul>
            </div>`
    idObj.parent().append(divh);
    var obj = $.fn.zTree.init($("#" + treeid), setting, zNodes);
    //点击显示下拉树
    idObj.on("click", function () {
        console.log("this=====id=" + this.id);
        showMenu(this.id);
    })
    return obj;
}
/*******下拉树********/
function showMenu(id) {
    console.log("showMenu=====id=" + id);
    var cityObj = $("#" + id);
    var cityOffset = $("#" + id).offset();
    //定义下拉树的显示位置
    $("#" + id + "Content").css({
        left: cityOffset.left + "px",
        top: cityOffset.top + cityObj.outerHeight() + "px",
        "min-width": cityObj.width()
    }).slideDown("fast");
    //点击其他位置，关闭下拉树
    $("body").bind("mousedown", function (event) {
        onBodyDown(event, id);
    });
}

function onBodyDown(event, id) {

    // if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
    //
    if (!(event.target.id == id || event.target.id == id + "Content" || $(event.target).parents("#" + id + "Content").length > 0)) {
        hideMenu(id);
    }
}
//关闭下拉树
function hideMenu(id) {
    $("#" + id + "Content").fadeOut("fast");
    /*$("body").unbind("mousedown", function(event){
        onBodyDown(event,id);
    });*/
}

到这里，我封装的方法就结束了，大家有更好的改进方法，欢迎大家留言

ztree 文档：https://tool.oschina.net/uploads/apidocs/ztree3.2/api/API_cn.html

官方文档：http://www.treejs.cn/v3/main.php#_zTreeInfo