区域树显示区域（多级，多选，回显）

最新推荐文章于 2024-08-19 10:41:59 发布

找不到正经名字

最新推荐文章于 2024-08-19 10:41:59 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： ztree select2 区域多级多选

本文链接：https://blog.csdn.net/qq_31962349/article/details/84622044

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

因为select2，在三层之后无法选中，所以改变思路，通过ztree去渲染区域下拉选择的功能
渲染后的区域树有，选择某一父节点后，区域树选中的值会在文本框中显示，取消选中将从文本框中移除，其下子节点显示被选中状态单不可被选中，整个过程用递归的方式将父节点下所有子节点遍历设置状态，每次刷新后，下拉框数据保持不变，选中的值依旧选中
数据可以采用异步加载或者同时加载，因为是只有单个省的数据，所以直接将所有数据都传到前端，前端再对数据进行渲染，后台提供数据格式大概这样的格式
点击这里下载js文件，该文件只针对特定业务，直接无法使用，使用之前需要导入ztree的包

[{
“children”: [{
“name”: “浙江省本级”,
“id”: “330000@”
}, {
“children”: [{
“name”: “杭州市本级”,
“id”: “330100@”
}, {
“name”: “临安市”,
“id”: “330185”
}],
“name”: “杭州市”,
“id”: “330100”
}, {
“children”: [{
“name”: “丽水市本级”,
“id”: “331100@”
}, {
“name”: “龙泉市”,
“id”: “331181”
}],
“name”: “丽水市”,
“id”: “331100”
}],
“name”: “浙江省”,
“id”: “330000”
}]
渲染：
html页面，因为要做回显，所以显示数据的控件放html页面了

<s:hidden name='vo.regionFullCode' id='regionCodes'></s:hidden>
<span class='rdst w80'>所属区域：</span>
<s:textfield id='region' cssClass='sbipt' name='vo.regionName' style='width:200px;z-index:10;' AUTOCOMPLETE='ON' maxlength='0'></s:textfield>

整颗树由js渲染，包括树的控件

/**
 * 区域树
 * @author TU
 * @param id 要放在具体的div的id
 * @param valueId 后台需要的name要求
 * @param data 数据
 * @returns
 */
