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,其中有重要的参数信息

时间: 2024-10-10 08:45:46

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

VBA读取文件夹下所有文件夹及文件内容,并以树形结构展示

Const TR_LEVEL_MARK = "+"Const TR_COL_INDEX = "A"Const TR_COL_LEVEL = "E"Const TR_COL_NAME = "C"Const TR_COL_COUNT = "D"Const TR_COL_TREE_START = "F"Const TR_ROW_HEIGHT = 23Const TR_COL_LINE_WIDT

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

我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一二级菜单,这种方式在一般功能点不算太多的情况下,呈现的界面效果较为直观.也较为美观.不过随着一些系统功能的增多,这种方式可能就会显得工具栏比较拥挤,那么我们是否可以在左侧放置一个树形列表,这样通过树形列表的收缩折叠,就可以放置非常多的菜单功能了. 1.菜单的树形列表展示 一般情况下,树形列表的显示可

atitit.js的&#160;字符串内容&#160;转义&#160;&#160;js处理html

atitit.js的 字符串内容 转义  js处理html 1. js处理html的问题 1 2. js的 字符串内容 转义 1 2.1. 处理流程 1 3. 下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中: 2 4. --code 2 1. js处理html的问题 反斜杠问题 引号问题.回车换行造成的语句中断问题.. 2. js的 字符串内容 转义 一个回车 还有一个换行转义 一个引号转义.. 反斜杠转义 2.1. 处理流程 先替换反斜杠.在引号,在回车,在换

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

Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web server的bug应该.Resin4.0.221 大段内容务必要替换转义换行符号 C:\0workspace\AtiPlatf_cms\WebRoot\poster\gejy_pub.js cmd= cmd.replace(new RegExp("\r\n",'gm'),"\\r\\n

Node.js读写中文内容文件操作

由于Node.js仅支持如下编码:utf8, ucs2, ascii, binary, base64, hex,并不支持中文GBK或GB2312之类的编码, 因此如果要读写中文内容,必须要用额外的模块:iconv-lite 注:Node的iconv模块,仅支持linux,不支持Windows,因此要用纯js的iconv-lite,另:作者说iconv-lite的性能更好,具体参考git站点:iconv-lite 注2:我在测试读写文件时,始终无法把中文写入文件,一直乱码,读取正常,后来同事帮我发

JS按钮控制内容左右滚动

运行效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS按钮控制内容左右滚动</title> <style> *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix

JS清除选择内容的方法

本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中发现: 在谷歌.火狐.Opera浏览器中,window对象有getSelection属性,而在IE中没有.IE中的document对象有selection属性,因此清除页面中选择的内容也就可以得到解决. 在谷歌.火狐.Opera浏览器中我们可以很容易的通过 window.getSelection()

js整频滚动展示效果(函数节流鼠标滚轮事件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-T

小程序提升界面使用体验 丰富了内容展示组件

昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验.丰富内容展示组件.完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上你的小程序.以下是相关能力的展示 01—提升界面使用体验 小程序可以灵活调整顶部标题栏的颜色,同自己的页面保持色彩统一.小程序可以获取页面布局,了解用户屏幕滑动情况,并使用页面滚动接口.例如看到一半的文章,开发者可以定位并记住浏览的位置.在用户下次打开小程序时,立即滚动到未读处,方便用户继续阅读.地图.视频和画布上,现在可以展示简单的图片及文