区域树显示区域（多级，多选，回显）
因为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页面了
整颗树由js渲染，包括树的控件
/**
* 区域树
* @author TU
* @param id 要放在具体的div的id
* @param valueId 后台需要的name要求
* @param data 数据
* @returns
*/
function regionTree(id, data){
var str = "";
$("#" + 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]);
}
}
}
}