mxGraph自定义用户对象与xml子元素读写

时间:2017-05-16 02:48:04

标签: jquery xml mxgraph

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

mxCell with custom user object value

自定义用户对象的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元素Description和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)

1 个答案:

答案 0 :(得分:1)

在开始时,有一个关于jQuery xml选择器和MS XML DOM对象方法的讨论。在对MS XML DOM知识进行一些研究工作之后,thers是一个很好的读写用户对象的解决方案。

//读取方法

    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用户的自定义用户对象。