建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

生成树状结构图的JQuery插件SVG Drag Tree

来源:易助科技网浏览量:57收藏

简介

SDT 是 SVG Drag Tree 的缩写,一个可以通过拖放 SVG 图标,来生成拥有树形结构的视图与相应数据的前端组件。该组件不依赖任何其它库或框架,同时在样式上留给了用户极大的自由(因此,示例并不代表其最终样式),其 .min.js 格式文件大小约为 13kb。

(下载的附件中附有DEMO)


SDT 做了哪些工作:

自动获取元素的大小,你无须担心元素会叠加在一起

你可以设置元素之间怎样放置的从属关系

有直线与曲线两种连线方式可以选择,你可以自己设置连线的颜色

元素间的上下边距也是可设置的,但列与列之间的宽度则是自动的

目标画布的大小由外层 DIV 决定,同时你可以自定义背景

提供了两种设置方法:直接在HTML进行设置,或是在JS脚本中进行设置

如果不进行设置,则组件会提供一套默认规则

提供了整个目标画布的全局拖动与缩放,以及一个回到目标画布中心的方法

你可以撤销或删除任意元素,其余元素会重新排布

可以返回两种类型的数据:精简版与完整版。精简版只包涵了元素类型、ID、从属关系,减少向后台发送的数据量,但精简版数据不可用于重绘。完整版包涵了精简版所包涵的所有数据,同时也包涵了绘图相关信息,放置顺序相关信息,可以用作重绘。

是的,提供了接收“完整版数据”然后进行重绘的方法(示例中刚打开网页就在画布中已经生成树形结构的方法)。

返回一个可监测的值,当用户放置不符合你的设置时,改变为放置错误信息


使用

1.  引入文件


<script src="SDT.js" defer="defer" type="text/javascript" charset="utf-8"></script>
<script src="exampleScript.js" defer="defer" type="text/javascript" charset="utf-8"></script>


2. HTML

在 .html 文件中,可拖动的所有 SVG 图标被一个 class = "sdt-drag-element-lis" 的 <div > 标签包围,每个SVG图标分别被一个 class="sdt-drag-element" 的 <div > 标签包围。

注:class="sdt-drag-element" 的 <div> 标签必须拥有 data-sdt-type 属性,属性值为字符串,用以说明此图标的类型:


<div class="sdt-drag-element-lis">
  <div class="sdt-drag-element" data-sdt-type="icon-1">
    <svg>...</svg>
  </div>

  <div class="sdt-drag-element" data-sdt-type="icon-2">
    <svg>...</svg>
  </div>

  <div class="sdt-drag-element" data-sdt-type="icon-3">
    <svg>...</svg>
  </div>
  
  ...
  
</div>


在 .html 文件中,目标画布被一个 class="sdt-canvas" 的 <div> 标签包围,此标签的宽和高决定了目标画布的宽和高。目标画布本身是一个 id="sdt-drop-canvas" 的 <svg>标签:


<div class="sdt-canvas">
  <svg id="sdt-drop-canvas" width="100%" height="100%">...</svg>
</div>


3.  调用

在 SDTTreeElements 数组中,每一项为一个对象,每个对象的:

type 属性 值为字符串 表示元素类型

dropswitch 属性 值为 true 或 false 当值为 true 时元素可直接放置于画布

leanRight 值为 true 或 false 当值为 true 时元素默认放置于右侧树

foresideType 值为一个数组 当数组为空时,则任何元素都将不接受其的放置;当数组有元素值为 all 时所有元素都接受其放置;当数组元素值为合法 type 时,其 type 所对应元素接受其放置


var set_o = {"SDTTreeElements": [
{
  "type": "icon-1",
  "dropSwitch": true,
  "foresideType": ["icon-1","icon-2"],
  "leanRight": false
 },{
   "type": "icon-2",
   "dropSwitch": true,
   "foresideType": ["root", "icon-2"],
   "leanRight": false
 },{
   "type": "icon-2",
   "dropSwitch": true,
   "foresideType": ["all"],
   "leanRight": false
 }],
 
 "SDTTreeSet": {...}
};



相关链接

英文文档 :https://github.com/aute/SVGDragTree/actions

GitHub 地址 :https://github.com/aute/SVGDragTree

Gitee 地址:https://gitee.com/mirrors/SVG-Drag-Tree#https://gitee.com/link?target=https%3A%2F%2Faute.github.io%2FSVGDragTree%2F

在线示例 :https://aute.github.io/SVGDragTree/