欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery树插件zTree使用方法详解

程序员文章站 2024-01-12 08:28:10
最近要做一个树结构，就使用了jquery 的树插件，感觉还不错，做个随笔 页面的基本结构是这样的 这里的样式是使用了metrostyle文件夹里的类bootstra...

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

页面的基本结构是这样的

jQuery树插件zTree使用方法详解

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

jquery  ztree树的下载链接

页面jsp如下：

<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 <title> ztree demo - checkbox</title> 
 <link rel="stylesheet" href="/css/demo.css" rel="external nofollow" > 
 <link rel="stylesheet" href="/css/metrostyle.css" rel="external nofollow" > 
 <script type="text/javascript" src="/js/jquery-3.2.1.js"></script> 
 <script type="text/javascript" src="/js/jquery.ztree.core.js"></script> 
 <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script> 
  
 <script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
 
 <script type="text/javascript"> 
  var setting = { 
   check: { 
    enable: true 
   }, 
   data: { 
    simpledata: { 
     enable: true 
    } 
   }, 
   callback:{ 
    oncheck:oncheck 
   } 
  }; 
 
//  var znodes =[ 
//   { id:1, pid:0, name:"随意勾选 1", open:true}, 
//   { id:11, pid:1, name:"随意勾选 1-1", open:false}, 
//   { id:111, pid:11, name:"随意勾选 1-1-1"}, 
//   { id:112, pid:11, name:"随意勾选 1-1-2"}, 
//   { id:12, pid:1, name:"随意勾选 1-2", open:false}, 
//   { id:121, pid:12, name:"随意勾选 1-2-1"}, 
//   { id:122, pid:12, name:"随意勾选 1-2-2"}, 
//   { id:2, pid:0, name:"随意勾选 2", checked:false, open:false}, 
//   { id:21, pid:2, name:"随意勾选 2-1"}, 
//   { id:22, pid:2, name:"随意勾选 2-2", open:false}, 
//   { id:221, pid:22, name:"随意勾选 2-2-1", checked:false}, 
//   { id:222, pid:22, name:"随意勾选 2-2-2"}, 
//   { id:23, pid:2, name:"随意勾选 2-3"}, 
    
    
//   { id:3, pid:0, name:"随意勾选 3", checked:false, open:false}, 
//   { id:231, pid:3, name:"随意勾选 3-1"}, 
//   { id:232, pid:3, name:"随意勾选 3-2", open:false}, 
//   { id:2321, pid:232, name:"随意勾选 3-2-1", checked:false}, 
//   { id:2322, pid:232, name:"随意勾选 3-2-2"}, 
//   { id:233, pid:3, name:"随意勾选 3-3"} 
    
//  ]; 
   
  var code; 
   
  function setcheck() { 
   var ztree = $.fn.ztree.getztreeobj("treedemo"), 
   py = $("#py").attr("checked")? "p":"", 
   sy = $("#sy").attr("checked")? "s":"", 
   pn = $("#pn").attr("checked")? "p":"", 
   sn = $("#sn").attr("checked")? "s":"", 
   type = { "y":py + sy, "n":pn + sn}; 
   ztree.setting.check.chkboxtype = type; 
//   showcode('setting.check.chkboxtype = { "y" : "' + type.y + '", "n" : "' + type.n + '" };'); 
//   showcode('setting.check.chkboxtype = { "y" : "", "n" : "" };'); 
   showcode('setting.check.chkboxtype = { "y" : "s", "n" : "ps" };'); 
    
//   setting.check.chkboxtype = { "y" : "", "n" : "" }; 
  } 
  function showcode(str) { 
   if (!code) code = $("#code"); 
   code.empty(); 
   code.append("<li>"+str+"</li>"); 
  } 
   
  var znodes =[]; 
  $(document).ready(function(){ 
   var t = $("#treedemo"); 
   $.ajax({ 
    type: "post", 
    url: "/units/listtree", 
    datatype: 'json', 
    success: function(result) { 
     console.log(result); 
     $.extend( true, znodes, result ); 
     console.log(znodes); 
      t = $.fn.ztree.init(t, setting, znodes); 
//     demoiframe = $("#testiframe"); 
    } 
   }); 
  }); 
   
  $(document).ready(function(){ 
   $.fn.ztree.init($("#treedemo"), setting, znodes); 
   setcheck(); 
   $("#py").bind("change", setcheck); 
   $("#sy").bind("change", setcheck); 
   $("#pn").bind("change", setcheck); 
   $("#sn").bind("change", setcheck); 
    
  }); 
   
  function oncheck(e,treeid,treenode){ 
   var treeobj=$.fn.ztree.getztreeobj("treedemo"), 
   nodes=treeobj.getcheckednodes(true), 
   v=""; 
   for(var i=0;i<nodes.length;i++){ 
   v+=nodes[i].name + ","; 
   alert(nodes[i].id); //获取选中节点的值 
   } 
  } 
   
     
 </script> 
</head> 
 
<body> 
 <div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;"> 
  <ul id="treedemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul> 
 </div> 
   <input type="checkbox" id="py" class="checkbox first" checked style="display:none;" /> 
   <input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/> 
   <input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/> 
   <input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/> 
       
</body> 
</html>

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

@controller 
@requestmapping("/units") 
public class unitscontroller{ 
 
 
 @autowired 
 private unitsservice unitsservice; 
  
  
  
 @requestmapping("/listtree") 
 @responsebody 
 public list<jsonobject> listtree(){ 
   
  list<jsonobject> jsonlist = new arraylist<jsonobject>(); 
  list<units> 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<nodes.length;i++){ 
   v+=nodes[i].name + ","; 
   alert(nodes[i].id); //获取选中节点的值 
   } 
  }

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

上一篇： 路由故障：软硬件造成的集线器故障

下一篇： 详解SQL Server数据库链接查询的方式

推荐阅读