Question

我在此元素中的addDetail按钮上显示一个表单。如何将数据绑定到此单元格并使用toJSon()方法将其发送到服务器？

// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------

joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [
        '<div class="html-element">',
        '<button class="delete">x</button>',
        '<label></label>',
        '<span></span>', '<br/>',
        '<input type="text" name="name"  placeholder="name"/>',
        '<button class="addDetail">+</button>',
        '</div>'




    ].join(''),

    initialize: function () {
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);

        this.$box = $(_.template(this.template)());
        // Prevent paper from handling pointerdown.
        this.$box.find('input').on('mousedown click', function (evt) {
            evt.stopPropagation();
        });
        // This is an example of reacting on the input change and storing the input data in the cell model.
        this.$box.find('input').on('change', _.bind(function (evt) {
            alert($(evt.target).val());
            this.model.set('input', $(evt.target).val());
        }, this));


        this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.addDetail').on('click', _.bind(function (evt) {
             addActionDetail();


        })
        );


        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);

        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);

        this.updateBox();
    },
    render: function () {
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        this.updateBox();
        return this;
    },
    updateBox: function () {
        // Set the position and dimension of the box so that it covers the JointJS element.
        var bbox = this.model.getBBox();
        // Example of updating the HTML with a data stored in the cell model.

        this.$box.find('label').text(this.model.get('label'));
        this.$box.find('span').text(this.model.get('select'));
        this.$box.css({
            width: bbox.width,
            height: bbox.height,
            left: bbox.x,
            top: bbox.y,
            transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
        });
    },
    removeBox: function (evt) {
        this.$box.remove();
    }
});

}

Answer 1

为了在元素上保存一些数据，您必须按照以下步骤操作：

在形状模型中添加一些elementData属性。
每次用户点击元素内的addDetail时，您必须拥有元素ID，从中提取elementData，然后呈现表单（您可以通过添加自定义事件来实现此目的听取你的论文）
点击提交表单时，添加一些自定义触发事件。
在图表上收听触发的事件，然后尝试通过ModelId查找特定的单元格并进行更新。

这是基本的想法示例：

1.你的形状模型：

joint.shapes.myShapes = joint.shapes.myShapes || {};

joint.shapes.myShapes.Element = joint.shapes.basic.Generic.extend({
    //basically the defaults function doesn't needed, because the set function adds that automatically.
    defaults: _.defaultsDeep({
        elementData: null,
    }, joint.shapes.basic.Generic.prototype.defaults),
    getElementData: function () {
        return this.get("elementData");
    },
    setElementData: function (elementData) {
        this.set("elementData", elementData);
    },
});

2.在你的论文初始化中，添加你的自定义事件监听器功能，请注意，您必须记住ModelId：

paper.on('addDetail:click', function (cell) {
    var elementData = cell.model.getElementData();
    elementData.ModelId = cell.model.id;

    formRender(elementData);
});

3.在提交中触发一些自定义事件，在元素模型中触发要更新的对象：

function formSubmit() {
    graph.trigger('custom:update', newElementData);
}

4.在图表中添加一些自定义事件监听器，通过setElementData添加ModelId来电话：

graph.on('custom:update', function (elementData) {
    var cell = graph.getCell(elementData.ModelId);
    cell.setElementData(elementData);
}, this);

现在您可以使用toJSon（）方法将其发送到服务器。

JointJS元素包含HTML按钮onclick show form

1 个答案:

这是基本的想法示例：