预览效果
点击连线可以删除连线；可以将线连接到连线之上
答题连线
回调事件
调用方式
svgLine方法的参数说明
| 参数名 | 含义 | 取值范围 |
|---|---|---|
| headerLeft | 左边列表标题 | 任意值（支持html） |
| headerRight | 右边列表标题 | 任意值（支持html） |
| leftList | 左列表选项 | 数组，数组中的每个元素是一个选项，每个选项都需要定义key和name属性 |
| rightList | 右列表选项 | 数组 |
| mapping | 初始连线关系 | 左列表key值和右列表key值得关系 |
| width | 控件外部宽度 | px或者% |
| size | 控件选项的高度 | 只支持sm、md或lg，默认为sm |
| skin | 控件皮肤 | 默认为green，可进行自定义拓展 |
| removAble | 选项是否显示移除按钮 | true或false，默认为true，可控制所有选项是否可以手动删除，优先级小于选项自身的removable属性 |
leftList和rightList选项的参数说明
| 参数名 | 含义 | 取值范围 |
|---|---|---|
| key | 选项唯一标识，同一侧列表中的key值不能重复 | 不能包含特殊字符，建议为字母数字或者下划线 |
| name | 选项显示的名称 | 可为任意值 |
| icon | 选项图标 | 图标的class名称，例如fa fa-plus |
| removable | 是否可以移除选项，选项会显示删除按钮，优先级高于全局的removAble属性 | true或者false，默认为true |
| disable | 选项是否可选，当选项中包含disable属性且值为true时，该选项不可选中，且与这个选项相连的选项无法被取消 | true或者false，默认为false |
API
| 方法名称 | 方法说明 | 参数 | 返回值 |
|---|---|---|---|
| getData() | 获得当前连线关系数据 | (空) | return {左列表key1:右列表key1,左列表key2:右列表key2,...} |
| setData(map) | 修改连线关系 | 映射关系： map={左列表key1:右列表key1,左列表key2:右列表key2,...} | (空) |
| resize(w) | 重置插件外部宽度 | 宽度值：100px、100%，w为空时等用于refresh()方法 示例：resize('100px') | (空) |
| refresh() | 刷新插件视图 | (空) | (空) |
| addOptions(opt) | 动态添加选项，对于列表中已存在的key值的选项，不会添加到列表中 | opt={
//左列表中要添加的选项
leftList:[
{name:'新选项',key:'k1'}
],
//右列表中要添加的选项
rightList:[
{name:'新选项',key:'k2'}
]
} | (空) |
| deleteOptions(opt) | 动态删除选项，若选项已经存在连线，连线也会被删除 | opt={
//左列表中要删除的选项
leftList:['key1','key2',...],
//右列表中要删除的选项
rightList:['key1','key2',...]
} | (空) |
| getUl() | 获得ul的jquery对象，返回的是$(dom)对象 | (空) | return {
left:左列表ul的$(dom)对象,
right:右列表的ul的$(dom)对象
} |
回调函数
| 函数名 | 触发条件 | 参数列表 |
|---|---|---|
| onSelect(key1,key2) | 连接两个选项时触发 | key1：左列表选项的key key2：右列表选项的key |
| onCancle(key1,key2) | 取消两个选项时触发 | key1：左列表选项的key key2：右列表选项的key |
拓展自定义皮肤样式
默认只支持green，可以在传入的skin参数中，添加自定义样式，假设skin值为"blue"，需要先使用下面这段样式来声明"blue"：