利用jQuery-UI和jsPlumb实现拖拽连接模型

最新推荐文章于 2026-05-10 21:55:29 发布

原创最新推荐文章于 2026-05-10 21:55:29 发布 · 1.2w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jsPlumb #jquery-ui

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何利用jQuery UI的拖拽功能和jsPlumb插件创建一个自定义数据搜索模型。用户可以从左侧将模型拖动到右侧容器，通过连线建立模型间的关联，模拟数据库中的多表链接查询。文章提供了完整demo的下载链接，并展示了数据处理的示例。

简介

之前公司需要做一个自定义数据搜索模型的功能，大体是这样的：左边显示的每一个模型对应于数据库中的一个表，把左边的模型拉入右边的容器内，会显示这个模型（也就是表）下的列信息，然后通过连线确定各独立的模型之间的关系（对应于数据库中的多表链接查询），然后保存数据到后台执行。由于保存模型就是对容器中的模型的一个解析，这里就不做展示了，这个demo主要处理模型的展示以及如何链接。
话不多说，先上图：

需要用到的东西

这个功能主要用到的是jQuery UI的拖拽功能以及jsPlumb连线插件。
jsPlumb插件是一个js插件，其主要功能是对网页上任意两个元素，都可以通过为他们添加endPoint节点来实现在这两个元素之间建立一个连接（就是画一条线）。这个插件有收费版、和社区版，收费版可能功能更强大，在这里用的是社区版，只要能处理我们的需求就可以了。用这个插件只需要jsPlumb-x.x.x.js即可，官网地址：https://jsplumbtoolkit.com/

下面介绍我的demo：
完整demo下载地址：http://download.csdn.net/download/csdn_xuexiaoqiang/9784381
在这个demo里，样式和HTML我写在了demo.html，js我写在了demo.js，用到的示例数据我写在了metadata.js,是一个数组。其他主要的东西还有：jquery-2.1.4.min.js、jquery-ui.min.js、jquery-ui.custom.min.css、jsPlumb-2.2.8.js剩下的bootstrap相关的都是为了页面美观我才加进去的，和核心功能无关。
至于jsPlumb的用法，在demo.js中我都有标记。

数据处理的例子

这是我之前做的一个模块，里面有怎么保存模型数据的方法，仅供参考。
jsp页面，页面本身没什么，而且是镶嵌在框架里面的，主要是页面下面的js,有主要的处理逻辑

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<c:set var="ctx" value="<%=basePath%>"></c:set>
<html>
<head>
<title>模型定义</title>
<link rel="stylesheet" href="${ctx }/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"
    href="${ctx }/bootstrap/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="${ctx }/zTree/css/zTreeStyle/zTreeStyle.css ">
<script type="text/javascript" src="${ctx }/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jsPlumb-2.2.8.js"></script>
<script src="${ctx }/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx }/bootstrap/js/bootbox.js"></script>
<script src="${ctx }/zTree/js/jquery.ztree.core.js"></script>
<script src="${ctx }/zTree/js/jquery.ztree.exedit.js"></script>
<style type="text/css">
.navRight li a {
    font-size: 12px!important;
}
.footer {
    height: auto;
    margin-top: 10px;
    text-align: center;
    width: auto;
    font: 12px/1.5 tahoma,arial,simsun,sans-serif;
    padding-top: 0;
}
.userHandle a,span {
    box-sizing: content-box;
}
.userHandle {
    box-sizing: content-box;
}
body {
    background-color: #cbdde4;
}
/*ztree*/
.ztree li span.button.noline_open {
    background: url(${ctx }/zTree/images/tree_close.png) no-repeat!important;
    width: 10px!important;
    height: 10px!important;
    vertical-align: middle!important;
    margin: 9px 9px 9px 0px!important;
}
.ztree li span.button.noline_close {
    background: url(${ctx }/zTree/images/tree_open.png) no-repeat!important;
    width: 10px!important;
    height: 10px!important;
    vertical-align: middle!important;
    margin: 9px 9px 9px 0px!important;
}
.ztree li a span.button.ico_open {
    background: url(${ctx }/zTree/images/tree_level2.png) no-repeat!important;
}
.ztree li a span.button.ico_close {
    background: url(${ctx }/zTree/images/tree_level2.png) no-repeat!important;
}
.ztree>li>a>span.button.ico_open {
    background: url(${ctx }/zTree/images/tree_level1.png) no-repeat!important;
}
.ztree>li>a>span.button.ico_close {
    background: url(${ctx }/zTree/images/tree_level1.png) no-repeat!important;
}
.ztree li a span.button.ico_docu {
    background: url(${ctx }/zTree/images/tree_level3.png) no-repeat!important;
}
.ztree *{
    font-family: SimHei!important;
    font-size: 18px!important;
    color: #666666!important;
}
.ztree li a {
    margin-bottom: 5px!important;
    height: 28px!important;
    line-height: 28px!important;
}
.ztree li a.curSelectedNode {
    border: 1px solid #2983cf!important;
    background: #d5ecf9!important;
}
.ztree li span.button {
    height: 28px!important;
    width: 20px!important;
    line-height: 28px!important;
    text-align: center;
    vertical-align: middle!important;
}
.ztree>li{
    margin-bottom: 4px!important;
}
.ztree ul {
    padding-left: 28px!important;
}
.ztree li span.button.chk {
    width: 13px!important;
    height: 13px!important;
}
.ztree li span{
    z-index: 1;
}
/*ztree-end*/

