大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery树插件zTree使用方法详解

最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔

专注于为中小企业提供网站设计制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业荆州免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

页面的基本结构是这样的

jQuery树插件zTree使用方法详解

这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板

jQuery  zTree树的下载链接

页面jsp如下:

 
 
  
  ZTREE DEMO - checkbox 
  
  
  
  
  
  
  
 
  
 
 
 
 

    上面的死数据替换为后台赋予的值,用的是ajax方式,当然后台需要用json方式进行交互
    java代码控制器代码如下:

    @Controller 
    @RequestMapping("/Units") 
    public class UnitsController{ 
     
     
     @Autowired 
     private UnitsService unitsService; 
      
      
      
     @RequestMapping("/ListTree") 
     @ResponseBody 
     public List ListTree(){ 
       
      List jsonList = new ArrayList(); 
      List zTreeAll = unitsService.zTreeAll(); 
       
      for (Units units : zTreeAll) { 
       JSONObject json = new JSONObject(); 
    //   { id:1, pId:0, name:"随意勾选 1", open:false} 
       if(units.getUnitsId() == units.getNodeData()){ 
         
         
        JSONObject json1 = new JSONObject(); 
         
        json1.put("id", units.getUnitsId()); 
        json1.put("pId", 0); 
        json1.put("name", units.getUnitsName()); 
        json1.put("open", false); 
         
        jsonList.add(json1); 
         
        json.put("id", -1); 
        json.put("pId", units.getNodeData()); 
        json.put("name", units.getSectorName()); 
        json.put("open", false); 
         
       }else{ 
         
        json.put("id", units.getUnitsId()); 
        json.put("pId", units.getNodeData()); 
        json.put("name", units.getSectorName()); 
        json.put("open", false); 
         
       } 
        
       jsonList.add(json); 
        
      } 
    // for (JSONObject units : jsonList) { 
       
    //  System.out.println(jsonList.toString()); 
       
    // } 
       
       
      return jsonList; 
     } 
    } 
    
    

    这样就可以实现所需要的树结构,ztree树是可以无限扩展的,就按照个人所需,来选择模板就可以了

    jsp中的这段代码是获得当前选择值得id

    function onCheck(e,treeId,treeNode){ 
       var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), 
       nodes=treeObj.getCheckedNodes(true), 
       v=""; 
       for(var i=0;i

    以上就是使用ztree的基本方法,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    标题名称:jQuery树插件zTree使用方法详解
    地址分享:http://dzwzjz.com/article/gsddgo.html
    在线咨询
    服务热线
    服务热线:028-86922220
    TOP