您的位置:首页 > Web前端

ECOtree小文档,当你使用的时候你就知道这个有多重要了

2017-12-26 15:08 351 查看

特征

了解使用这个组件可以完成什么的最好方法是下载源代码并使用包含的示例进行播放。下面的API参考可以给你一个更确切的想法,可以做些什么。但是,作为一个简报,功能包括:

节点可以是任何大小,颜色。(通过调整代码,可以很容易地根据需要进行调整)。

节点可以有一个标题和一个隐藏的相关元数据。

选择模式有:多选,单选和不选。

节点链接可以是直线(曼哈顿)或贝塞尔曲线。

树形布局可以从上到下,从右到左或颠倒。(感谢沃克的算法,而不是我…!)

节点可以有一个相关的超链接。

子树可以按需要折叠和展开。

节点搜索可以基于标题和元数据来完成。

我想说这是一个正在进行的工作。特别是,代码的结构允许不同的渲染技术,我必须在这个主题上更加努力地工作。

背景

Walker算法扩展了Reingold,Tilford,Shannon等人以前的作品。提供一个解决方案,在满足以下审美规则的同时,树形图占用尽可能小的空间:

同一级别的节点是对齐的,并且所有级别的轴是平行的。

父母应该集中在孩子身上。

以相反的顺序定义的树和相同的树应该产生彼此反射的布局。无论树在哪里出现,都必须以相同的方式呈现相同的子树。

Walker算法的目标是提供一个完全满足第三个规则的解决方案,即在相邻较大的子树内部均匀划分较小的子树。

Walker算法中的分配例程的区别

图4. 示例显示Walker算法中分配例程的差异。。

算法的主要概念是:

把每个子树看作是一个坚硬的单位,移动一个节点意味着移动它的所有后代。

这样做是通过对每个节点使用初始坐标和修饰符。移动节点意味着增加/减少其初始坐标及其修饰符,但只有修饰符会影响节点后代的最终位置。所以移动子树意味着改变子树的根修饰符。计算节点的最终位置,计算节点初始坐标加上其所有祖先的修改量。

该算法工作在两遍。第一遍(firstWalk)是一个后序遍历。不同的子树从底部到顶部递归处理,并从左到右定位形成每个子树的刚性单元,直到没有人相互接触。随着遍历的进行,较小的子树被组合形成较大的子树,直到我们到达根。在这个过程中,例行程序将可能在两个相邻较大子树之间漂浮的内部较小子树(均匀地满足第三个规则的对称性)均匀地分隔开来。第二遍()是一个前序遍历,它通过将所有的祖先修饰符添加到每个节点的初始坐标来计算最终的节点位置。 apportion secondWalk

高超威(参见参考文献)提出了对例行程序的优化,其中包括Walker算法的增量版本。此版本避免在对树结构所做的更改不意味着修改其值时,重新计算节点的初始坐标和修饰符。这个优化还没有在这个组件中实现。 firstWalk

该算法还调整计算,如果布局是在不同的方向(即从底部到顶部)。不同的用途可能需要不同的意见 在欧美国家,传统意义上的顶级意味着权力,就像组织层次结构一样; 底部布局意味着进化或生长,就像生物学一样; 而左右布局可能意味着时间的演变。(但这是一个特别的考虑)。

只要提一句,像这样一个统一的布局算法就足够用于相对较小的树木。具有大量节点的树可能需要其他布局和可视化技术,例如缩放,平移和聚焦的能力,折叠节点的一些而不是所有子节点,增加交互式搜索。有许多其他解决方案可以实现相同的目标,包括但不限于双曲树,树图,兴趣度计算,…好奇的读者可以在网上找到很多信息。

使用代码

快速和肮脏的指导,让事情和工作

让我们来构建一个例子(所有样本都包含在下载中),以了解如何绘制一棵简单的树。之后,通过API参考并查看高级示例代码,您可以充分了解如何使用此组件。

首先,您必须包含组件脚本并将样式表链接到

你的HTML页面的一部分(记得在安装时设置路径):

