关于jsPlumbToolkit的一些代码（第一篇js篇）（嘻嘻！！！）

1.页面

//页面
<body>
	<div class="gcontent" style="height:100%;padding-top :0;" id="jtk-demo-hierarchy">
		<!-- table -->
				//newtaskinfo 这个标签是我自用的
				<input type="hidden" name="newtaskinfo" id="newtaskinfo" value="1">
				<div class="miniview" id="miniview">
				</div>
				<div class="jtk-demo-canvas canvas-wide jtk-surface" id="jsPlumb_2_1">
				</div>
		</div>
	</div>
</body>	
//这个是他内置的方法，我看到的第一眼就觉得很神奇哈！！
//先这样，先大概看一眼咱们往下看！ ↓
<script type="jtk" id="jtk-template-default">
	<div class="name" title="${taskDesc?if_exists}">
		<strong>
			<div class="node-top">
				<div class="top-left">${taskName?if_exists}</div>
				<div class="top-right" style="${top_right?if_exists}">
					//添加子节点的按钮，实际就是个加号 
					<span class="add" id="${id?if_exists},${taskLev?if_exists}" onclick="addTask('${id}','${taskLev}','${meetingId}')">+</span>
					//删除子节点的按钮，同上减号
					<span class="delete" id="${id?if_exists},${meetingId?if_exists}">x</span>
				</div>
			</div>
			<div class="node-top">
				<div class="user-left">${Fziduan?if_exists}</div>
				<div class="user-right" style="${user_right?if_exists}" onclick="TaskRole('${id}','${taskUserId}','${meetingId}')">${username?if_exists}</div>
			</div>
			<div class="node-top">${SETime?if_exists}</div>
			<div class="node-bow">
				<div class="bow-delide" style="${bow_delide?if_exists}" onclick="updTask('${id}','${taskLev}','${meetingId}')">${Xziduan?if_exists}</div>
				<div class="bow-left" style="${bow_left?if_exists}" onclick="taskWeekly('${id}','${startTime}','${endTime}','${meetingId}')">${Zziduan?if_exists}</div>
				<div class="bow-right">${tasktimeType?if_exists}</div>
			</div>
		</strong>
	</div>
</script>

2.JS

