Jquery树插件zTree用法入门教程(2)

以下为Demo数据,每个节点中的name,phone都可以按照自己的需要进行添加或修改,比如你要添加一个年龄:age="23",但是要注意格式问题,这一点是非常方便。

复制代码 代码如下:

var zNodes =[ 
    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 
 children:[ 
  {id:2,name:"测试老师",phone:"123456789101"}, 
  {id:3,name:"大老师",phone:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 children:[ 
      
   {id:5,name:"小花",phone:"25364215211"}, 
  {id:6,name:"小绿",phone:"365241253"} 
  }, 

{id:7,name:"二班",open:true, 
 children:[ 
      
   {id:8,name:"小家",phone:"25364215211"}, 
  {id:9,name:"小沙",phone:"365241253"} 
   } 
];

以下是我用jsp从服务动态生成树的例子,不需要可以忽略,我留着以后参考的。

复制代码 代码如下:

/*var zNodes =[ 
<s:if test="#session.teacherList.size()>0"> 
    {id:1,name:"所有老师",open:false, 
 children:[ 
  <s:iterator value="#session.teacherList" status="tindex" var="t"> 
  <s:if test="#session.teacherList.size() != #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"},</s:if> 
  <s:if test="#session.teacherList.size() == #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"}</s:if> 
  </s:iterator> 
 ] 
    }, 
    </s:if> 
<s:iterator value="#session.classList" status="loop" var="c"> 
    <s:if test="#c.students.size()>0"> 
    {id:<s:property value='#c.students.size()+#session.teacherList.size()+#loop.index+3'/>,name:"<s:property value='#c.clsName' escape='false'/>",open:true, 
 children:[ 
     <s:iterator value="#c.students" status="l" var="s"> 
  <s:if test="#c.students.size() != #l.index+1"> {id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property  escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"},</s:if> 
  <s:if test="#c.students.size() == #l.index+1">{id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property  escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"}</s:if> 
     </s:iterator> 
     <s:if test="#session.classList.size() != #loop.index+1">]},</s:if> 
     <s:if test="#session.classList.size() == #loop.index+1">]}</s:if> 
    </s:if> 
</s:iterator> 
];*/

准备就绪。初始化树要显示的地方,

复制代码 代码如下:

$(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgffzx.html