java实现ztree树形,ztree实现中国省市区树形，可多选

首先表

CREATE TABLE `sys_area` (

`id` INT(11) NOT NULL COMMENT '编号',

`parent_id` INT(11) NOT NULL COMMENT '父级编号',

`parent_ids` VARCHAR(100) NOT NULL DEFAULT '' COMMENT '所有父级编号',

`code` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '区域编码',

`name` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '区域名称',

`type` VARCHAR(1) NOT NULL DEFAULT '' COMMENT '区域类型',

`is_municipality` VARCHAR(1) NOT NULL DEFAULT 'N' COMMENT '是否直辖市',

`active_flag` VARCHAR(1) NOT NULL DEFAULT '0' COMMENT '删除标记',

`remarks` VARCHAR(255) NULL DEFAULT NULL COMMENT '备注信息',

`create_by` VARCHAR(64) NULL DEFAULT NULL COMMENT '创建者',

`create_date` DATETIME NULL DEFAULT NULL COMMENT'创建时间',

`update_by` VARCHAR(64) NULL DEFAULT NULL COMMENT '更新者',

`update_date` DATETIME NULL DEFAULT NULL COMMENT'更新时间',

PRIMARY KEY (`id`),

INDEX `sys_area_parent_id` (`parent_id`),

INDEX `sys_area_parent_ids` (`parent_ids`),

INDEX `sys_area_code` (`code`),

INDEX `type_name` (`type`, `name`(2))

)

COMMENT='区域表'

后台写SQL组装省市区树形结构

select id,parent_id,name,code,type from (

select t1.id,t1.parent_id,t1.name,t1.code,t1.type,if(find_in_set(parent_id, @pids) > 0, @pids := concat(@pids, ',', id), 0) as ischild

from (

select id,parent_id,name,code,type from sys_area t order by parent_id, id

) t1,

(select @pids := 1) t2

) t3 where ischild!= 0;

楼主起先用的resultMap里面返回一个父级和子级，数据量小的时候完全没问题，但是省市区将近4000条数据，用这种查询差不多要100秒，GG

所以改为递归查询，看下查询用时

只需要0.671秒对比下100秒

然后就是前台接收数据，用ztree形成树

loadTree();

});

function loadTree(){

var data =[];

data=data.concat(${templateAreaList});

loadTreeData(data);

}

function loadTreeData(data) {

var setting={

check: {

enable:true,

chkStyle:"checkbox",

chkboxType: { "Y": "p", "N": "s" }//勾选操作，只影响父级节点；取消勾选操作，只影响子级节点

},

view: {

dblClickExpand:false,

},

data: {

simpleData: {

enable:true}

},

callback: {

onClick: onTreeClick,

}

};

$.fn.zTree.init($("#ztree"), setting, data);

var zTree= $.fn.zTree.getZTreeObj("ztree");

// 业务，默认不展开节点

// 实现，先展开节点，在关闭，否则取不到子节点信息//展开全部节点

zTree.expandAll(true);//关闭全部节点

zTree.expandAll(false);//node：树形节点//expandFlag:是否展开节点//sonSign：是否展开其子孙节点//focus：展开或折叠节点后是否设置焦点//callbackFlag：这行该方法是否触发回调函数//zTree的expandNode (node, expandFlag, sonSign, focus, callbackFlag)

zTree.expandNode(zTree.getNodeByTId(""), true, true, true, false);}

function onTreeClick(event, treeId, treeNode, clickFlag){

}

function getData() {

}

省市区多选数据回显

思路：假如我选择了河北省石家庄市长安区，福建省厦门市，浙江省，这三个地址,那么我只需要获取长安区，厦门市，以及浙江省，这三个地址的code，再根据code去查找他们的父级，也就是根据勾选数据中的子节点，来获取他们的父节点信息。

function getData() {//获取树对象

var zTree = $.fn.zTree.getZTreeObj("ztree");if (null !=zTree) {//获取选中节点的值，遍历

treeArray = zTree.getCheckedNodes(true);if (treeArray.length != 0) {

var tree=[];for (var i = 0; i < treeArray.length; i++) {

var childrenNodes=treeArray[i].children;

var parentNodes=treeArray[i].getParentNode();if(null == childrenNodes || childrenNodes == "" || childrenNodes == "undefined"){//区县

tree.push(treeArray[i]);continue;

}else if(null == parentNodes || parentNodes == "" || parentNodes == "undefined"){//省

var provinceFlag = true;for (var j = 0; j < childrenNodes.length; j++) {if(childrenNodes[j].checked != "undefined" && childrenNodes[j].checked == true){//子节点被勾选

provinceFlag = false;continue;

}

}if(provinceFlag == true){

tree.push(treeArray[i]);

}

}else{//市

var cityflag = true;for (var k = 0; k < childrenNodes.length; k++) {if(childrenNodes[k].checked != "undefined" && childrenNodes[k].checked == true){//子节点被勾选

cityflag = false;continue;

}

}if(cityflag == true){

tree.push(treeArray[i]);

}

}

}returntree;

}

}

}

看下效果

接着就是再点击行政区划地址信息回显，并勾选

function loadTreeData(data) {

......

// loadTreeDate增加数据回显方法//数据勾选回显

var treeCode = '${treeCode}';//参数if(null != treeCode && treeCode != ""){

var treeCodeArr= treeCode.split(",");for(var data of treeCodeArr) {//获取回传的参数

var nodes = zTree.getNodesByParam("allIdx", data, null);//根据回传参数勾选数据

zTree.checkNode(nodes[0], true, true);

}

}

}