#container {
    min-height: 800px;
    position: relative;
    border: 1px solid #666666;
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 0;
    overflow: auto;
}
#container .model table {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 0;
}
#container .model table thead th{
    background-color: #3E7E9C;
    text-align: center;
    background-image: none;
}
#container .model table tbody{
    background-color: #CBEAE1;
}
.jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
    cursor: pointer;
}
</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2" style="min-height: 800px;background-color: #84ACB3;border-radius:5px;padding-top: 12px;">
            <div class="content_wrap" style="width: 100%;">
                <div class="zTreeDemoBackground left" style="width: 100%;">
                    <ul id="leftMenu" class="ztree" style="height: 800px;overflow: auto;width: 100%;"></ul>
                </div>
            </div>
        </div>
        <div class="col-xs-10">
            <div id="container"></div>
        </div>
    </div>
</div>
<div style="padding-top: 10px;">
模型名称：<input type="text" value='' id="modelName" style="height: 32px;margin-right:5px;"/>
模型描述：<input type="text" value='' id="modelDesc" style="height: 32px;margin-right:5px;"/>
<button class="btn btn-white btn-info" type="button" onclick="save()" style="display: inline-block;">
                            <i class="ace-icon fa fa-check bigger-120 blue"></i> 保存</button>
</div>
<div id="myModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">请选择模型联系条件</h4>
            </div>
            <div class="modal-body">
            连线类型:<select id="twoWay">
                <option value="false">单向</option>
                <option value="true">双向</option>
            </select>
                条件:<select id="select_sourceList">
                </select>
                <select id="select_comparison" >
                    <option value="=" selected="selected">=</option>
                </select>
                <select id="select_targetList">
                </select>
            </div>
            <div class="modal-footer">
                <button id="submit_label" type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- javascript -->
<script type="text/javascript" src="${ctx }/js/model/addModel.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        getDataSet("${ctx }/ajaxGetDataSet.do");

        //监听新的连接
    instance.bind("connection", function (connInfo, originalEvent) {
            init(connInfo.connection);
        });
    // listen for clicks on connections, and offer to delete connections on click.
    instance.bind("dblclick", function (conn, originalEvent) {
           if (confirm("要删除从 " + conn.source.getElementsByTagName("th")[0].innerHTML 
           + " 到 " + conn.target.getElementsByTagName("th")[0].innerHTML + " 的连接么?")){
                instance.detach(conn);
           }
        });
    });
function save(){
//下面两个只是到后台执行相关业务逻辑的链接，在后面的js中会用到，所以弄了一个变量，传到saveToDb方法中
    var ajaxToVerifySql = "这里只是一个异步保存并执行所产生的SQL语句的链接";
    var ajaxToSaveModel = "这个是保存模型相关数据的链接";
    //保存到数据库
    saveToDb(ajaxToVerifySql,ajaxToSaveModel);
}
</script>
</body>
</html>

下面就是页面引用的addModel.js，整个js都在这里：

