js Tree 简单使用例子

点击input输入框弹出树

jsTree下载地址点击打开链接

首先在html页面设置一个div用来放置jsTree，设置好宽度和高度并把树设为不占位隐藏，如果显示位置靠下，可以设置z-index样式；如果树的内容长度太长，可以加上overflow样式使其出现滚动条

<div id="areaTree" style="display:none"></div>

后台代码

	/**
	 * 获取区域树   
	 * @Title: getAreaTree
	 * @return 
	 */
	public List<JsTreeVM> getAreaTree() {
		List<JsTreeVM> treeVoList = new ArrayList<>();  //用来保存树的数据
		List<BArea> orgList = selectList();             //查询数据库里的数据，数据要有父子关系
		for (BArea barea : orgList) {                   //查询出的数据遍历后放入treeVolist           
			JsTreeVM jsTreeVM = new JsTreeVM();
			jsTreeVM.setId(barea.getAreaCode());    //设置id
			jsTreeVM.setParent(barea.getPCode());   //设置父节点id
			jsTreeVM.setText(barea.getAreaName());  //设置显示内容
			treeVoList.add(jsTreeVM);               
		}
		return treeVoList;
	}

jsTreeVM类（有些属性会用不到，一般只用id、parent、text就够了）

@Data
@EqualsAndHashCode
public class JsTreeVM implements Serializable {

	private static final long serialVersionUID = 1L;

	private String id;

	private String text;

	private String icon;

	private TreeStateVM state;

	private String parent;

	private String code;

	private String type;

	private int level;
}

前台代码
首先要初始化树，就是把向后台请求的数据放入一个全局数组

  var tree = {};

 $.ajax({
      url : $.baseConfig.get("baseUrl") +"/bArea/getAreaTree",
      type : "get",
      dataType : "json",
      async : false,
      contentType : "application/json;utf-8",
      success : function(data) {
	   treeData = data; //把数据放入全局数组
      },
      error : function(data) {
      }
 }) 	    
     

然后是加载树，该例子是单选树，若是 多选树只需把plugins属性改为plugins : [ 'wholerow', 'contextmenu', 'types','checkbox' ]即可

   // 加载树，赋值
   $(#areaTree).jstree({
       core: {
              check_callback: true,
              data: treeData    //全局数组
              },
       plugins: ['wholerow', 'contextmenu', 'types'],
       types: {
                'default': {      
                     'icon': false  //设置图标
                 }
                 'file' : {
             'icon' : 'fa fa-file-text-o'//可放置css样式
           } 
               }
    })

节点选择事件

   $(#areaTree).on('select_node.jstree', function (e, data) {// 节点选择事件
             selectNodeId = data.node.text;       //选择节点
             if(selectNodeId != "北京市" && selectNodeId != "上海市"){ //如果节点不是北京市、上海市
            	   $('#ssqy').val(selectNodeId);//赋值给araename选择框
                   $("#areaTree").hide();  //隐藏树        	 
               }else{
            	   $('#ssqy').val(selectNodeId);//赋值给araename选择框
                   $("#areaTree").hide();    //隐藏树
               }        
      });   

点击输入框点击弹出树

    $("#ssqy").click(function(){
	     var ref = $('#areaTree').jstree(true);
	     ref.deselect_all(true);
	     ref.close_all(true);
	     if($("#areaTree").css("display") != "none"){
		  $("#areaTree").hide();
	     }else{
		   var X = $('#ssqy').offset().top;       //调整树位置
		   var Y = $('#ssqy').offset().left; 
		   $("#areaTree").css("top",Y-1);
		   $("#areaTree").css("left",X+34);
		   $("#areaTree").css("width",$("#ssqy").width()+12);
		   $("#areaTree").show();
	     }				
      });

有时可能需要用到点击空白区域隐藏树

     //点击空白处隐藏组织树
     $(document).mouseup(function(e){
           var tree = $('#areaTree');   // 设置目标区域
           var input =$("#areaTree");
           if(!tree.is(e.target)&& tree.has(e.target).length === 0 && !input.is(e.target)){ //Mark 1
                if($("#areaTree").css("display") !="none"){
                $("#areaTree").hide();
                }
           }
      });

这是我使用jsTree的一些心得，不足之处还请多多见谅