//javascript 代码
(function () {
    jsPlumbToolkit.ready(function () {
    	var toolkit = window.toolkit = jsPlumbToolkit.newInstance({
    		  beforeStartDetach:function() { return false; }
    		});
        var mainElement = document.querySelector("#jtk-demo-hierarchy"),
            canvasElement = mainElement.querySelector(".jtk-demo-canvas"),
            miniviewElement = mainElement.querySelector(".miniview");
        //删除按钮    
        jsPlumb.on(canvasElement, "tap", ".delete", function (e) {
        	//var info = toolkit.getObjectInfo(this);
            //var selection = toolkit.selectDescendants(info.obj, true);
            //toolkit.remove(selection);
        	var num = this.id;//这个this.id自己打印出来看一下，本垃圾也忘了是啥了 QAQ
        	var arr=num.split(",");
        	console.log(arr[1])
        	//阻止删除根节点
        	if(arr[0]=='00000000000000000000000000000000'){
		       layeropen("这里写提示信息！");
		       //这个方法layeropen，看我的：ajax后台传递数组的文章里面有
		       //这里提示之后不需要刷新，可以改一下layeropen方法 QAQ
        	}else{
        		layer.confirm('删除当前任务将同时删除子任务，请确定是否删除？', {
					  btn: ['确定','取消'] //按钮
					}, function(){
					 	$.ajax({
							url : "${base}/meeting/delTask.action",
							type : 'POST',
							data:{"id":arr[0],"globalId":arr[1]},
							success : function(data) {
								if (data === "success") {
									layeropen("删除成功！");
									location.reload();//这里必须刷新
								} else{
									layer.msg("系统异常，请稍后尝试", {icon: 2});
								}
							},
							error : function() {
								layer.msg('系统异常', {icon: 2});
							}
						});
					},function(){
			        });
        	}
            
        });
        //添加按钮 enmmm这个是他原带的方法，我做的东西不需要他的方法
        /*jsPlumb.on(canvasElement, "tap", ".add", function (e) {
        	var num = this.id;
        	var arr=num.split(",");
        	var openindex = layer.open({
				 title:'任务添加',
				 type: 2,
				 zIndex:300,
				  area: ['550px', '40%'],
				  shadeClose: true,
			      shade: 0.8,
			      maxmin: true, 
				  content: ['${base}/meeting/addTask.action?globalId=${globalId?if_exists}&superid='+arr[0]+'&lev='+arr[1], 'yes'], 
				  end: function(){
					  layer.close(openindex);
					}
			});
        	
            var info = toolkit.getObjectInfo(this);
            var n = jsPlumbToolkitDemoSupport.randomNode();
            var newNode = toolkit.addNode(n);
            toolkit.addEdge({source: info.obj, target: newNode});
        });*/
		
		//乱七八糟的设置开始。。。 最好去看一下他的源文档哈！
        var renderer = toolkit.render({
            container: canvasElement,
            consumeRightClick: false,
            layout: {
                type: "Hierarchical",
                parameters: {
                    orientation: "vertical",
                    padding: [160, 60],
                    //这个好像是根节点的id 嗯嗯！！！
                    rootNode:"00000000000000000000000000000000",
                },
                multipleRoots:false,
                decorators:["Hierarchy"]
            },
            //enablePan:false,//禁用平移
            enablePanButtons:false,//隐藏泛按钮
            enableWheelZoom:false,//是否启用鼠标滚轮缩放功能。
            //clampZoom:false,//缩放移动
            //clamp:false,//泛运动
            elementsDraggable: false,
            jsPlumb:{
                Anchors: ["Right", "Left"],
                //Connector: [ "StateMachine", { curviness: 10 } ],
                Connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],  
                PaintStyle: { lineWidth: 1, stroke: '#89bcde' },
                HoverPaintStyle: { stroke: "#FF6600", lineWidth: 3 },
                Endpoints: [
                    [ "Dot", { radius: 2 } ],
                    "Blank"
                ],
                EndpointStyle: { fill: "#89bcde" },
                EndpointHoverStyle: { fill: "#FF6600" }
            },
            refreshLayoutOnEdgeConnect:true
        });
        //乱七八糟的设置结束
        
        //surface.setMode(Surface.DISABLED);//完全禁用Surface
        
        /* 这里这里 很关键啊！！！ 这里是页面的数据
        我这里是用ajax自己去弄的数据，好像是业务有一些固定的要求，
        还有就是他自带的一种方法，就是下面被我注释掉的 那个。。。
        url:"${base}/meeting/taskjson.action?globalId=${globalId?if_exists}"
		onload: renderer.zoomToFit
		*/
        $.ajax({
            url: "${base}/meeting/taskjson.action",
            async: false,
            type: "post",
            dataType: 'json',
            data: {globalId: '${globalId?if_exists}',jumpType :'${jumpType?if_exists}'},
            success: function (data) {
            	/*ajax的方法需要去自己编写这个js里面的方法，js是叫...demo-support.js对这个！QAQ
            	再提醒一下啊，最好先去了解一下原文档！！！
            	jsPlumbToolkitDemoSupport.MyRandomHierarchy(data)*/
                var hierarchy = jsPlumbToolkitDemoSupport.MyRandomHierarchy(data);
                //console.log(hierarchy);
                toolkit.load({
                	data: hierarchy
		        	//url:"${base}/meeting/taskjson.action?globalId=${globalId?if_exists}"
		            //onload: renderer.zoomToFit
		        });
		        //这里我是动态设置了一下页面，好像是显示的东西不全屏的原因，你也可以自己想办法解决一下
		        $(".jtk-surface-canvas").css("top","290px");
            }, error: function () {
                layer.msg('系统异常', {icon: 2});
            }
        });
        var datasetView = new jsPlumbSyntaxHighlighter(toolkit, ".jtk-demo-dataset");
    });

})();

3.JS

//我们来看一下 demo-support.js 前方高能！！！
/**
 * This is just a collection of utility methods used by the jsPlumb Toolkit demos to get random datasets for
 * demo purposes.
 */
 //json日期格式转换为正常格式
