mxgraph添加cell

要向 mxGraph 中添加 cell，需要创建一个 mxCell 对象，并将其添加到 mxGraph 中。以下是一个示例代码片段，演示如何创建一个简单的矩形 cell 并将其添加到 mxGraph 中：

// 创建一个矩形 cell
var rectangle = new mxCell('My Rectangle', new mxGeometry(0, 0, 100, 50), 'shape=rectangle');

// 将矩形 cell 添加到 mxGraph 中
graph.getModel().beginUpdate();
try {
  graph.addCell(rectangle);
} finally {
  graph.getModel().endUpdate();
}

在这个例子中，我们使用 mxCell 构造函数创建了一个新的矩形 cell，该 cell 的标签为 'My Rectangle'，其几何位置为 (0, 0) 并且宽度和高度分别为 100 和 50。我们还将样式属性 'shape=rectangle' 传递给 mxCell 构造函数，以确保矩形的形状正确。

然后，我们使用 mxGraph 的 addCell 方法将该 cell 添加到图形中。请注意，我们在添加 cell 之前使用 beginUpdate 方法开始了一个事务，并在添加完成后使用 endUpdate 方法结束该事务。这是因为在 mxGraph 中添加、更新或删除 cell 时，必须处于事务中。

相关问题

mxgraph 添加html Table

要在 mxGraph 中添加 HTML 表格，可以使用 mxCellRenderer 和 mxUtils 工具类来创建自定义的 HTML 元素。下面是一个示例代码，可以将 HTML 表格添加到 mxGraph 中的一个单元格中：

// 创建一个 mxCellRenderer 对象
var tableRenderer = new mxCellRenderer();

// 创建一个包含 HTML 表格的 div 元素
var tableDiv = document.createElement('div');
tableDiv.innerHTML = '<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr></table>';

// 将 div 元素转换成 mxCellRenderer 渲染器所需的 mxCell 对象
var tableCell = new mxCell(tableDiv, new mxGeometry(0, 0, 200, 200), 'html');
tableCell.vertex = true;

// 使用 mxUtils 工具类将 mxCellRenderer 渲染器应用到单元格中
tableRenderer.initialize(null);
tableRenderer.init(tableCell);

// 将渲染的单元格添加到 mxGraph 中
graph.addCell(tableCell);

上面的代码中，我们首先创建了一个 mxCellRenderer 对象和一个包含 HTML 表格的 div 元素。然后，我们将 div 元素转换成 mxCell 对象，并将其添加到 mxGraph 中。最后，我们使用 mxUtils 工具类将 mxCellRenderer 渲染器应用到单元格中，以便在 mxGraph 中正确显示 HTML 表格。

需要注意的是，mxGraph 中的 HTML 渲染器会自动将 HTML 元素转换为 SVG 元素进行渲染。因此，在使用 mxCellRenderer 渲染器时，需要将渲染的单元格类型设置为 'html'，以便 mxGraph 可以正确处理 HTML 元素。

mxgraph 添加HTML元素

要在 mxGraph 中添加 HTML 元素，可以使用 mxCellRenderer.prototype.createHtml() 方法。这个方法将创建一个包含 HTML 元素的 div 元素，并返回该元素的引用。您可以将该元素添加到 mxGraph 的容器中，并使用 mxGraph.getModel().getCellGeometry(cell) 方法获取元素的位置和大小信息。

以下是一个简单的示例，演示如何在 mxGraph 中添加一个带有文本框和按钮的 HTML 元素：

var cell = new mxCell();
var parent = graph.getDefaultParent();
var vertex = graph.model.add(parent, cell);

var div = mxCellRenderer.prototype.createHtml(vertex);
div.innerHTML = '<input type="text" value="Hello World">' +
                '<button onclick="alert(\'Button clicked!\')">Click me!</button>';

var geo = graph.getModel().getCellGeometry(vertex);
geo.width = 150;
geo.height = 50;

graph.container.appendChild(div);

在这个例子中，我们创建了一个新的 mxCell，将其添加到 mxGraph 的默认父级元素中，并将其视为一个顶点。然后，我们使用 createHtml() 方法创建一个包含文本框和按钮的 div 元素，并将其添加到 mxCell 中。最后，我们使用 getModel().getCellGeometry() 方法获取顶点的位置和大小信息，并将 div 元素添加到 mxGraph 的容器中。