/**
 * 添加自定义模型
 */
var model_counter=0;
var dataSet;
var mData;
var treeObj;

//初始化一个jsPlumb实例
var instance = jsPlumb.getInstance({
    DragOptions: { cursor: "pointer", zIndex: 2000 },
    ConnectionOverlays: [
            [ "Arrow", {
                location: 1,
                visible:true,
                width:11,
                length:11,
                direction:1,
                id:"arrow_forwards"
            } ],
            [ "Arrow", {
                location: 0,
                visible:true,
                width:11,
                length:11,
                direction:-1,
                id:"arrow_backwards"
            } ],
            [ "Label", {
                location: 0.5,
                id: "label",
                cssClass: "aLabel"
            }]
        ],
    Container: "container"
});
instance.importDefaults({
  ConnectionsDetachable:true,
  ReattachConnections:true
});

//创建模型
function CreateModel(ui, selector) {
    //添加html模型
    var modelid = $(ui.draggable).attr("id").split("_span")[0];
    model_counter++;
    var id = modelid + "_model_" + model_counter;
    var type = treeObj.getNodeByTId(modelid).id;
    var add_html = getModelTable(ui, type); 
    $(selector).append('<div class="model" id="' 
            + id +'" modelType="' + type 
            + '" >'+add_html+'</div>');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $("#"+id).css("position", "absolute").css("left", left).css("top", top);
    //添加连接点
    instance.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
    instance.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
    instance.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
    instance.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
    //instance.draggable(id);
    //注册实体可draggable
    $("#" + id).draggable({
        containment: "parent",
        drag: function (event, ui) {
            instance.repaintEverything();
        },
        stop: function () {
            instance.repaintEverything();
        }
    });
    return id;
}
//基本连接线样式
var connectorPaintStyle = {
    stroke: "#84ACB3",
    strokeWidth: 2
};
//鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
    strokeWidth: 3,
    stroke: "#84ACB3",
    outlineWidth: 2,
    outlineStroke: "#84ACB3"
};
//端点样式设置
var hollowCircle = {
    endpoint: ["Dot",{ cssClass: "endpointcssClass"}], //端点形状
    connectorStyle: connectorPaintStyle,
//  connectorHoverStyle: connectorHoverStyle,
    paintStyle: {
        fill: "#84ACB3",
        radius: 6
    },      //端点的颜色样式
    isSource: true, //是否可拖动（作为连接线起点）
    connector: ["Flowchart", {stub: 30, gap: 0, coenerRadius: 0, alwaysRespectStubs: true, midpoint: 0.5 }],
    isTarget: true, //是否可以放置（连接终点）
    maxConnections: -1
};
//获得对应模型名称的模型
function getModelTable(ui, type)
{
    var thead = $(ui.helper).html();
    var list_tr = "";
    for(var i = 0; i < dataSet.length;i++){
        var data = dataSet[i];
        if(data.key == type){
            for(var y = 0;y < data.content.length;y++){
                var col = data.content[y];
                list_tr += '<tr><td>' + '<input type="checkbox" value="' + col.field + '">'
                            + col.label
                            + '</td><td></td></tr>';
            }
        }
    }
    var table = '<table class="table">'
    + '<thead><th>' +thead+ '</th><th><a href="javascript:void(0)" onclick="removeElement(this);" style="color:black;">X</a></th></thead>'
    + '<tbody>' 
    + list_tr
    + '</tbody>'
    + '</table>';
    return table;
}
//设置连接Label的label
function init(conn)
{
    var label_text;
    $("#select_sourceList").empty();
    $("#select_targetList").empty();
    var sourceName = $("#" + conn.sourceId).attr("modelType");
    var targetName = $("#" + conn.targetId).attr("modelType");
    for(var i = 0; i < dataSet.length; i++){
        if(dataSet[i].key == sourceName){
            for(var y = 0;y < dataSet[i].content.length; y++){
                var text = '<option value="'+dataSet[i].value + '.' + dataSet[i].content[y].label +'">'+dataSet[i].value + '.' + dataSet[i].content[y].label + '</option>';
                $("#select_sourceList").append(text);
            }
        }else if(dataSet[i].key == targetName){
            for(var y = 0;y < dataSet[i].content.length; y++){
                var text = '<option value="'+dataSet[i].value + '.' +  dataSet[i].content[y].label +'">' +dataSet[i].value + '.' + dataSet[i].content[y].label + '</option>';
                $("#select_targetList").append(text);
            }
        }
    }
    $("#submit_label").unbind("click");
    $("#submit_label").on("click",function(){
        setlabel(conn);
    });
    $("#myModal").modal();
    //connection.getOverlay("label").setLabel("点击此处添加模型关联条件");
}
//setlabel
function setlabel(conn)
{
    conn.getOverlay("label").setLabel($("#select_sourceList").val() 
            + ' ' 
            + $("#select_comparison").val()
            + ' '
            + $("#select_targetList").val());
    if($("#twoWay").val()=="true"){
        conn.setParameter("twoWay",true);
    }else{
        conn.setParameter("twoWay",false);
        conn.hideOverlay("arrow_backwards");
    }
}
//删除节点
function removeElement(obj)
{
    var element = $(obj).parents(".model");
    if(confirm("确定删除该模型？"))
        instance.remove(element);
}
//获取原始数据
function getDataSet(uri)
{
    $.ajax({
        type: "post",
        url: uri,
        success: function(data){
            dataSet = data.dSet;
            mData = data.mData;
            getLeftMenuList(dataSet);
        },
        error:function(data){
            myalert("内部错误");
        }
    });
}
//设置左边模型列表
function getLeftMenuList(dataList)
{   
    var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: "root"
                }
            },
            callback: {
                onNodeCreated: zTreeOnNodeCreated
            },
            view : {
            showLine: false
        }
    };
    //初始化一级节点
    var zNodes = [
                  {id:"dns",pId:"root",name:"DNS",isParent:true},
                  {id:"vpn",pId:"root",name:"VPN",isParent:true},
                  {id:"url",pId:"root",name:"URL",isParent:true},
                  {id:"terminal",pId:"root",name:"终端ID",isParent:true},
                  {id:"remoteControl",pId:"root",name:"远程控制",isParent:true},
                  {id:"netDisk",pId:"root",name:"网盘",isParent:true},
                  {id:"mail",pId:"root",name:"邮箱",isParent:true},
                  {id:"ip",pId:"root",name:"IP地址",isParent:true},
                  {id:"instantMessage",pId:"root",name:"即时通讯",isParent:true},
                  {id:"fiveTule",pId:"root",name:"五元组",isParent:true},
                  {id:"defence",pId:"root",name:"突防工具",isParent:true},
                  {id:"cookie",pId:"root",name:"COOKIE",isParent:true},
                  {id:"adsl",pId:"root",name:"Radius",isParent:true},
                  {id:"accountPassword",pId:"root",name:"账号口令",isParent:true},
                  {id:"newTable",pId:"root",name:"自定义",isParent:true}
                  ];

    for(var i=0; i < dataList.length; i++){
        var node = new Object();
        if((dataList[i].oriName != "")&&(dataList[i].oriName != null)){
            node.pId = dataList[i].oriName;
        }else{
            node.pId = "newTable";
        }
        node.id = dataList[i].key;
        node.name = dataList[i].value;
        zNodes.push(node);
    }
    //初始化
    treeObj = $.fn.zTree.init($("#leftMenu"), setting, zNodes);
}
//拖拽设置
function zTreeOnNodeCreated()
{
    //左边区域的draggable事件
    $("#leftMenu .node_name").draggable({
        helper: "clone",
        scope: "plant"
    });
    //中间拖拽去的drop事件
    $("#container").droppable({
        scope: "plant",
        drop: function (event, ui) {
            //创建模型到拖拽区
            CreateModel(ui, $(this));
        }
    });
}
//保存模型
function saveToDb(ajaxToVerifySql,ajaxToSaveModel)
{
    var flag = true;
    var ary = new Array();
    $("input[type=checkbox]:checked").each(function(){
        var val = this.value.toLocaleLowerCase();
        ary.push(val);
    });
    flag = mm(ary);
    if(!flag){
        if(!checkOn()){
            var modelName = $("#modelName").val();
            var modelDesc = $("#modelDesc").val();
            var result = exportData();
            var result_sql = exportSQL(result);

            if(modelName.length == 0){
                myalert("请输入模型名称");
            }else if(modelDesc.length == 0){
                myalert("请输入模型描述");
            }else {
                var items = new Array(); // 保存model涉及到的表名称
                var jItems = new Array(); // 保存表以及对应的列名称
                var kItems = new Array(); // 保存表以及对应的列名称

                var nodes = result.nodes;
                for(var property in nodes){
                    var dataSetJSON = nodes[property].data;
                        items.push(dataSetJSON.key+ "!" + nodes[property].name);
                }

                uniqueArray(items);
                for(var i=0;i<items.length;i++){
                    var alias = items[i].split("!")[1];
                    var tableName = items[i].split("!")[0];
                    for(var j=0;j<mData.length;j++){
                        if(tableName == mData[j]['tableName']){
                            mData[j]["alias"] = alias;
                            jItems.push(JSON.stringify(mData[j]));
                            break;
                        }
                    }
                }
                for(var i=0;i<jItems.length;i++){
                    kItems.push(JSON.parse(jItems[i]));
                }

                var submitData = {"modelName":modelName,"modelDesc":modelDesc,"modelJson":JSON.stringify(result),"modelSql":result_sql,"modelTable":JSON.stringify(kItems)};
                var sqlData = {"modelSql":result_sql};
                $.ajax({
                    type:"post",
                    url:ajaxToVerifySql,
                    data:sqlData,
                    success:function(data){
                        if(data == "success"){
                            $.ajax({
                                type:"post",
                                url:ajaxToSaveModel,
                                data:submitData,
                                success:function(data){
                                    if(data.status == "success"){
                                        myalert("保存成功");
                                    }else{
                                        myalert("保存失败");
                                    }
                                },
                                error:function(data){
                                    myalert("保存失败");
                                }
                            });
                        }else{
                            myalert("请检查模型连线是否正确以及是否有选择模型的列");
                        }
                    },
                    error:function(data){
                        myalert("保存失败");
                    }
                });
            }
        }else{
            myalert("请选择连接条件");
        }
    }else{
        myalert("不能选择重复的列名称");
    }
}
//把模型导出到一个变量中
function exportData()
{
    var retStr = '{"nodes":{';

    if($("#container").children().length > 0){
        $("#container .model").each(function(i){
            var nodeStr = "";
            nodeStr += '"' + $(this).attr("id") + '":{"name":"' + $(this).attr("id") + '"'
                        + ',' + '"left":"' + $(this).css("left") + '"'
                        + ',' + '"top":"' + $(this).css("top") + '"'
                        + ',' + '"type":"' + $(this).attr("modelType") + '"'
                        + ',';
            var data = new Object();
            var key = $(this).attr("modelType");
            var value;
            var content;
            for(var y = 0;y < dataSet.length; y++){
                var ds = dataSet[y];
                if(ds.key == key){
                    value = ds.value;
                    content = ds.content;
                }
            }
            $(this).find("input:checked").each(function(n){
                var field = $(this).val();
                for(var y = 0;y < content.length; y++){
                    var col = content[y];
                    if(col.field == field)
                        col.checked = true;
                }
            });
            data.value = value;
            data.key = key;
            data.content = content;
            nodeStr += "\"data\":" + JSON.stringify(data) + "}";
            if((i+1) < $("#container .model").length)
                nodeStr += ','
            retStr += nodeStr;
        });
        retStr += '},';
        //连接
        var connections = instance.getAllConnections();
        if(connections.length > 0){
            var lineStr = '"lines":{';
            for(var i = 0; i < connections.length; i++){
                var sourceId = connections[i].sourceId;
                var targetId = connections[i].targetId;
                var label = connections[i].getOverlay("label").label;
                var twoWay = connections[i].getParameter("twoWay");
                var str = '"demo_line_' + i + '":{'
                            + '"from":"' + sourceId + '"'
                            + ',' + '"to":"' + targetId + '"'
                            + ',' + '"label":"' + label + '"'
                            + ',' + '"twoWay":' + twoWay
                            + '}';
                if((i+1) < connections.length)
                    str += ',';
                lineStr += str;
            }
            lineStr += '}';
            retStr += lineStr;
        }else{
            myalert("请检查模型连线是否正确");
            return false;
        }
    }else{
        myalert("请选择模型");
    }
    retStr += '}';
    var retObj = JSON.parse(retStr);
    return retObj;
}
//生成SQL
function exportSQL(retObj)
{
    var fields = "";
    var join = "";
    var nodeData = retObj.nodes;
    var lineData = retObj.lines;
    var num = 0;
    for(var k in lineData){
        var lf = lineData[k].from;
        var lt = lineData[k].to;
        var ll = lineData[k].label;
        var twoWay = lineData[k].twoWay;
        var f_node = nodeData[lf];
        var t_node = nodeData[lt];

        var f_d = f_node.data;
        var f_node_name = f_node.name;
        var t_d = t_node.data;
        var t_node_name = t_node.name;

        var from_table_name = f_d.value;
        var from_table = f_d.key;
        var to_table_name = t_d.value;
        var to_table = t_d.key;

        for(var i=0; i<f_d.content.length; i++){
            var f_field = f_d.content[i];
            if(f_field.checked){
                var fld = f_node_name+"."+f_field.field + " as " + "A" + num++ +"_" + f_field.field;
                if(fields.indexOf(fld)<0){
                    fields+=fld + ",";
                }
            }
        }

        for(var i=0; i<t_d.content.length; i++){
            var t_field = t_d.content[i];
            if(t_field.checked){
                var fld = t_node_name+"."+t_field.field + " as " + "B" + num++ +"_" + t_field.field;
                if(fields.indexOf(fld)<0){
                    fields+=fld+",";
                }
            }
        }

        var j_array = ll.split("=");
        var j_from_table_name = $.trim(j_array[0].split(".")[0]);
        var j_from_table_filed = $.trim(j_array[0].split(".")[1]);
        var j_to_table_name = $.trim(j_array[1].split(".")[0]);
        var j_to_table_filed = $.trim(j_array[1].split(".")[1]);

        j_from_table_name = j_from_table_name.replace(from_table_name,f_node_name);
        j_from_table_filed = getFieldByLabel(f_d.content,j_from_table_filed);
        j_to_table_name = j_to_table_name.replace(to_table_name,t_node_name);
        j_to_table_filed = getFieldByLabel(t_d.content,j_to_table_filed);
        var on = j_from_table_name + "." + j_from_table_filed + "=" + j_to_table_name + "." + j_to_table_filed;
        if(twoWay){
            if("" == join)
                join += from_table + " " + f_node_name + " inner join " +to_table+ " " + t_node_name + " on "+on;
            else
                join += " inner join " + to_table + " " + t_node_name + " on " +on;
        }else{
            if("" == join)
                join += from_table+" " + f_node_name + " left join "+to_table+ " " + t_node_name+" on "+on+" ";
            else
                join += " left join "+to_table+ " " + t_node_name+" on "+on+" ";
        }
    }
    if(fields.length>0)
        fields = fields.substring(0,fields.length-1);

    return ("select " + fields + " from " +join);
}
//根据label获取field
function getFieldByLabel(obj,label)
{
    var field;
    for(var i=0; i<obj.length; i++){
        if(obj[i].label == label)
            field = obj[i].field;
    }
    return field;
}
//去除重复数据
function uniqueArray(data)
{  
       data = data || [];  
       var a = {};  
       for (var i=0; i<data.length; i++) {  
           var v = data[i];  
           if (typeof(a[v]) == 'undefined'){  
                a[v] = 1;  
           }  
       };  
       data.length=0;  
       for (var i in a){  
            data[data.length] = i;  
       }  
       return data;  
}
//判断数组元素是否重复，重复返回ture
function mm(a)
{
   return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f"+a.join("\x0f\x0f") +"\x0f");
}
//检查连线是否有连接条件
function checkOn(){
    var flag = false;
    $(".aLabel").each(function(){
        if("" == $(this).text()){
            flag = true;
            return false;
        }
    });
    return flag;
}
//弹窗
function myalert(info) {
    bootbox.dialog({
        "message" : info,
        "buttons" : {
            "success" : {
                "label" : "OK",
                "className" : "btn-sm btn-primary"
            }
        }
    });
}

完