Hello, I want to change the value of node data dynamically through the setDataProperty attribute

image.png1117x456 15.8 KB
Hello, I want to change the value of node data dynamically through the setDataProperty attribute.
I wrote the change event on the right and then changed the node data by using setDataProperty to change the current click element, and I found that all the elements were changed, but I just wanted to change the element of the current click.

image.png1028x179 9.2 KB

Can you show us your code?

We also need to see what you node template looks like and some example node data. Is cols an itemArray?

On the right is to click on the left element and get node.data.cols, then render it dynamically, and then I want to change the value of the element node.data.cols on the right. According to my code, I will change the node.data.cols value of other elements on the canvas. Can I see what the reason is?

_designer.addDiagramListener(“ObjectSingleClicked”, onObjectSingleClicked);
function onObjectSingleClicked(ev) {
var part = ev.subject.part;
showEditNode(part);
};
function showEditNode(node) {
for (var obj in node.data.cols){
if(node.data.cols[obj].type == ‘checkbox’){//判断多选框
var checkboxCheckedStr = ‘’;
if(node.data.cols[obj].value == false){
checkboxCheckedStr = “checked = checked”;
};
var colsCheckbox = ’


<input class=“pull-left” ’ + checkboxCheckedStr + ’ type=“checkbox”>
’ + node.data.cols[obj].text + ’
‘;
('.field-settings').append(colsCheckbox); }else if(node.data.cols[obj].type == 'select'){//判断下拉框框append进去 var optionHtml=''; for(var i=0;i<node.data.cols[obj].selectParams.length;i++){ var selectP = node.data.cols[obj].selectParams; optionHtml += '<option value="' + selectP[i].value + '">' + selectP[i].name + '</option>'; } var colsOptionSelect = '<div class="split-parameter">\ <div class="split-proportion">\ <h4 class="proportion-title">' + node.data.cols[obj].text + '</h4>\ <select style="width:100%;" id="' + node.data.cols[obj].id + '" value=' + node.data.cols[obj].value + '>\ ' + optionHtml + '</select>\ </div>\ </div>'; (’.field-settings’).append(colsOptionSelect);
$(’#’ + node.data.cols[obj].id).select2().val(node.data.cols[obj].value).trigger(‘change’);
changeDataCols(node.data.cols[obj].id,obj)
        }
    }

}
function changeDataCols(id,obj){
('#' + id).on('change',function(){ var selectVal = (this).val();
_designer.startTransaction(“vacate”);
_designer.model.setDataProperty(nodeCur.data.cols[obj], “value”, selectVal);
_designer.commitTransaction(“vacate”);

        //_designer.removeChangedListener(onObjectSingleClicked);
    })
}

nodeDataArray like this:

“nodeDataArray”: [{
“category”: “gyh”,
“text”: “归一化”,
“images”: “images/guiyihua.png”,
“model_name”: “normalization”,
“cols”: {
“1”: {
“text”: “是否保留原始列”,
“value”: true,
“type”: “checkbox”
},
“2”: {
“text”: “input框”,
“value”: “1”,
“type”: “input”
},
“3”: {
“text”: “选择表名”,
“value”: “1”,
“type”: “select”,
“id”: “optionSelect”,
“selectParams”: [{
“id”: “0”,
“name”: “所有字段”,
“value”: 1
}, {
“id”: “2”,
“name”: “two”,
“value”: 2
}, {
“id”: “3”,
“name”: “three”,
“value”: 3
}]
},
“4”: {
“text”: “选择字段”,
“value”: [“1”, “2”],
“id”: “selectfeild”,
“type”: “selectfeild”,
“feildParams”: [{
“id”: “0”,
“name”: “所有字段”,
“type”: 100
}, {
“id”: “2”,
“name”: “two”,
“type”: 1
}, {
“id”: “3”,
“name”: “three”,
“type”: 1
}]
},
“5”: {
“text”: “源表字段信息”,
“type”: “table”,
“feildParams”: [{
“id”: “0”,
“name”: “所有字段”,
“type”: “STRING”
}, {
“id”: “2”,
“name”: “two”,
“type”: “STRING”
}, {
“id”: “3”,
“name”: “three”,
“type”: “STRING”
}]
},
“componentExplain”: {
“type”: “explain”,
“text”: “归一化”,
“content”: “可以选择是否保留原始列,勾选后原始列会被保留,处理过的列重命名 可以选择是否保留原始列,勾选后原始列会被保留,处理过的列重命名”
}
},
“key”: -1,
“loc”: “260 -60”
},
{
“category”: “gyh”,
“text”: “归一化”,
“images”: “images/guiyihua.png”,
“model_name”: “normalization”,
“cols”: {
“1”: {
“text”: “是否保留原始列”,
“value”: true,
“type”: “checkbox”
},
“2”: {
“text”: “input框”,
“value”: “1”,
“type”: “input”
},
“3”: {
“text”: “选择表名”,
“value”: “1”,
“type”: “select”,
“id”: “optionSelect”,
“selectParams”: [{
“id”: “0”,
“name”: “所有字段”,
“value”: 1
}, {
“id”: “2”,
“name”: “two”,
“value”: 2
}, {
“id”: “3”,
“name”: “three”,
“value”: 3
}]
},
“4”: {
“text”: “选择字段”,
“value”: [“1”, “2”],
“id”: “selectfeild”,
“type”: “selectfeild”,
“feildParams”: [{
“id”: “0”,
“name”: “所有字段”,
“type”: 100
}, {
“id”: “2”,
“name”: “two”,
“type”: 1
}, {
“id”: “3”,
“name”: “three”,
“type”: 1
}]
},
“5”: {
“text”: “源表字段信息”,
“type”: “table”,
“feildParams”: [{
“id”: “0”,
“name”: “所有字段”,
“type”: “STRING”
}, {
“id”: “2”,
“name”: “two”,
“type”: “STRING”
}, {
“id”: “3”,
“name”: “three”,
“type”: “STRING”
}]
},
“componentExplain”: {
“type”: “explain”,
“text”: “归一化”,
“content”: “可以选择是否保留原始列,勾选后原始列会被保留,处理过的列重命名 可以选择是否保留原始列,勾选后原始列会被保留,处理过的列重命名”
}
},
“key”: -4,
“loc”: “360 -70”
}
],

sorry,I should have a screenshot




nodeDataAarry like this :

Ok, so you’re not using the typical DataInspector, but some very custom code.

When you call setDataProperty, what are the values for nodeCur.data.cols[obj] and selectVal?

Sorry but it’s very hard for us to debug code that isn’t specific to GoJS. I can’t really help you determine what’s going on as you are trying to pass values to your model.

I looked at it and changed the value of the canvas, and the top of the panel would change, and it would change as long as the canvas was dragged down by the same panel element, but I don’t know why.

Maybe you need to set Model.copiesArrays and Model.copiesArrayObjects. Or if your scenario is complex, you might need a Model.copyNodeDataFunction.

But I set up the same thing,
_designer.model.copiesArrayObjects = true;
_designer.model.copiesArrays = true;
_designer.model.setDataProperty(section, “value”, selectVal);

Click the node inside model to assign the right value through the data in the node. In fact, I just want to reassign the value to the left model every time the right value on the right is reassigned to the left model, through the setDataProperty attribute. The node that clicks model can update the value on the right. That’s the problem. Can you give me a better solution? Thank you very much!

Sorry, but it’s not clear to me what you’re trying to do from your description. As I said, since you have so much custom code, we can’t really debug what’s going on with your app. Maybe you should simplify it as much as possible to see if you can figure out what is causing the problem.