319  
   0
创建一个可以收缩的树形列表
作者:系统管理员于 2017年06月02日 发布在分类 / EKCP知识管理 / 二次开发 下,并于 2017年08月30日 编辑

jsp页面部分

<div>
<ul class="docOrgUl">
	<c:forEach items="${result.resultList}" var="node1">
	<c:if test="${node1.PARENTID=='NONE'}">
	<li>
		<h1>
		<span class="orgLableType" title="${node1.ID}">${node1.NAME}</span>
		</h1>
		<hr class="hr1" />
		<ul>
		<c:forEach items="${result.resultList}" var="node2">
		<c:if test="${node2.PARENTID==node1.ID}">
			<li>
			<h2>
				<span class="orgLableType" title="${node2.ID}">${node2.NAME}</span>
				<span class="glyphicon glyphicon-chevron-down farm_tree_flag"></span>
			</h2>
			<hr class="hr2" />
			<ul>
			<c:forEach items="${result.resultList}" var="node3">
			<c:if test="${node3.PARENTID==node2.ID}">
				<li>
				<h3>
				<span class="orgLableType" title="${node3.ID}">${node3.NAME}</span>
				<span
					class="glyphicon glyphicon-chevron-down farm_tree_flag"></span>
				</h3>
				<hr class="hr2" />
				<ul>
				<c:forEach items="${result.resultList}" var="node4">
				<c:if test="${node4.PARENTID==node3.ID}">
					<li>
					<h4 class="orgLableType" title="${node4.ID}">${node4.NAME}</h4>
					<hr class="hr2" />
					<ul>
					<c:forEach items="${result.resultList}" var="node5">
					<c:if test="${node5.PARENTID==node4.ID}">
						<li>
						<h5 class="orgLableType" title="${node5.ID}">${node5.NAME}</h5>
						</li>
					</c:if>
					</c:forEach>
					</ul>
					</li>
				</c:if>
				</c:forEach>
				</ul>
				</li>
			</c:if>
			</c:forEach>
			</ul>
			</li>
		</c:if>
		</c:forEach>
		</ul>
	</li>
	</c:if>
	</c:forEach>
</ul>
</div>

js部分

实现树形节点的选取

$(function() {
		$('.orgLableType').click(function() {
			try {
				chooseOrgHandle($(this).attr("title"), $(this).text());
			} catch (e) {
				alert("请实现或检查chooseOrgHandle函数!");
			}
		});
		initTypesStyle();
	});

实现树形节点的收缩

function initTypesStyle() {
		$('.farm_tree_flag').each(function(i, o) {
			if ($(this).parent().nextAll('ul').contents().length &lt;= 1) {
				$(this).removeClass("farm_tree_flag");
				$(this).removeClass("glyphicon");
				$(this).removeClass("glyphicon-chevron-down");
			} else {
				$(this).parent().nextAll('ul').hide();
			}
		});
		$('.farm_tree_flag').bind('click', function() {
			var ul = $(this).parent().nextAll('ul');
			if ($(ul).is(':hidden')) {
				$(this).parent().nextAll('ul').show();
				$(this).removeClass("farm_tree_s");
				$(this).addClass("farm_tree_h");
				$(this).removeClass("glyphicon-chevron-down");
				$(this).addClass("glyphicon-chevron-up");
			} else {
				$(this).parent().nextAll('ul').hide();
				$(this).removeClass("farm_tree_h");
				$(this).addClass("farm_tree_s");
				$(this).removeClass("glyphicon-chevron-up");
				$(this).addClass("glyphicon-chevron-down");
			}
		});
	}


css样式

.docOrgUl .orgLableType {
	cursor: pointer;
}

.farm_tree_flag {
	color: #c3c3c3;
	text-decoration: none;
}

.docOrgUl .hr1 {
	margin: 4px;
}

.docOrgUl .hr2 {
	border-style: dotted;
	margin: 4px;
}

.docOrgUl h1 {
	font-size: 16px;
	margin: 2px;
	margin-left: 30px;
	font-weight: bold;
	margin-left: 30px;
}

.docOrgUl h2 {
	font-size: 14px;
	margin: 2px;
	margin-left: 30px;
	font-weight: bold;
}

.docOrgUl h3 {
	font-size: 12px;
	margin: 2px;
	margin-left: 30px;
	font-weight: bold;
}

.docOrgUl h4 {
	font-size: 10px;
	margin: 2px;
	margin-left: 30px;
	font-weight: bold;
}



 知识评论当前评论数0

 推荐知识


 访问权限

创建人 系统管理员
文档编辑权限 创建者私有
文档阅读权限 来自分类
分类阅读权限 无限制
分类编辑权限 无限制
分类审核权限
分类预览权限 无限制
分类下载权限 系统管理员(人员)  
 历史版本

修改日期 修改人 备注
2017-08-30 12:14:04[当前版本] 系统管理员 更新
2017-08-30 12:10:28 系统管理员 1
2017-08-30 12:09:47 系统管理员 1
2017-06-02 15:10:22 系统管理员 添加css样式

 目录
    ©2014-2017 北京知轩科技有限公司 京ICP备15024440号-1 wcp知识库系统-V3.5.9

    服务时间:9:00-18:00销售联系方式QQ1:2715215634QQ2:3323024029微信:EKCP-ZXKJ