jsTree树形结构展示的简单使用总结

一、生成树形数据

官网下载js资源的时候，已经在里面包含demo,最基本的复制粘贴就好了。

说几个遇到的问题

1、后台数据动态生成树

如果是Json结构的字符串，需要转一下再传给data

var jsonData=JSON.parse('${ujson}');
$('#data').jstree({
		'core' : {
		"check_callback" : true,
		'data' : jsonData
	},
	'plugins' : [ "contextmenu", "state","types","dnd" ],
	"types":{
		"default":{
			"icon":false
		}
	}
});

二、树形结构默认展开

$('#data').jstree({
	'core' : {
		"check_callback" : true,
		'data' : jsonData
	},
	'plugins' : [ "contextmenu", "state","types","dnd" ],
	"types":{
   		"default":{
   			"icon":false
   		}
    }
}).on('loaded.jstree',function(e,data){
	$('#data').jstree().open_all();
});

三、节点数据的修改
可以启用'plugins':["contextmenu"]，即自带的右键菜单，或者自己写输入框组件，注意core加上"check_callback" : true,不然节点数据不会改变。

四、节点复选框，默认有缓存会记录上次勾选结果，loaded事件加上data.instance.clear_state();

$('#data').jstree({	
}).on('loaded.jstree',function(e,data){
	data.instance.clear_state();
});

五、获取树所有节点的数据

var arr =new Array;
function traverseNode(node){		
    arr.push(node);
}
function traverseTree(node){
	if (!node) {
        return;
    }
    traverseNode(node);
    if(node.children && node.children.length > 0){
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
            this.traverseTree(node.children[i]);
        }
    }
}

$("#btn-d").click(function(){
    arr =new Array;
    var node = $("#data").jstree(true).get_json();
    traverseTree(node[0]);
    console.log(arr);
});

六、获取树所有节点的id，父节点id，序号，节点名称（步骤五的优化）

var arr =new Array;
var changeBefore=new Array;
var changeAfter=new Array;
function traverseNode(node){
    arr.push(node);
}
function traverseTree(node){
    if (!node) {
        return;
    }
    traverseNode(node);
    if(node.children && node.children.length > 0){
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
            this.traverseTree(node.children[i]);
        }
    }
}

function getAllSeqNo(){
    arr =new Array;
    var node = $("#data").jstree(true).get_json();
    traverseTree(node[0]);
    var carry=new Array;
    var ref = $('#data').jstree(true);

    for (var i = 0; i < arr.length; i++) {
        if(arr[i].children!=""){
            for (var k = 0; k < arr[i].children.length; k++) {
                var obj={
                    id:arr[i].children[k].id,
                    parent:ref.get_parent(arr[i].children[k].id), 
                    seqNo:k,
                    text:arr[i].children[k].text,
                };
                carry.push(obj);
            }
        }
    }
    console.log("carry");
    console.log(carry);
    return carry;
}
$("#btn-b").click(function(){
    changeBefore=getAllSeqNo();
});

七、获取树中改变位置的节点信息（在步骤六的基础上）

function demo_order() {
    changeAfter=getAllSeqNo();
    for(var i=0;i

八、选择复选框中已选节点

function getNodeId(treeName,isAll){
    var ref = $('#'+treeName).jstree(true);
    if(isAll==true){
	ref.select_all();
    }
    ref.get_all_checked = function(full) {
	var tmp=new Array;
	for(var i in this._model.data){
	    if(this.is_undetermined(i)||this.is_checked(i)){
		tmp.push(full?this._model.data[i]:i);
	    }
	}
	return tmp;
    };
    var checkedNodes = ref.get_selected(true);
    console.log(checkedNodes);
}