1.首先这里有一个demo,里边有封装好的js文件。地址:http://files.cnblogs.com/files/feifeishi/dtree.zip

2.直接上代码

<div style="height:auto;margin-left: 20px;">  

                  <s:iterator value="targetlist">
<input type="text" style="display:none" value="<s:property value="id.targetnumber.trim()"/>" class="targetnumber">
</s:iterator>
<s:iterator value="requirementlist">
<input type="text" style="display:none" value="<s:property value="id.requirementnumber.trim()"/>" class="requirementnumber">
</s:iterator>
<s:iterator value="pointlist">
<input type="text" style="display:none" value="<s:property value="id.pointnumber.trim()"/>" class="pointnumber">
</s:iterator> <script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'培养要求树');
d.add(10,0,'培养要求');
$('.targetnumber').each(function(){
d.add(this.value,10,'培养目标'+this.value,'Target4.action?targetnumber='+this.value+'', '', 'main');
});
$('.requirementnumber').each(function(){
d.add(this.value,this.value.substring(0,1),'毕业要求'+this.value,'Point.action?requirementnumber='+this.value+'', '', 'main');
});
$('.pointnumber').each(function(){
d.add(this.value,this.value.substring(0,2),'指标点'+this.value,'PointPoint.action?requirementnumber='+this.value+'', '', 'main');
});
document.write(d); </script>

  前半部分的s标签是获得action中传过来的list的值,从而使js可以使用这些值。js中是写树的节点,打印树。

3.效果截图:

4.文件中有一个api,其中有重要的参数信息

js实现树形内容展示的更多相关文章

  1. Winform开发主界面菜单的动态树形列表展示

    我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一 ...

  2. 将数据库中的内容展示出来并将某些value值转换成汉字

    1.将数据库中的内容展示出来 前台代码未做改变,刚开始未显示的原因是因为 data-field 跟数据库不一样data-field 需要跟数据库中的一样才可以 2.将某些value值转换成汉字 在li ...

  3. 微信小程序小技巧系列《二》show内容展示,上传文件编码问题

    作者:gou-tian 来自:github show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此 ...

  4. Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

    Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...

  5. js对文章内容进行分页示例代码

    这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...

  6. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  7. 安卓ListView行详细内容展示页编写和下拉刷新实现

    ListView行详细内容展示页: 使用轻量级的Fragment实现Listview行内容简单的详细信息展示: 值得注意的是: 1. 主布局(打开它的Activity)必须是FrameLayout布局 ...

  8. Node.js读取文件内容

    原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...

  9. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

随机推荐

  1. Hibernate Tools生成注释

    原文:http://www.blogjava.net/pauliz/archive/2009/11/13/302162.html 有同学需要修改后的Hibernate Tools整个tool我就不上传 ...

  2. bootstrap table使用及遇到的问题

    本人前端菜鸟一枚,最近使用bootstrap table实现表格,记录一下以便日后翻阅,废话不多说,先看效果图: 1.首先说下要实现该效果需要添加的css样式及所需的js文件,具体下载地址就不粘贴了( ...

  3. work flow 工作流程

    常用git 命令 v-1 # 切换分支 git checkout site-v1.7.8 # 提交代码前,先拉取分支 git pull # 拉取失败说明有冲突,解决冲突... # 保存在stash之中 ...

  4. Vue表单修饰符(lazy,number,trim)

    lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...

  5. 控件布局_LinearLayout

    gravity和layout_gravity的区别 android:gravity与android:layout_gravity.他们的区别在于:android:gravity用于设置View组件的对 ...

  6. Intent加强

    Intent是一种运行时绑定(runtime binding)机制,它能在程序运行的过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种请求或者意愿,Android会根据意 ...

  7. ActivityThread main

    public static void main(String[] args) { Trace.traceBegin(Trace.TRACE_TAG_ACTIVITY_MANAGER, "Ac ...

  8. 【Lucene4.8教程之中的一个】使用Lucene4.8进行索引及搜索的基本操作

    版权声明:本文为博主原创文章.转载请注明来自http://blog.csdn.net/jediael_lu/ https://blog.csdn.net/jediael_lu/article/deta ...

  9. IDEA多线程调试设置

    转至:http://blog.csdn.net/kevindai007/article/details/71412324 使用idea调试多线程的时候发现多线程无法调试,后来经过搜索发现,idea的断 ...

  10. 转载 线程池之ThreadPool类与辅助线程 - <第二篇>

    http://www.cnblogs.com/kissdodog/archive/2013/03/28/2986026.html 一.CLR线程池 管理线程开销最好的方式: 尽量少的创建线程并且能将线 ...