function regionTree(id, data){
	var str = "<div id='region_tree' class='ztree searchZtree' style='width:200px;overflow: auto;'></div>";
	$("#" + id).append(str);
	$("#region_tree").hide();
	$("#region").focus(function(){
		$("#region_tree").show();
	});
	
	$(document).mouseup(function(e) {
		var _con = $('#' + id); // 设置目标区域
		if (!_con.is(e.target) && _con.has(e.target).length === 0) { // Mark 1
			if ($('#region_tree').is(':visible')) {
				$('#region_tree').hide();
			}
		}
	});
	var setting = {
			check : {
				chkboxType : {
					"Y" : "s",
					"N" : "s"
				},
				enable : true,
			},
			callback : {
				onCheck : function(event, treeId, treeNode){
					var zTree = $.fn.zTree.getZTreeObj("region_tree");//获取ztree
					var checkedStatus = treeNode.getCheckStatus();
					if (!!zTree) {
						var selRegionNodes = zTree.getCheckedNodes(true);
						var regionCodes = "";
						var regionName = "";
						if (checkedStatus.checked) {
							var regionCode = $("#regionCodes").val();
							var str = regionCode.split(",");
							for(var i = 0; i < str.length; i++) {
								if(!!str[i]){
									var nowNode = zTree.getNodesByParam("id", str[i]);
									getNowNodeParent(treeNode, nowNode[0], str[i], nowNode[0].name);
								}
							}
							if(!(regionCode.search(treeNode.id + ",") != -1)){
								regionCodes = $("#regionCodes").val() + treeNode.id + ",";
								regionName = $("#region").val() + treeNode.name + " ";
							}
						} else {
							regionCodes = $("#regionCodes").val().replace(treeNode.id + ",", "");
							var str = $("#region").val();
							if (!!str && str.indexOf(" ") == -1) {
								regionName = (str + " ").replace(treeNode.name + " ", "");
						    } else {
						    	regionName = str.replace(treeNode.name + " ", "");
						    }
							
						}
						$("#region").val(regionName);
						$("#regionCodes").val(regionCodes);
					}

					var checkedStatus = treeNode.getCheckStatus();

					var child = treeNode.children;
					if (!!child) {
						if (checkedStatus.checked) {
							setChildDisable(zTree, treeNode);
						} else {
							setChildEnable(zTree, treeNode);
						}
					}
				},onExpand : function(event, treeId, treeNode){
					var zTree = $.fn.zTree.getZTreeObj("region_tree");
					var checkedStatus = treeNode.getCheckStatus();
					if(!!checkedStatus){
						if(checkedStatus.checked == true){
							setChildDisable(zTree, treeNode);
						}
					}
				}
			},
			data : {//表示tree的数据格式
				key:{
					name:"name"
				},
				simpleData : {
					enable : true,//表示使用简单数据模式
					idKey : "id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
					pidKey : "name",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
				}
			},
			view : {
				fontCss : setFontCss
			}
		};
	if(!!data){
		var zNodes = jQuery.parseJSON(data);
		zNodes = eval("(" + data + ")");
		treeObj = $.fn.zTree.init($("#region_tree"), setting, zNodes);
		var str = $("#regionCodes").val().split(",");
		for (var i = 0; i < str.length; i++) {
			var nowNode = treeObj.getNodesByParam("id", str[i]);
			if(nowNode != null && nowNode.length != 0 ){
				nowNode[0].checked = true;
				treeObj.updateNode(nowNode[0]);
			}
		}
	}
}
function getNowNodeParent(treeNode, nowNode, nodeId, nodeName){
	var parent = nowNode.getParentNode();
	if(treeNode.id == nowNode.id){
		regionCodes = $("#regionCodes").val().replace(nodeId + ",", "");
		regionName = $("#region").val().replace(nodeName + " ", "");
		$("#region").val(regionName);
		$("#regionCodes").val(regionCodes);
	}
	if(!!parent){
		getNowNodeParent(treeNode, parent, nodeId, nodeName);
	}
}
/**
 * 设置子节点不可用
 * @param zTree
 * @param treeNode
 * @returns
 */
function setChildDisable(zTree, treeNode) {
	var child = treeNode.children;
	for (var obj = 0; obj < child.length; obj++) {

		var checkedStatus = child[obj].getCheckStatus();
		if (!!checkedStatus && checkedStatus.checked) {
			var regionCode = $("#regionCodes").val();
			if(!(regionCode.search(treeNode.id + ",") != -1)){
				regionCodes = $("#regionCodes").val().replace(child[obj].id + ",", "");
				regionName = $("#region").val().replace(child[obj].name + " ", "");
				$("#region").val(regionName);
				$("#regionCodes").val(regionCodes);
			}
			child[obj].chkDisabled = true;
		} else {
			child[obj].checked = true;
			child[obj].chkDisabled = true;//是否不能选
		}
		zTree.updateNode(child[obj]);
		if (child[obj].isParent) {
			if (!!child[obj].children) {
				setChildDisable(zTree, child[obj]);
			}
		}
	}
}
/**
 * 设置子节点可用
 * @param zTree
 * @param treeNode
 * @returns
 */
function setChildEnable(zTree, treeNode) {
	var child = treeNode.children;
	for (var obj = 0; obj < child.length; obj++) {
		var checkedStatus = child[obj].getCheckStatus();
		if (!!checkedStatus && checkedStatus.checked) {
			var regionCode = $("#regionCodes").val();
			if(!(regionCode.search(treeNode.id + ",") != -1)){
				regionCodes = $("#regionCodes").val().replace(child[obj].id + ",", "");
				regionName = $("#region").val().replace(child[obj].name + " ", "");
				$("#region").val(regionName);
				$("#regionCodes").val(regionCodes);
			}
			child[obj].checked = false;
			child[obj].chkDisabled = false;//是否不能选
		} else {
			child[obj].checked = false;
			child[obj].chkDisabled = false;//是否不能选
		}
		zTree.updateNode(child[obj]);
		if (child[obj].isParent) {
			if (!!child[obj].children) {
				setChildEnable(zTree, child[obj]);
			}
		}
	}
}