首页 新闻 搜索 专区 学院

jsPlumb在html与cshtml显示问题

0
悬赏园豆:5 [待解决问题]

最开始我用idea做了一个流程图的页面可以显示出来,可是为啥我用.net下的cshtml却显示不出连线,html和js代码我都是从idea复制的
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="">
<style>
.start {
background-color: #fc8801;
border-radius: 25em;
-moz-border-radius: 25em;
height: 38px;
width: 92px;
/
padding: 5px; /
/
padding-left: 18px; /
padding-top: 11px;
/
line-height: 20px; */
text-align: center;
height: 32px;
float: left;
}

    .approve {
        background-color: #00b4fe;
        width: 92px;
        /* padding: 5px; */
        /* padding-left: 18px; */
        padding-top: 11px;
        /* line-height: 20px; */
        text-align: center;
        height: 32px;
        float: left;
    }

    .copy {
        background-color: #ffd966;
        width: 92px;
        /* padding: 5px; */
        /* padding-left: 18px; */
        padding-top: 11px;
        /* line-height: 20px; */
        text-align: center;
        height: 32px;
        float: left;
    }

    .end {
        background-color: #fc8801;
        border-radius: 25em;
        -moz-border-radius: 25em;
        height: 38px;
        width: 92px;
        /* padding: 5px; */
        /* padding-left: 18px; */
        padding-top: 11px;
        /* line-height: 20px; */
        text-align: center;
        height: 32px;
        float: left;
    }
</style>

</head>
<body>
<div id="diagramContainer">
111
<div style="margin-top: 200px">
<div class="start" id="start"><span>开始</span></div>
<div style="margin-left: 100px" class="approve" id="step1">审批1</div>
<div style="margin-left:150px" class="approve" id="step2">审批2</div>
<div style="margin-left: 170px" class="copy" id="copy">分发</div>
<div style="margin-left: 200px" class="end" id="end">结束</div>
</div>
</div>
<script src="~/js/jquery/jquery-1.12.4.min.js"></script>
<script src="~/js/jquery/jquery-ui.js"></script>
<script src="~/js/jquery/jsplumb.min.js"></script>
<script>
var jsText = 'jsPlumb.ready(function () {\n' +
' var flowConnector = {\n' +
' // connector: ["Bezier", { curviness: 0 }],\n' +
' //anchors: ["BottomCenter", "TopCenter"],\n' +
' connector:'Straight',\n' +
' paintStyle: { lineWidth: 2, strokeStyle: "#61B7CF", fillStyle: "transparent" },\n' +
' //paintStyle: { lineWidth: 2, strokeStyle: "#61b7cf", joinstyle: "round", outlineColor: "white", outlineWidth: 2 },\n' +
' overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],\n' +
' endpoint: ["Dot", { radius: 1 }]\n' +
' };\n' +
' var returnConnector = {\n' +
' connector: "Bezier",\n' +
' //anchors: ["BottomCenter", "TopCenter"],\n' +
' paintStyle: { lineWidth: 2, strokeStyle: "red", fillStyle: "transparent" },\n' +
' //paintStyle: { lineWidth: 2, strokeStyle: "#61b7cf", joinstyle: "round", outlineColor: "white", outlineWidth: 2 },\n' +
' overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],\n' +
' endpoint: ["Dot", { radius: 1 }]\n' +
' };\n' +
' var connection1= jsPlumb.connect({\n' +
' source: 'start',\n' +
' target: 'step1',\n' +
' anchor: ['Right', 'Left']\n' +
' },flowConnector)\n' +
' var connection2= jsPlumb.connect({\n' +
' source: 'step1',\n' +
' target: 'step2',\n' +
' },flowConnector)\n' +
' var connection3= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'copy',\n' +
' },flowConnector)\n' +
' var connection4= jsPlumb.connect({\n' +
' source: 'copy',\n' +
' target: 'end',\n' +
' },flowConnector)\n' +
' connection1.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通过</span>);\n' +
' var returnStep1= jsPlumb.connect({\n' +
' source: 'step1',\n' +
' target: 'start',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep1.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
' var returnStep2= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'step1',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep2.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
' var returnStep3= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'start',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep3.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
'\n' +
' })'

    var jscode = new Function(jsText)();
</script>

</body>
</html>
我在用cshtml页面打开是没有连线的,用idea打开是有的,是不是cshtml与html有啥不一样

灬丶的主页 灬丶 | 初学一级 | 园豆:71
提问于:2020-03-29 15:09
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册