jsTree异步动态加载子节点

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文档

jsTree中文API文档