jQuery树插件zTree使用方法详解

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

页面的基本结构是这样的

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

jQuery  zTree树的下载链接

页面jsp如下：

上面的死数据替换为后台赋予的值，用的是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的基本方法，希望对大家的学习有所帮助，也希望大家多多支持考高分网。