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、シーケンス番号、ノード名を取得する(ステップ5の最適化)

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