我正在显示生成的流程图的Json输出。我已将已删除元素的详细信息存储在名为finalArray的数组中，只是将其添加到Json显示中。除了从另一个数组中检索的属性名称及其属性类型外，所有细节似乎都正确显示。
我评论了在以下代码段中无效的部分
function saveFlowchart(){
var nodes = [];
var matches = [];
var searchEles = document.getElementById("container").children;
for(var i = 0; i < searchEles.length; i++)
{
matches.push(searchEles[i]);
var idOfEl = searchEles[i].id;
if(searchEles[i].id !=null || searchEles[i].id !="")
{
var $element = $("#" + searchEles[i].id);
var dropElem = $("#" + searchEles[i].id).attr('class');
var position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
//alert("class:"+dropElem+"\nTop position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right);
finalArray[i] = [];
finalArray[idOfEl-1][0]= idOfEl;
finalArray[idOfEl-1][1]= dropElem;
finalArray[idOfEl-1][2]= [];
finalArray[idOfEl-1][2][0] = position.top;
finalArray[idOfEl-1][2][1] = position.left;
finalArray[idOfEl-1][2][2] = position.bottom;
finalArray[idOfEl-1][2][3] = position.right;
var elId = parseInt(idOfEl);
if (dropElem=="streamdrop ui-draggable")
{
for(var count=0;count<100;count++)
{
if(createdImportStreamArray[count][0]==idOfEl)
{
finalArray[elId-1][3]= createdImportStreamArray[count][1]; //Selected Stream from Predefined Streams
finalArray[elId-1][4]= createdImportStreamArray[count][2]; //asName
//alert("createdImportStreamArray[count][0]==elId\n"+count);
}
else if(createdExportStreamArray[count][0]==idOfEl)
{
finalArray[elId-1][3]= createdExportStreamArray[count][1]; //Selected Stream from Predefined Streams
finalArray[elId-1][4]= createdExportStreamArray[count][2]; //asName
}
else if(createdDefinedStreamArray[count][0]==idOfEl)
{
finalArray[elId-1][3]= createdDefinedStreamArray[count][1]; //Stream Name
finalArray[elId-1][4]= createdDefinedStreamArray[count][4]; //Number of Attributes
finalArray[elId-1][5]=[];
for(var f=0;f<createdDefinedStreamArray[count][4].length;f++)
{
finalArray[elId-1][5][f]=[];
以下两个不单独显示。相反，只显示“[]”
finalArray[elId-1][5][f][0]=createdDefinedStreamArray[count][2][f][0]; //Attribute Name
finalArray[elId-1][5][f][1]=createdDefinedStreamArray[count][2][f][1]; // Attribute Type
}
}
}
}
else if (dropElem=="wstream ui-draggable")
{
finalArray[elId-1][3]= createdWindowStreamArray[elId-1][1]; // Window Name
finalArray[elId-1][4]= createdImportStreamArray[elId-1][2]; //Selected Stream Index
finalArray[elId-1][4]= createdImportStreamArray[elId-1][3]; //Selected Stream
finalArray[elId-1][5]= [];
var AttributeNumber = createdWindowStreamArray[elId-1][4].length;
for(var attrFill=0;attrFill<AttributeNumber;attrFill++)
{
finalArray[elId-1][5][attrFill]=[];
finalArray[elId-1][5][attrFill][0]=createdWindowStreamArray[elId-1][4][attrFill][0];
finalArray[elId-1][5][attrFill][1]=createdWindowStreamArray[elId-1][4][attrFill][1];
}
//alert("createdImportStreamArray[count][0]==elId\n"+count);
}
else if (dropElem=="squery ui-draggable")
{
ElementType="squery";
}
else if (dropElem=="wquery ui-draggable")
{
ElementType="wquery";
}
else if (dropElem=="joquery ui-draggable")
{
ElementType="joquery";
}
else if(dropElem=="stquery ui-draggable")
{
ElementType="stquery";
}
else if(dropElem=="partitiondrop ui-draggable")
{
ElementType="partitiondrop";
}
}
}
alert(finalArray);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
console.log('endpoints of '+$elem.attr('id'));
console.log(endpoints);
nodes.push({
blockId: $elem.attr('id'),
nodetype: $elem.attr('data-nodetype'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.elements =finalArray;
flowChart.numberOfElements = finalArray.length;
var flowChartJson = JSON.stringify(flowChart);
//console.log(flowChartJson);
$('#jsonOutput').val(flowChartJson);
}
createdDefinedStream Array
//Array that stores all Defined stream data
var createdDefinedStreamArray = [];
for(var x = 0; x < 100; x++){
createdDefinedStreamArray[x] = [];
for(var y = 0; y < 5; y++){
createdDefinedStreamArray[x][y] = null
}
}
function storeDefinedStreamInfo(newAgent,i,e,kind)
{
var StrName= document.getElementById("StreamNameInput").value;
var StreamElementID = i;
var table = document.getElementById('attrtable');
var tblerows = (table.rows.length);
createdDefinedStreamArray[i][2]=new Array(tblerows);
for (r = 1; r < tblerows; r++) {
for(var c=0; c<1;c++) {
var attrNm = table.rows[r].cells[c].innerHTML;
var attrTp = table.rows[r].cells[1].innerHTML;
createdDefinedStreamArray[i][2][r-1]= new Array(2);
createdDefinedStreamArray[i][2][r-1][0]=attrNm;
createdDefinedStreamArray[i][2][r-1][1]=attrTp;
}
}
createdDefinedStreamArray[i][0]=StreamElementID;
createdDefinedStreamArray[i][1]=StrName;
createdDefinedStreamArray[i][3]="Defined Stream";
createdDefinedStreamArray[i][4]= tblerows;
var prop = $('<a onclick="doclickDefine(this)"><b><img src="../Images/settings.png" class="settingsIconLoc"></b></a> ').attr('id', (i+'-prop'));
var conIcon = $('<img src="../Images/connection.png" onclick="connectionShowHideToggle(this)" class="showIconDefined"></b></a> ').attr('id', (i+'vis'));
newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(conIcon).append(prop);
dropCompleteElement(newAgent,i,e,kind);
}
答案 0 :(得分：0)
请问您可以尝试在您的数据上运行此代码，看看我是否遗漏了任何内容以及问题是否已解决？我用地图替换了所有的循环，所以在哪里选择哪些数据更清楚。
function saveFlowchart(){
var nodes = [],
searchElements = Array.prototype.slice.call(document.querySelector('#container').childNodes),
matches = searchElements.slice(),
finalArray,
ElementType, // this was global in the example and is currently not used in the sample code.
map = function map( ary, field ) {
return ary.reduce(function( map, element ) {
map[element[field]] = element;
return map;
}, {});
},
// Let's create a bunch of maps so we can reference each id directly instead of having to loop Each array for each element several times.
// This results in easier to understand code and runs faster, since nested arrays several levels deep can cause confusion.
// Noted the signature of each provided array.
// importStreamMap: [ id, selected stream, asName ]
importStreamMap = map(createdImportStreamArray, 0),
// exportStreamMap: [ id, selected stream, asName ]
exportStreamMap = map(createdExportStreamArray, 0),
// definedStreamMap: [ id, stream name, [ [attr1 name, attr1 type], [attr2 name, attr2 type], ... ], ???, attr count ]
definedStreamMap = map(createdDefinedStreamArray, 0),
// windowStreamMap: [ id, window name, selected stream index, selected stream (name?) ]
windowStreamMap = map(createdWindowStreamArray, 0),
classHandlers = {
'streamdrop ui-draggable' : function( id, result ) {
if (importStreamMap.hasOwnProperty(id)) {
result.push(importStreamMap[id][1]); // selected stream
result.push(importStreamMap[id][2]); // asName
}
else if (exportStreamMap.hasOwnProperty(id)) {
result.push(exportStreamMap[id][1]); // selected stream
result.push(exportStreamMap[id][2]); // asName
}
else if (definedStreamMap.hasOwnProperty(id)) {
result.push(definedStreamMap[id][1]); // stream name
result.push(definedStreamMap[id][4]); // attr count
result.push(definedStreamMap[id][2].slice()); // just clone the entire array of key/value pairs, no need to recreate it since they are strings.
}
},
'wstream ui-draggable' : function( id, result ) {
result.push(windowStreamMap[id][1]); // window name
// one of these two is obsolete, since the second overwrites the first. Selected stream according to the array signature ????
// result.push(importStreamMap[id][2]);
result.push(importStreamMap[id][3]);
result.push(windowStreamMap[id][4].slice()); // clone the array again.
},
'wquery ui-draggable' : function( id, result ) {
ElementType = 'wquery';
},
'joquery ui-draggable' : function( id, result ) {
ElementType = 'joquery';
},
'stquery ui-draggable' : function( id, result ) {
ElementType = 'stquery';
},
'partitiondrop ui-draggable' : function( id, result ) {
ElementType = 'partitiondrop';
}
};
finalArray = searchElements.reduce(function( ary, element ) {
var id = parseInt(element.id, 10),
$element,
dropCls,
position,
result;
if (id) {
$element = element.querySelector('#' + id);
dropCls = $element.className;
position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
result = [ id, dropCls, [ position.top, position.left, position.bottom, position.right ] ];
classHandlers[dropCls](id, result);
ary.push(result);
}
return ary;
}, []);
////////////////////////////////////////////////////////////////////
// Rest of the code stays the same. If the attributes aren't showing up yet, check if the array is correct and if the indexes are ok.
// From the array signatures, we get that the createdDefinedStreamArray contains the attributes instead of the createdWindowStreamArray.
// For the record, it'd be easier to just use key-value pairs and objects in the JSON, if the API allows that.
}