js Tree 简单使用例子

来源：互联网发布：dota后期三大核知乎编辑：程序博客网时间：2024/06/05 06:45

点击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());    //设置idjsTreeVM.setParent(barea.getPCode());   //设置父节点idjsTreeVM.setText(barea.getAreaName());  //设置显示内容treeVoList.add(jsTreeVM);               }return treeVoList;}

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

@Data@EqualsAndHashCodepublic 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的一些心得，不足之处还请多多见谅

阅读全文

0 0