ECOTree js画组织结构图 折叠| 复制代码

<< / span> head >

<< / span> 脚本 类型=“ text / javascript”  src =“ ECOTree.js” > </ </ span> 脚本>
<< / span> link  type =“ text / css”  rel =“ style-sheet”  href =“ ECOTree.css”  / >


<< / span> / head >

此外,如果您打算使用Internet Explorer,则必须将下一行添加到

您的HTML页面的VML部分正确呈现:

ECOTree js画组织结构图 折叠| 复制代码

<< / span> head >

<< / span> xml:namespace  ns =“ urn:schemas-microsoft-com:vml”  prefix =“ v” / >
<< / span> 风格> v \:* {behavior:url(#default#VML); } </ </ span> style >


<< / span> / head >

在你的HTML页面中,你必须为树放置一个块容器,比如a

用一个你必须提供给树的构造函数的ID。然后,您必须包含一个块来创建树本身,添加一些节点(可能是从实际项目的数据库中),然后绘制树。我们来看一个例子:

ECOTree js画组织结构图 折叠| 复制代码

<< / span> div id =“ myTreeContainer” > << / span> / div >

ECOTree js画组织结构图 折叠| 复制代码

var myTree = new ECOTree(“ myTree”,“ myTreeContainer”);

myTree.add(0,-1,“ 顶点节点”);

myTree.add(1,0,“ 左子”);

myTree.add(2,0,“ 右子”);

myTree.UpdateTree();

结果将是:

快速示例1

图5. 快速实施例1。

您必须确保在加载页面后至少在加载容器时执行脚本块。因此,您可以选择在容器后面插入脚本,或者在事件发生时为文档或主体调用的函数内部创建树。 OnLoad

请注意,组件具有几乎所有的默认值,导致这五行代码可以创建一个可以随意合拢或展开的树,只需单击它们即可选择/取消选择多个节点。另外,每个节点默认都有超链接。几乎每一次,你都会想要改变树的外观和感觉以及行为,以更好地满足你的需求。这可以通过树的实例成员完成。让我们通过添加一些行来修改前面的例子: Javascript:void(0); config

ECOTree js画组织结构图 折叠| 复制代码

var myTree = new ECOTree(“ myTree”,“ myTreeContainer”);

myTree.config.linkType = ’ B’ ;

myTree.config.iRootOrientation = ECOTree.RO_BOTTOM;

myTree.config.topYAdjustment = -160;

myTree.config.linkColor = “ black” ;

myTree.config.nodeColor = “ #FFAAAA” ;

myTree.config.nodeBorderColor = “ black” ;

myTree.config.useTarget = false ;

myTree.config.selectMode = ECOTree.SL_SINGLE;

myTree.add(0,-1,“ 顶点节点”);

myTree.add(1,0,“ 左子”);

myTree.add(2,0,“ 右子”);

myTree.UpdateTree();

有了这些细微的变化,现在树会看起来像这样:

快速示例2

图6. 快速例2。

这次,节点没有超链接(),并且一次只能选择一个节点(
4000
)。useTarget = falseselectMode = ECOTree.SL_SINGLE

好,现在基本已经被覆盖了,让我们继续发现所有的可能性。

API参考

ECOTree配置

这里是配置参数及其默认值:

ECOTree js画组织结构图 折叠| 复制代码

这个 .config = {

iMaxDepth:100,

iLevelSeparation:40,

iSiblingSeparation:40,

iSubtreeSeparation:80,

iRoo​​tOrientation:ECOTree.RO_TOP,

iNodeJustification:ECOTree.NJ_TOP,

topX调整:0,

topY调整:0,

渲染:“ 自动”,

linkType:“ M”,

linkColor:“ 蓝色”,

nodeColor:“ #CCCCFF”,

nodeFill:ECOTree.NF_GRADIENT,

nodeBorderColor:“ blue”,

nodeSelColor:“ #FFFFCC”,

levelColors:[ “ #5555FF” ,“ #8888FF” ,“ #AAAAFF” ,“ #CCCCFF” ],

levelBorderColors:[ “ #5555FF” ,“ #8888FF” ,“ #AAAAFF” ,“ #CCCCFF” ],

colorStyle:ECOTree.CS_NODE,

useTarget:true,

searchMode:ECOTree.SM_DSC,

selectMode:ECOTree.SL_MULTIPLE,

defaultNodeWidth:80,

defaultNodeHeight:40,

defaultTarget:’ Javascript:void(0);’ ,

expandedImage:’ ./img/less.gif’,

collapsedImage:’ ./img/plus.gif’,

transImage:’ ./ img/ trans.gif’

}

iMaxDepth:允许树的最大级别数。将其设置为比预期的最大级别更大的值。

iLevelSeparation:以像素为单位的级别之间的空间距离。请注意,级别大小将由该级别的最大节点大小给出。

iSiblingSeparation:兄弟节点之间的最小空间距离(以像素为单位)。

iSubtreeSeparation:邻居节点之间的最小空间距离(不具有相同的父节点),以像素为单位。

iRootOrientation:布局的方向。可能的值是:

ECOTree.RO_TOP:从上到下布局。

ECOTree.RO_BOTTOM:从底部到顶部的布局。

ECOTree.RO_RIGHT:从右向左布局。

ECOTree.RO_LEFT:从左到右布局。

iNodeJustification:属于同一级别的节点的对齐。可能的值是:

ECOTree.NJ_TOP:节点顶部对齐。

ECOTree.NJ_CENTER:节点居中对齐。

ECOTree.NJ_BOTTOM:节点底部对齐。

topXAdjustment:给出根节点的水平偏移量(以像素为单位)。用它来中心/平移屏幕上的树。

topYAdjustment:给出根节点的垂直偏移像素。用它来中心/平移屏幕上的树。

render:渲染类型。可能的值是:

“AUTO”:自动。这是默认值。代码将自动检测,如果客户端是Internet Explorer 6或Firefox,并且渲染类型将分别设置为或。 “VML” “CANVAS”

“VML”:矢量标记语言。仅适用于Internet Explorer。如果您使用它,请记得在文章中指出的部分添加和。XML namespace head

“CANVAS”:渲染将基于HTML元素。仅适用于Firefox 1.5+。(尽管Firefox 2.0速度更快)。

linkType:节点链接的样式。可能的值是:

“M”: 曼哈顿。链接是交叉的直线。经典。

“B”:贝济耶 链接是贝塞尔曲线。在某些情况下更合适。

linkColor:用于连接线的颜色。任何用HTML表示的颜色都是有效的。

nodeColor:用于节点的颜色。请参阅关于如何破解节点呈现模式的文章中的注释。任何用HTML表示的颜色都是有效的。

nodeFill:节点的填充风格。可能的值是:

ECOTree.NF_GRADIENT:节点将用节点颜色和“whitesmoke”之间的渐变填充。

ECOTree.NF_FLAT:节点将有一个坚实的填充。

nodeBorderColor:用于节点边界的颜色。任何用HTML表示的颜色都是有效的。

nodeSelColor:用于所选节点的颜色。任何用HTML表示的颜色都是有效的。

levelColors:具有连续级别颜色的Javascript数组。当选项设置为使用级别颜色时应用。树的第一级的节点将具有此数组中的第一个颜色,第二级节点数组的第二个颜色,依此类推。如果有比这个数组中的元素更多的级别,那么后续的级别会重新重复这些颜色。任何用HTML表示的颜色都是有效的。 colorStyle

levelBorderColors:和上面一样,但是边框颜色。

colorStyle:指示如何计算节点颜色。可能的值是:

ECOTree.CS_NODE:每个节点将使用它自己的颜色来渲染。

ECOTree.CS_LEVEL:节点将根据树中节点的等级使用不同的颜色,忽略它自己的颜色。

useTarget:节点是否显示超链接。可能的值是或 true false

searchMode:表达搜索(见API )将如何完成。可能的值是: searchNodes

ECOTree.SM_DSC:搜索将在节点标题内完成。

ECOTree.SM_META:搜索将在节点元数据内完成。

ECOTree.SM_BOTH:搜索将在两个值内完成。

selectMode:表示树的选择行为。可能的值是:

ECOTree.SL_MULTIPLE:用户可以通过点击交互式地选择和取消选择多个节点。

ECOTree.SL_SINGLE:用户可以通过点击交互式地选择和取消选择单个节点。新的节点选择将取消选择先前的选择。

ECOTree.SL_NONE:用户不能通过单击来选择节点。无论如何,导致节点选择的API方法将始终有效,就像树上的搜索一样。

defaultNodeWidth:节点宽度(以像素为单位),如果在向树添加节点时未给出明确的宽度。

defaultNodeHeight:节点高度(以像素为单位),如果在将节点添加到树时没有给出明确的高度。

defaultTarget:节点超链接(当点击标题时),如果在向树添加节点时没有给出明确的目标。通常在所有或大多数节点具有相同链接时设置。

expandedImage:允许折叠子树的减号图标。改变它,如果你不喜欢它,或指向你自己的图像文件夹。

collapsedImage:允许展开折叠子树的加号图标。改变它,如果你不喜欢它,或指向你自己的图像文件夹。

transImage:用于分隔折叠/展开图标和标题的透明图标。改变它,如果你不喜欢它,或指向你自己的图像文件夹。

ECOTree公共方法

UpdateTree():导致树刷新。

add(id, pid, dsc, w, h, c, bc, target, meta):向树添加一个新节点。三个第一个参数是强制性的。参数是:

id:节点ID。任何数字或字符串将是有效的。

pid:此节点的父ID。如果这是一个根节点,则父ID必须为-1。

dsc:节点标题。这将是可见的描述。它也将是到节点目标的链接。

w:(可选)节点宽度(以像素为单位)。

c:(可选)节点颜色。

bc:(可选)节点边框颜色。

h:(可选)节点高度(以像素为单位)。

target:(可选)节点超链接目标。如果您不提供此值,则节点将具有默认值。但是,如果您提供一个空字符串作为目标,您将以没有目标的节点结束。

meta:(可选)节点的元数据。元数据将不可见。您可以根据其内容搜索节点,也可以将其用作您自己的节点数据的容器。如果您使用Javascript对象作为元数据,请在该对象的原型中提供方法以使搜索正常工作。 toString()

将节点添加到树中后,可以使用其他API对其进行修改,例如,在第一次调用之前,将其标记为选中或折叠(如果有子节点)。按照任何特定顺序添加节点并不是强制性的。 UpdateTree()

searchNodes(str):在树中搜索包含字符串的节点。找到的节点将被选中,如果是这样的话,他们的祖先扩展到查找找到的节点。搜索可以在节点的标题,元数据或两者中完成。搜索是不区分大小写的。如果是或将找到所有找到的节点。如果是只有第一个节点(在数据库顺序)将被选中,但随后的搜索将从下一个节点按顺序启动,这样你就可以调用这个API来模拟未来的搜索功能。所有的节点将被访问后,搜索将从头开始重新开始。在内部调用,所以你不需要刷新树。 str selectMode SL_MULTIPLE SL_NONE selectMode SL_SINGLE UpdateTree()

selectAll():使树中的所有节点显示为选中状态。如果设置为这个API将返回没有选择。在内部调用,所以你不需要刷新树。 selectMode SL_NONE UpdateTree()

unselectAll():清除所有选择。无论使用什么都可以使用。应该用来清除搜索之间的选择。在内部调用,所以你不需要刷新树。 selectMode UpdateTree()

collapseAll():导致所有父节点成为折叠状态。在内部调用,所以你不需要刷新树。 UpdateTree()

expandAll():导致所有父节点变为扩展状态。在内部调用,所以你不需要刷新树。 UpdateTree()

collapseNode(nodeid, upd):折叠ID =的节点。仅在您提供第二个参数时才在内部调用。所以如果你打算折叠几个节点,所有工作完成后你只应刷新一次。 nodeid UpdateTree() true

selectNode(nodeid, upd):标记为ID =的节点。仅在您提供第二个参数时才在内部调用。 nodeid UpdateTree() true

setNodeTitle(nodeid, title, upd):设置ID =的节点的标题。仅在您提供第三个参数时才在内部调用。 title nodeidUpdateTree() true

setNodeMetadata(nodeid, meta, upd):设置ID =的节点的元数据。仅在您提供第三个参数时才在内部调用。 meta nodeidUpdateTree() true

setNodeTarget(nodeid, target, upd):设置ID =的节点的超链接。仅在您提供第三个参数时才在内部调用。 target nodeidUpdateTree() true

setNodeColors(nodeid, color, border, upd):设置ID =的节点的背景和颜色。仅在您提供第四个参数时才在内部调用。 color border nodeid UpdateTree() true

getSelectedNodes():返回一个JavaScript对象数组,每个对象的实例成员分别具有节点ID,标题和每个选定节点的元数据的值。查看示例以获取有关如何使用它的示例。如果你使用树客户端进行一些编辑,并使用该对象将用户选择或搜索结果发送到服务器,这可能很有用。(和AJAX不在本文讨论的范围内,但很高兴听到IE7最终实现为本地内部对象…)。 “id”,”dsc”, “meta” XMLHttp XMLHttp XMLHttp # 欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:

Markdown和扩展Markdown简洁的语法

代码块高亮

图片链接和图片上传

LaTex数学公式

UML序列图和流程图

离线写博客

导入导出Markdown文件

丰富的快捷键

快捷键

加粗
Ctrl + B


斜体
Ctrl + I


引用
Ctrl + Q


插入链接
Ctrl + L


插入代码
Ctrl + K


插入图片
Ctrl + G


提升标题
Ctrl + H


有序列表
Ctrl + O


无序列表
Ctrl + U
重点内容

横线
Ctrl + R


撤销
Ctrl + Z


重做
Ctrl + Y


Markdown及扩展

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接等,详细语法参考帮助?。

本编辑器支持 Markdown Extra ,  扩展了很多好用的功能。具体请参考Github.

表格

Markdown Extra 表格语法:

项目价格
Computer$1600
Phone$12
Pipe$1
可以使用冒号来定义对齐方式:

项目价格数量
Computer1600 元5
Phone12 元12
Pipe1 元234

定义列表

Markdown Extra 定义列表语法:
项目1
项目2
定义 A

定义 B

项目3
定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码,例如:

@requires_authorization
def somefunc(param1='', param2=0):
'''A docstring'''
if param1 > param2: # interesting
print 'Greater'
return (param2 - param1 + 1) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''


脚注

生成一个脚注1.

目录

[TOC]
来生成目录:

快捷键

Markdown及扩展
表格

定义列表

代码块

脚注

目录

数学公式

UML 图

离线写博客

浏览器兼容

数学公式

使用MathJax渲染LaTex 数学公式,详见math.stackexchange.com.

行内公式,数学公式为:Γ(n)=(n−1)!∀n∈N。

块级公式:

x=−b±b2−4ac−−−−−−−√2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图:

Created with Raphaël 2.1.0张三张三李四李四嘿,小四儿, 写博客了没?李四愣了一下,说:忙得吐血,哪有时间写。

或者流程图:

Created with Raphaël 2.1.0开始我的操作确认?结束yesno

关于 序列图 语法,参考 这儿,

关于 流程图 语法,参考 这儿.

离线写博客

即使用户在没有网络的情况下,也可以通过本编辑器离线写博客(直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。

博客发表后,本地缓存将被删除。 

用户可以选择 [/i] 把正在写的博客保存到服务器草稿箱,即使换浏览器或者清除缓存,内容也不会丢失。

注意:虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱

浏览器兼容

目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。

IE9以下不支持

IE9,10,11存在以下问题

不支持离线功能

IE9不支持文件导入导出

IE10不支持拖拽文件导入

这里是 脚注 的 内容.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端框架
相关文章推荐