jstree使用和右键功能菜单及回显

$(document).ready(function() {
	$("#jstree_demo_div").jstree({
		'core' : {
			"data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"示例档案树"},{"id":"69","parent":"0","text":"预备档案树"},{"id":"5","parent":"0","text":"档案门类树"},{"id":"71","parent":"69","text":"文书档案"},{"id":"1","parent":"5","text":"文书档案"},{"id":"11","parent":"5","text":"音像档案"}],
			//ajax获取树节点
			/** 'data' : {
							'url' : '<%=request.getContextPath() %>/JJDaAction?method=querydmtree', //请求地址
							'dataType' : 'json',
							'data' : function(node) {
								return {
									id : node.id == "#" ? "-1" : node.id
								};
							},
							success : function(test) {
								//console.log(test);
							},
						} **/
		},
		 /*plugins:表示你使用那些插件*/
        "plugins" : [  "contextmenu"],
        /*contextmenu:就是右键菜单插件,items就是自定义右键菜单选项,label是右键菜单选项的名称。icon就是选项前面的图标,action点击选项触发事件*/
        "contextmenu" : {

            "items" : {
                "create" : {
                    "label" : "新增节点",
                    "action" : function(obj) {
                        alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
                    },
                },
                "rename" : {
                    "label" : "重命名",
                    "action" : function(obj) {
                    	alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
                    }
                },
                "delete" : {
                    "label" : "删除节点",
                    "action" : function(obj) {
                    	alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
                },

                }
            }
        }   
	})
});

ajax需要给数据增加自定义属性时,把自定义属性放到a_attr中:

[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"工程项目树"}, {"id":"1","parent":"0","text":"工程1","a_attr":{"type":"g","code":"1"}}, {"id":"2","parent":"0","text":"工程2","a_attr":{"type":"g","code":"2"}}, {"id":"3","parent":"1","text":"项目1","a_attr":{"type":"x","code":"1"}}, {"id":"4","parent":"2","text":"项目2","a_attr":{"type":"x","code":"2"}}, {"id":"19","parent":"1","text":"项目2","a_attr":{"type":"x","code":"1.2"}}]

jstree获取自定义属性时:

jQuery.jstree.reference(obj.reference).get_node(obj.reference).a_attr.type//获取type

js获取节点属性时:

var treeNode = $('#jstree_demo_div').jstree(true).get_selected(true);
	//console.log(treeNode[0].a_attr.code);
	returnValue=treeNode[0].a_attr.code;//获取节点code

js重加载节点需先清除节点:

 $('#tree').jstree(true).destroy();// 清除树节点

给节点绑定事件:

 $('#tree').bind("activate_node.jstree", function (obj, e) {
            // 获取当前节点
            var currentNode = e.node;
            })

取消选中节点:

$("#tree").jstree("deselect_all",true);

选中指定节点:

$('#tree').jstree('select_node',nodeid,true);//选中节点

打开节点:

 $("#tree").on("ready.jstree", function (e, data) {
            data.instance.open_all();//打开所有节点
            data.instance.open_node(nodeid);//打开指定节点

        });

回显选中节点

.on('loaded.jstree', function(e, data){
		if(''!=x&&null!=x){
			if('dept'==x.split(",")[0]){
				var inst = data.instance;
			var xx=x.replace(x.split(",")[0]+",","").split(",");
			for(var i=0;i<xx.length;i++){
				 var obj = inst.get_node(xx[i].split("$")[0]);
             		inst.select_node(obj);
				}
			}
			}
			
      });

你可能感兴趣的:(jstree使用和右键功能菜单及回显)