实用的左右列表联系jQuery插件,点击连线可以删除连线;可以将线连接到连线之上。
var obj2 = $("#aaa2").svgLine({ //列表中选项的尺寸(支持sm、md、lg) size:'md', //皮肤,默认只支持green skin:'green', //左边列表标题 headerLeft:'MODULE1', headerRight:'MODULE2', //选项中文名称的字段名 name:'name', //选项的唯一标识的字段名, key:'key', //左边列表选项 leftList:[ {name:'天',key:'t',disable:true,icon:'fa fa-bandcamp'},{name:'雨',key:'y'},{name:'大陆',key:'dl'},{name:'山花',key:'sh'},{name:'赤日',key:'cr'} ], rightList: [ {name:'地',key:'d'},{name:'风',key:'f'},{name:'长空',key:'ck'},{name:'苍穹',key:'cq'},{name:'海树',key:'hs'} ], //映射关系 mapping:{'sh':'hs','cr':'cq','t':'d','y':'f','dl':'ck'}, width:'600px', //选择映射时回调 onSelect:function(l1,l2){ appendMsg($("#msg"),"您连接了"+l1+"和"+l2); }, //删除映射时回调 onCancle:function(l1,l2){ appendMsg($("#msg"),"您取消了"+l1+"和"+l2); }, }); //触发宽度重置 obj2.resize(宽度); //获得数据 alert(JSON.stringify(obj2.getData()));