0

我正在使用 Syncfusion 创建拖放字段。每个 Dropped 字段（节点）都是HTML NODE并且它有一些HTML elements例如 Select 和 input 等。添加所有必需的节点后，用户可以单击提交功能单击后我想找到所有节点和值存在于节点的每个 HTML 元素。

  1. 我能够获取节点但无法找到其中存在的值。
  2. 在元素的拖放中，我想为每个节点添加不同的文本。我怎样才能做到这一点？

HTML：

<div>
    <div id="ToolbarItem" ej-toolbar e-datasource="drawingToolsList" e-fields-tooltiptext="tooltiptext"
         e-width="700px" e-height="33px" e-fields-id="id" e-fields-spritecssclass="spriteCss" e-click="onItemclick"
         style="background-color: #ebeced; border-bottom-color: #bbbbbb; border-top-style: none; border-left-style: none; border-right-style: none">
    </div>
    <div>
        <ej-diagram id="diagram" e-height="700px" e-width="100%" e-nodeclick="onClick">
        </ej-diagram>
    </div>
</div>

<div id="htmlTemplate" type="text/x-jsrender">
    <div>
        <select ng-model="Dynamic.optionValue" class="form-control">
            <option class="dropdown-item" value="" selected> Choose Options</option>
            <option class="dropdown-item" ng-repeat="option in options" value="{{ option.value }}"> {{ option.text }} </option>
        </select>
        <input type="text" ng-model="Dynamic.ObjectCount" placeholder="number of objects" class="form-control"></input>         
    </div>
</div>

<button id="AddNewField" ng-click="SubmitAllFields();" class="btn btn-success"> Submit </button>

Angularjs：

var drawingToolsList = [
    {
        id          :   "Html_Tool", 
        tooltiptext :   "Html",
        spriteCss   :   "icon-HTML toolBarIconStyle",
    },
    {
        id          :   'Connector_Tool',
        tooltiptext :   "Connector",
        spriteCss   :   "icon-connector toolBarIconStyle",
    }
];

//On item click drag and drop the elements to canvas
$scope.onItemclick  =   function(args){
    var option      =   args.currentTarget.id;
    switch (option) {
        case "Html_Tool":
            diagram.model.drawType  =   { type: "html", templateId: "htmlTemplate", textBlock:"Hello" };
            $scope.counts.push(counter);
            counter++;
            $scope.$apply()
            break;
        case "Connector_Tool":
            diagram.model.drawType  =   { type: "connector"};
            break;
    }
    var tool = diagram.tool();
    diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })
}

//On click of node find the values
$scope.onClick  =   function(){
    console.log("FJFJF");
}

我正在尝试按照以下链接执行： http: //ngjq.syncfusion.com/#/diagram/drawingtools。我只使用该HTML元素，并删除了所有其他元素。

该页面看起来像这样： 在此处输入图像描述

4

1 回答 1

1

默认情况下，在节点中，我们只绑定节点属性值。我们无法绑定节点中使用的 HTML 内容值。但是，通过使用节点 addInfo 属性，您可以存储文本值。addInfo 属性用于存储节点的附加或自定义信息。编辑文本框并在文本框外单击后，将触发图表的 selectionChange 事件。在该事件中，获取文本框的值并将其绑定到选定节点的 addInfo 属性。请参考以下代码示例

函数 selectionChange(args) {

    if(args.state === 'changing' && args.changeType === 'remove') {
     node =  args.oldItems[0];
    } else if (args.state === 'changed' && args.changeType === 'remove') {
      debugger
      node.addInfo = document.getElementById("text").value;
    }
    
  }

视频演示：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/Selection-Change-694740211

在 addInfo 中添加值后，您可以通过节点 addInfo 属性获取模板的值。

我们已经为您的要求准备了样品。请在下面的链接中找到示例

示例：http: //jsplayground.syncfusion.com/tawdhvwg

于 2020-07-27T14:45:27.820 回答