點選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;
	}
 

@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) {
      }
 }) 	    
     
 

   // 載入樹，賦值
   $(#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();
                }
           }
      });