1.專案環境

想要將顯示區域作為查詢的條件，而區域是樹形結構並且可以多選，並且資料量很大，是從中國到鄉鎮的地區資料，如果我們一次將所有的區域資料查出直接塞到樹形結構，那麼頁面將會卡死，因此我們需要每次載入部分資料，如果展開下級，那麼顯示下一級所有的區域，這樣可以解決資料量大而導致頁面無法快取的問題。

2.匯入樣式表

<link type="text/css" rel="stylesheet" href="../js/jsTree/themes/default/style.min.css">

3.匯入js包

<!-- jquery的js包 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
 

<!-- jsTree樹形結構外掛-->
<script type="text/javascript" src="../js/jsTree/jstree.min.js"></script>

4.html

<div id="regionTree" style="margin-left:20px;"></div>

5.區域樹

function initRegionTree(){
	$("#regionTree").jstree({
        'plugins' : ["checkbox"], //出現選擇框
        'checkbox': { cascade: "", three_state: false }, //不級聯
        'core': {
		    "data" : {  
		        "dataType" : 'json', 
		        "opts":{  
	                method: "POST"
		        },
		        "url" : function(node){  
		            return url; 
		        },  
		        "data" : function(node){
		        	if(node.id !="#"){
		        		return {"id" : node.id};
		        	}
		            return {"id" : 0};//寫自己的載入資料
		        }
		    }, 
            "themes": {
            	"theme" : "apple",
            },
            "multiple" : true,//可以多選
        }
    });
    //隱藏圖示
    $("#regionTree").jstree().hide_icons();
    //重新整理區域樹
    $("#regionTree").jstree('refresh');
}
 

6.頁面接收節點的資料結構

[

{"children":false,"id":"107712","text":"廣東省"},

{"children":false,"id":"175820","text":"海南省"},

{"children":true,"id":"18047","text":"浙江省"},

{"children":true,"id":"2","text":"福建省"},

{"children":true,"id":"237641","text":"河南省"},

{"children":false,"id":"291426","text":"黑龍江省"},

{"children":true,"id":"307715","text":"湖北省"},
 

{"children":true,"id":"403889","text":"江蘇省"},

{"children":true,"id":"493130","text":"山東省"},

{"children":true,"id":"74873","text":"北京市"},

{"children":true,"id":"81714","text":"安徽省"}

]

id為標識。

text為顯示的文字資料。

children標誌位如果為true，那麼說明存在子節點，下次點選會自動再次傳送連結載入子節點。標誌位為false，那麼說明當前節點為葉子節點，那麼當前節點不存在子節點了。

7.結果

8.獲取選中物件的ID和值

var selectedRegionArr = $('#regionTree').jstree().get_checked(true);//獲取選中的物件，返回值為陣列

for(var i=0 ; i<selectedRegionArr.length ; i++){
alert(selectedRegionArr[i].text);//列印選中的值
alert(selectedRegionArr[i].id);//列印選中的ID}

9.複選框樹通用模型

/**
 * 通用方法，生成樹模型
 * 引數：
 * elementId ：生成樹顯示的控制元件ID
 * url：動態載入子節點的url
 * initialId：初始化節點
 * */
function initJSTree(elementId,url,initialId){
	$("#"+elementId).jstree({
        'plugins' : ["checkbox"], //出現選擇框
        'checkbox': { cascade: "", three_state: false }, //不級聯
        'core': {
		    "data" : {  
		        "dataType" : 'json', 
		        "opts":{  
	                method: "POST"
		        },
		        "url" : function(node){  
		            return url; 
		        },  
		        "data" : function(node){
		        	if(node.id !="#"){
		        		return {"id" : node.id};
		        	}
		            return {"id" : initialId};
		        }
		    }, 
            "themes": {
            	"theme" : "apple",
            },
            "multiple" : true,//可以多選
        }
    });
    //隱藏圖示
    $("#"+elementId).jstree().hide_icons();
    //重新整理區域樹
    $("#"+elementId).jstree('refresh');
}

10.jsTree中文API文件