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