function formatDate(jsonDate) {
	if(jsonDate!=null&&jsonDate!=""&&typeof(jsonDate)!="undefined"){
		var year = jsonDate.year+1900;
	    var month = jsonDate.month+1;
	    var day = jsonDate.date;
	    month=(month>9)?(""+month):("0"+month);  //如果得到的数字小于9要在前面加'0'
	    day=(day>9)?(""+day):("0"+day);
	    return year + "-" + month + "-" + day;
	}
	return "";
}
(function () {
    window.jsPlumbToolkitDemoSupport = {
        // return a random hierarchy that contains at least 10 nodes (if possible. if maxDepth * maxBreadth is less
        // than 10, though, then we use that value for our desired amount). The hierarchy also contains positioning
        // information for use with an absolute layout, but most layouts ignore these values.
        randomHierarchy: function (maxDepth, maxBreadth, maxWidth, maxHeight) {
            maxDepth = maxDepth || 6;
            maxBreadth = maxBreadth || 3;
            maxWidth = maxWidth || 600;
            maxHeight = maxHeight || 400;
            var l = 0, t = 0;
            if (maxBreadth < 1) maxBreadth = 1;
            var _do = function () {
                    var h = [ ], c = 0, pad = 80,
                        _node = function (depth) {
                            c++;
                            var id = "w" + c, name = "" + c,
                                childCount = Math.floor(Math.random() * maxBreadth) + 1,
                                wh = jsPlumbToolkitDemoSupport.randomSize(80, 60),
                                n = { id: id, name: name, w: wh[0], h: wh[1], left:l, top:t },
                                children = [];

                            l += wh[0] + pad;
                            if (l > maxWidth) {
                                l = 0;
                                t += wh[1] + pad;
                            }

                            if (depth < maxDepth) {
                                for (var i = 0; i < childCount; i++) {
                                    children.push(_node(depth + 1));
                                }
                            }

                            h.unshift([n, children]);
                            return id;
                        };
                    _node(0);
                    return h;
                },
                _h = null;

            var maxNodesDesired = Math.min(maxDepth * maxBreadth, 10);
            while ((_h = _do()).length < maxNodesDesired);

            var out = { nodes: [], edges: [] };
            for (var i = 0; i < _h.length; i++) {
                out.nodes.push(_h[i][0]);
                for (var j = 0; j < _h[i][1].length; j++) {
                    out.edges.push({source: _h[i][0].id, target: _h[i][1][j], data:{id:jsPlumbUtil.uuid().slice(25)}});
                }
            }

            return out;
        },
        //滴滴滴   看这里！！！
        //这个data 就是ajax 返回的json数据，后面我会给出java 代码
        MyRandomHierarchy: function (data) {
        	console.log(data)
            _h = null;
            var h = [ ];
            for (var d = 0; d < data.nodes.length; d++) {
            	//这里就是一些业务逻辑需要用到的变量
            	var timeType = null ;var setime = null;
                var taskUser = null;var fuzeren = null;
                var zhoubao = null;var xiangqing = null;
               /*看下面这些名字是不是很熟悉(啥啊！熟悉个pi啊！)
                文章开头页面里面，很神奇的-内置方法里边的-元素的-id (滑稽)
                发现了吧！我是这样控制style的(一些原因才这么做的,你可以不用这样)。
               */
               var bow_left = "background-color:#4378d8;"
        		var top_right = "background-color:#4278d8;"
        		var bow_delide = "background-color: #4278d8;"
        		var user_right = "color: #f0f2f5;background-color: #4278d8;cursor: pointer;"
        		//这个if里面是一些逻辑判断
            	if(data.nodes[d].ID!="00000000000000000000000000000000"){
            		//console.log(formatDate(data.nodes[d].START_TIME))
            		if(new Date(formatDate(data.nodes[d].START_TIME))<=new Date(data.taskTime[0].taskNow)&&new Date(data.taskTime[0].taskNow)<=new Date(formatDate(data.nodes[d].END_TIME))){
            			if(data.nodes[d].OVER_TIME!=null&&data.nodes[d].OVER_TIME!=''&&new Date(formatDate(data.nodes[d].START_TIME))<=new Date(formatDate(data.nodes[d].OVER_TIME))&&new Date(formatDate(data.nodes[d].OVER_TIME))<=new Date(formatDate(data.nodes[d].END_TIME))){
            				timeType = "已完成";
            			}else{
            				timeType = "进行中";
            			}
            		}else if(new Date(formatDate(data.nodes[d].START_TIME))>new Date(data.taskTime[0].taskNow)){
            			timeType = "未开始";
            		}else if(new Date(formatDate(data.nodes[d].END_TIME))<new Date(data.taskTime[0].taskNow)){
            			if(data.nodes[d].OVER_TIME!=null&&data.nodes[d].OVER_TIME!=''){
            				timeType = "已完成";
            			}else{
            				timeType = "逾期中";
            			}
            		}
            		/*if(data.nodes[d].TASK_STATUS=='1'){
            			timeType = "已完成";
            		}
            		if(data.nodes[d].TASK_STATUS=='2'){
            			timeType = "逾期中";
            		}*/
            		
            		fuzeren = "负责人：";
            		if(new Date(formatDate(data.nodes[d].START_TIME))>new Date(data.taskTime[0].taskNow)){
            			zhoubao = "";
            		}else{
            			zhoubao = "任务进展";
            		}
            		xiangqing = "详情";
            		setime = formatDate(data.nodes[d].START_TIME) +"～"+ formatDate(data.nodes[d].END_TIME);
            		if(data.nodes[d].TASK_USER_ID==null||data.nodes[d].TASK_USER_ID==""){
            			taskUser = "请选择负责人";
            		}else{
            			taskUser = data.nodes[d].NAME;
            		}
            	}
            	//逻辑结束看下面
            	
            	//把data里面的数据取出来赋值,注意名字要和你页面上取的名字一样
            	//例子：username  →   ${username?if_exists}
            	n = { id: data.nodes[d].ID, 
            		  username : taskUser, 
                	  meetingId : data.nodes[d].MEETING_ID, 
                	  superTaskId : data.nodes[d].SUPER_TASK_ID, 
                	  taskName: data.nodes[d].TASK_NAME,
                	  taskDesc : data.nodes[d].TASk_DESC, 
                	  taskUserId : data.nodes[d].TASK_USER_ID,
                	  createUserId : data.nodes[d].CREATE_USER_ID, 
                	  taskStatus : data.nodes[d].TASK_STATUS, 
                	  startTime : formatDate(data.nodes[d].START_TIME), 
                	  endTime : formatDate(data.nodes[d].END_TIME), 
                	  SETime : setime,
                	  overTime : data.nodes[d].OVER_TIME, 
                	  ifLate : data.nodes[d].IF_LATE, 
                	  ifDel : data.nodes[d].IF_DEL, 
                	  taskComment : data.nodes[d].TASK_COMMENT, 
                	  createTime : data.nodes[d].CREATE_TIME, 
                	  taskLev : data.nodes[d].TASK_LEV,
                	  tasktimeType : timeType,
                	  Fziduan : fuzeren,
                	  Zziduan : zhoubao,
                	  Xziduan : xiangqing,
                	  user_right : user_right,
                	  bow_delide : bow_delide,
                	  top_right:top_right,
                	  bow_left : bow_left
            		}; h.push([n]);
        	}
            _h =  h;
            
            //下面算是固定方法了吧，应该不用做太大的改动
            //这些集合或者数组的名字不要改动 例：nodes、edges、source、target、data
            var out = { nodes: [], edges: [] };
            for (var i = 0; i < _h.length; i++) {
                out.nodes.push(_h[i][0]);
            }
            for (var j = 0; j < data.edges.length; j++) {
            	
                out.edges.push({source: data.edges[j].source, target: data.edges[j].target, data:{id:jsPlumbUtil.uuid().slice(25)}});
            }
            return out;
            //把这个返回,他会自动装载到页面上 ，好啦去看java代码！！！
        },
        
        // randomizes the two given dimensions by up to +/- 20%
        randomSize: function (refWidth, refHeight, factor) {
            factor = factor || 0.3;
            var rx = Math.floor(factor - (Math.random() * (factor * 2 * refWidth))),
                ry = Math.floor(factor - (Math.random() * (factor * 2 * refHeight)));

            return [ refWidth + rx, refHeight + ry ];
        },

        // gets a random position within the given bounds
        randomLocation : function(w, h) {
            return [
                Math.floor(Math.random() * w),
                Math.floor(Math.random() * h)
            ];
        },

        randomNode: function (name) {
            var wh = jsPlumbToolkitDemoSupport.randomSize(80, 60),
                xy = jsPlumbToolkitDemoSupport.randomLocation(800, 600),
                id = jsPlumbToolkitUtil.uuid(),
                name = name || id.substring(0, 3);

            return { id: id, name: name, w: wh[0], h: wh[1], left:xy[0], top:xy[1] };
        },

        randomGraph:function(minimum, maximum) {
            var nodeCount = minimum + Math.floor(Math.random() * (maximum - minimum));
            var maybe = function() { return (Math.random() >= 0.5); };
            var data = { nodes:[], edges:[] }, edgeCache = {}, edgeCount = 0;
            for (var i = 0; i < nodeCount; i++) {
                var sourceId = "" + (i+1);
                data.nodes.push({id:sourceId, name:sourceId});
                for (var j = 0; j < nodeCount; j++) {
                    if (i != j) {
                        var targetId = "" + (j+1),
                            key = sourceId +"_"+ targetId,
                            keyInv = targetId +"_"+ sourceId;

                        if (edgeCount < (nodeCount * 2) && !edgeCache[key] && !edgeCache[keyInv] && maybe()) {
                            var directed = maybe();
                            data.edges.push({
                                source:sourceId,
                                target: targetId,
                                directed:directed,
                                data:{type:directed? null : "bidirectional" }
                            });
                            edgeCache[key] = true;
                            edgeCache[keyInv] = true;
                            edgeCount++;
                        }
                    }
                }
            }
            return data;
        }
    };

})();

我觉得js代码和java的分开写比较好，可以有个对照，而且有点写不下了，东西太多编辑器都有点卡了 QAQ
我也会在下一篇把需要的css啊js啊。。。都列出来。
看下一篇吧关于jsPlumbToolkit的一些代码（第二篇java篇）（嘻嘻！！！）

关于jsPlumbToolkit的一些代码 （第一篇js篇）（嘻嘻！！！）

1.页面

2.JS

3.JS

猜你喜欢

关于jsPlumbToolkit的一些代码（第一篇js篇）（嘻嘻！！！）