📄 tree.ftl
字号:
<#--
isCheckBox:是否是复选框。
checkBoxName:复选框的名称。
valueContent:值集合,指示复选框是否选中。
isLimited:是否限制显示内容,如果为true,则content必须存在。只有包含才content内的数据才会被显示。
content:显示内容的列表。
isUrl:是否有链接。
-->
<#macro tree root treeId="t" target="right" showDeep=0 isCheckBox=false checkBoxName="ids" valueContent=[] isLimited=false content=[] isUrl=true suffix="">
<div id=${treeId} class="p-tree">
<@drawNode node=root treeId=treeId pid=treeId target=target showDeep=showDeep isCheckBox=isCheckBox checkBoxName=checkBoxName valueContent=valueContent isLimited=isLimited content=content isUrl=isUrl suffix=suffix/>
</div>
</#macro>
<#--
DIV的ID命名规则及结构:
<pid-index>(整体)
<pid-index-s>(self,自身)
<空白列><线条列><节点列><名称列>
</pid-index-s>
<pid-index->(子集)
...
</pid-index->
</pid-index>
node:节点
deep:深度
isEndList:祖先节点是否为末节点
pid:父级ID
index:当前层的序号
-->
<#macro drawNode node pid treeId target showDeep isCheckBox checkBoxName valueContent=valueContent deep=0 isEndList=[true] index=0 isLimited=isLimited content=content isUrl=isUrl suffix=suffix>
<#local id=pid+'-'+index />
<#if showDeep gt deep>
<#local isDisplay=true />
<#else>
<#local isDisplay=false />
</#if>
<div id="${id}">
<div id="${id}-s" onmouseover="lineOver(this)" onmouseout="lineOut(this)" onclick="lineSelected(this,'${treeId}');" isDisplay="${isDisplay?string}">
<#--空格列-->
<#if deep gt 0>
<img src="${base+'/ftl_res/jeecms/img/s.gif'}" width="15px" /><#t/>
</#if>
<#--直线列-->
<#if deep gt 1>
<#list 2..deep as i>
<#if isEndList[i-1]>
<img src="${base+'/ftl_res/jeecms/img/s.gif'}" width="15px" /><#t/>
<#else>
<img src="${base+'/ftl_res/jeecms/img/tree/elbow-line.gif'}" /><#t/>
</#if>
</#list>
</#if>
<#--节点列-->
<#if node.isLeaf??>
<#assign isLeaf=node.isLeaf/>
<#elseif (node.child)??>
<#assign isLeaf=!(node.child?size>0)/>
<#else>
<#assign isLeaf=true/>
</#if>
<#if isDisplay>
<#local openDisplay="" />
<#local closeDisplay="display:none;" />
<#else>
<#local openDisplay="display:none;" />
<#local closeDisplay="" />
</#if>
<#if isLeaf && isEndList[deep]>
<img src="${base+'/ftl_res/jeecms/img/tree/elbow-end.gif'}" /><img src="${base+'/ftl_res/jeecms/img/tree/leaf.gif'}" /><#t/>
<#elseif isLeaf && !isEndList[deep]>
<img src="${base+'/ftl_res/jeecms/img/tree/elbow.gif'}" /><img src="${base+'/ftl_res/jeecms/img/tree/leaf.gif'}" /><#t/>
<#elseif !isLeaf && isEndList[deep]>
<img id="${id}-co" src="${base+'/ftl_res/jeecms/img/tree/elbow-end-minus.gif'}" onclick="switchDisplay('${id}')" style="cursor:hand;${openDisplay}"/><#t/>
<img id="${id}-cc" src="${base+'/ftl_res/jeecms/img/tree/elbow-end-plus.gif'}" onclick="switchDisplay('${id}')" style="cursor:hand;${closeDisplay}"/><#t/>
<img id="${id}-fo" src="${base+'/ftl_res/jeecms/img/tree/folder-open.gif'}" style="${openDisplay}"/><#t/>
<img id="${id}-fc" src="${base+'/ftl_res/jeecms/img/tree/folder.gif'}" style="${closeDisplay}"/><#t/>
<#elseif !isLeaf && !isEndList[deep]>
<img id="${id}-co" src="${base+'/ftl_res/jeecms/img/tree/elbow-minus.gif'}" onclick="switchDisplay('${id}')" style="cursor:hand;${openDisplay}"/><#t/>
<img id="${id}-cc" src="${base+'/ftl_res/jeecms/img/tree/elbow-plus.gif'}" onclick="switchDisplay('${id}')" style="cursor:hand;${closeDisplay}"/><#t/>
<img id="${id}-fo" src="${base+'/ftl_res/jeecms/img/tree/folder-open.gif'}" style="${openDisplay}"/><#t/>
<img id="${id}-fc" src="${base+'/ftl_res/jeecms/img/tree/folder.gif'}" style="${closeDisplay}"/><#t/>
</#if>
<#if isCheckBox>
<input type="checkbox" name="${checkBoxName}" <#rt/>
<#if valueContent?seq_contains(node.id)>checked="true"</#if><#lt/>value="${node.id}" id="${id}-chk" class="p-tree-checkbox" size="0" hidefocus="true" onclick="switchSelect(this,'${id}','${treeId}');" /><#t/>
</#if>
<#--名称列-->
<#if !isLeaf>
<#if !isCheckBox>
<#t/>
</#if>
<span onclick="switchDisplay('${id}')" style="cursor:hand;">${node.name}</span>
</div>
<#--子节点开始-->
<div id="${id+'-'}" style="${openDisplay}">
<#list node.child as cnode>
<#if !isLimited || content?seq_contains(cnode)>
<@drawNode node=cnode target=target showDeep=showDeep deep=deep+1 isEndList=isEndList+[!cnode_has_next] pid=id treeId=treeId index=cnode_index isCheckBox=isCheckBox checkBoxName=checkBoxName valueContent=valueContent isLimited=isLimited content=content isUrl=isUrl suffix=suffix/>
</#if>
</#list>
</div>
<#else>
<#if isCheckBox || !isUrl>
<span>${node.name}</span>
<#else>
<a href="${base+node.url!}${suffix}" target="${target}">${node.name}</a>
</#if>
</div>
</#if>
</div>
</#macro>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -