因為select2，在三層之後無法選中，是以改變思路，通過ztree去渲染區域下拉選擇的功能
渲染後的區域樹有，選擇某一父節點後，區域樹選中的值會在文本框中顯示，取消選中将從文本框中移除，其下子節點顯示被選中狀态單不可被選中，整個過程用遞歸的方式将父節點下所有子節點周遊設定狀态，每次重新整理後，下拉框資料保持不變，選中的值依舊選中
資料可以采用異步加載或者同時加載，因為是隻有單個省的資料，是以直接将所有資料都傳到前端，前端再對資料進行渲染，背景提供資料格式大概這樣的格式
點選這裡下載下傳js檔案，該檔案隻針對特定業務，直接無法使用，使用之前需要導入ztree的包
[{
“children”: [{
“name”: “浙江省本級”,
“id”: “[email protected]”
}, {
“children”: [{
“name”: “杭州市本級”,
“id”: “[email protected]”
}, {
“name”: “臨安市”,
“id”: “330185”
}],
“name”: “杭州市”,
“id”: “330100”
}, {
“children”: [{
“name”: “麗水市本級”,
“id”: “[email protected]”
}, {
“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]);
}
}
}
}
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)