js实现树形内容展示
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实现树形内容展示的更多相关文章
- Winform开发主界面菜单的动态树形列表展示
我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一 ...
- 将数据库中的内容展示出来并将某些value值转换成汉字
1.将数据库中的内容展示出来 前台代码未做改变,刚开始未显示的原因是因为 data-field 跟数据库不一样data-field 需要跟数据库中的一样才可以 2.将某些value值转换成汉字 在li ...
- 微信小程序小技巧系列《二》show内容展示,上传文件编码问题
作者:gou-tian 来自:github show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此 ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- js对文章内容进行分页示例代码
这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- 安卓ListView行详细内容展示页编写和下拉刷新实现
ListView行详细内容展示页: 使用轻量级的Fragment实现Listview行内容简单的详细信息展示: 值得注意的是: 1. 主布局(打开它的Activity)必须是FrameLayout布局 ...
- Node.js读取文件内容
原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
随机推荐
- 百度地图API开发
1.首先申请百度地图秘钥 http://lbsyun.baidu.com/ 2.需要填一个申请的界面 3.申请后会有类似的东西 4.之后参照以下网址进行MFC编译 mfc webbrowser控件使用 ...
- Alpha冲刺! Day8 - 砍柴
Alpha冲刺! Day8 - 砍柴 今日已完成 晨瑶:写了部分gitkraken团队协作教程:讨论关于继承baseActivity因为需要参数无法通过override去实现函数,并且initData ...
- 17秋 软件工程 团队第五次作业 Alpha Scrum5
17秋 软件工程 团队第五次作业 Alpha Scrum5 今日完成的任务 世强:消息通知管理列表页界面编写,下拉加载效果: 港晨:编写登录界面: 树民: 伟航:学习了flask_restful框架的 ...
- 拓普微小尺寸TFT液晶屏-高性价比
智能模块(Smart LCD)是专为工业显示应用而设计的TFT液晶显示模块. 模块自带主控IC.Flash存储器.实时嵌入式操作系统,客户主机可把要存储的数据(如背景图.图标等)存储到屏的flash中 ...
- 控件布局_FrameLayout(网格布局)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu ...
- 【BZOJ3622】已经没有什么好害怕的了
Description 已经使 Modoka 有签订契约, 和自己一起战斗的想法后 , Mami 忽然感到自己不再是孤单一人了呢. 于是, 之前的谨慎的战斗作风也消失了 , 在对 Charlotte ...
- windows下elasticsearch6.X安装IK分词器
文章来源:https://www.cnblogs.com/hts-technology/category/1167823.html (一)到官网下载https://github.com/medcl/e ...
- Java面试题复习之Java基础
1.面向对象的特征主要有哪些? 封装.继承.多态.抽象 2.final.finally.finalize的区别? final主要用于修饰类.方法.属性(变量)等. 通常被final修饰的类不能够被 ...
- PAT A1099 Build A Binary Search Tree (30 分)——二叉搜索树,中序遍历,层序遍历
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...
- centos7搭建kibana
上一节elasticsearch搭建地址 https://www.cnblogs.com/mutong1228/p/10181544.html 学习了上一篇的搭建,理解了命令的含义之后,本节就非常方便 ...