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="findAllArea" resultType="Area"> 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; </select>

 　　SQL解释能够看http://www.javashuo.com/article/p-zxxtyaef-et.html　

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

　　因此改成递归查询，看下查询用时

　　只须要0.671秒对比下100秒

　　

而后就是前台接收数据，用ztree造成树

<div id="ztree" class="ztree"></div>

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/treeview.jsp"%>
<script type="text/javascript"> $(document).ready(function() { 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() {  

} </script>

 

　 省市区多选数据回显

　　思路：假如我选择了河北省石家庄市长安区，福建省厦门市，浙江省，这三个地址,那么我只须要获取长安区，厦门市，以及浙江省，这三个地址的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]); } } 
 } return tree; } } }

　　看下效果

 

 

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

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); } } }