具有 xml 个子元素读写的 mxGraph 自定义用户对象

Question

在mxGraph 教程页面中，可以使用graph.insertVertex() 方法对自定义用户对象进行参数化。

自定义用户对象采用 xml 格式，由工作流编辑器示例中包含的 wfeditor-commons.xml 中的模板定义。

但是通过 HTMLCollection 构建子元素的更好方法是什么？下面xml是我自己定义的模板，如果某些值发生变化，我需要维护Description和ActivityType子元素。

<add as="task">
  <Activity label="Task" name="" code="">
    <Description/>
    <ActivityType type="TaskNode"/>
        <mxCell vertex="1"> 
            <mxGeometry as="geometry" width="72" height="32"/>
        </mxCell>
    </Activity>
</add>

通过这些代码访问子 xml 元素描述和 ActivityType 节点：

var model = this.graph.getModel();
var snode = model.getSelectedCell();  //to get current selected cell
var id = snode.id;
var label = $(snode).attr("label");   //get xml node attribute

var descriptionNode = $(snode.value).children("Description");
var descriptionTextContent = $(descriptionNode).text();    //get xml node text
var activityTypeNode = $(snode.value).children("ActivityType");
var activityTypeAttr = $(activityTypeNode).attr("type");   //get xml node attribute

我不确定这是不是通过HTMLCollection实现自定义用户对象读写的有效方法。

顺便说一句，如果自定义用户对象的子元素已经改变，需要保存。如何设置节点属性和文本内容值？改变这些值后，还需要调用set value方法来刷新用户对象。谢谢

model.setValue(cell, newValue)

Answer 1

一开始，关于jQuery xml 选择器和MS XML DOM 对象方法有一个混淆。经过对 MS XML DOM 知识的一些研究工作后，这是一个很好的读写用户对象的解决方案。

//读取方法

    var model = kmain.mxGraphEditor.graph.getModel();
    var snode = model.getValue(cell);

    var activity = {};
    activity.id = snode.getAttribute("id");
    activity.name = snode.getAttribute('label');
    activity.code = snode.getAttribute('code');

    var descriptionNode = snode.getElementsByTagName("Description")[0];    //child node
    if (descriptionNode) activity.description = descriptionNode.textContent;

    //activity type
    var activityTypeNode = snode.getElementsByTagName("ActivityType")[0];   //child node
    activity.type = activityTypeNode.getAttribute("type");

//写入方法

    var snode =  model.getValue(kmain.mxSelectedDomElement.Cell);

    snode.setAttribute('label', activity.name);   //set attribute value
    snode.setAttribute('code', activity.code);    //set attribute value

    var descriptionNode = snode.getElementsByTagName("Description")[0]; 
    if (!descriptionNode){
        descriptionNode = snode.appendChild(snode.ownerDocument.createElement('Description'));    //add child element
    }
    descriptionNode.textContent = activity.description;         //set element text

    var activityTypeNode = snode.getElementsByTagName("ActivityType")[0];
    activityTypeNode.setAttribute("complexType", activity.complexType);

这将使维护 mxGraph 用户的自定义用户对象变得容易。

具有 xml 个子元素读写的 mxGraph 自定义用户对象

mxGraph custom user object with xml children element read and write

xml

jquery

mxgraph