流程图控件GoJS教程：Selection设置（下）

用户通常通过单击来手动选择Part，然后通过在后台单击或按Esc键取消选择它们。您可以通过设置Part.isSelected来以编程方式选择零件。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新试用版

数据绑定

选择任何节点，然后单击“添加”按钮。请注意，该图是如何自动以树状布局的。

像所有Part一样，装饰件也支持数据绑定。如果装饰的零件具有数据绑定（即，如果Part.data不为空），则该零件的所有装饰也将绑定到同一数据对象。

  diagram.nodeTemplate =    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },        new go.Binding("stroke", "color")),      $(go.TextBlock,        { margin: 5 },        new go.Binding("text", "key")),      {        selectionAdornmentTemplate:          $(go.Adornment, "Auto",            $(go.Shape,              { fill: null, stroke: "dodgerblue", strokeWidth: 6 },              new go.Binding("stroke", "color")),            $(go.Placeholder)          )  // end Adornment      }    );  var nodeDataArray = [    { key: "Alpha", loc: "0 0", color: "blue" },    { key: "Beta", loc: "200 50", color: "red" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  diagram.selectCollection(diagram.nodes);

注意每个装饰物与选定节点的data.color具有相同的颜色。

选择外观变化

添加选择装饰不是视觉上指示已选择零件的唯一方法。您还可以修改零件中一个或多个对象的外观。

一种方法是使用数据绑定。在这里，我们的数据绑定Shape.fill到Part.isSelected财产与转换器功能将布尔值设置为颜色字符串或刷子。我们还关闭了常规的矩形蓝色选择装饰。

  diagram.nodeTemplate =    $(go.Node, "Auto",      { selectionAdorned: false },  // don't bother with any selection adornment      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },        // when this Part.isSelected changes value, change this Shape.fill value:        new go.Binding("fill", "isSelected", function(sel) {          if (sel) return "cyan"; else return "lightgray";        }).ofObject("")),  // The object named "" is the root visual element, the Node itself      $(go.TextBlock,        { margin: 5 },        new go.Binding("text", "key"))    );  var nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "200 50" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  diagram.select(diagram.findNodeForKey("Beta"));

现在，当您选择一个节点时，其背景颜色将变为青色。

通常，当Part.isSelected的值更改时，您可以执行代码来修改Part 。在此示例中，我们将具有与先前示例相同的副作用。

  function onSelectionChanged(node) {    var icon = node.findObject("Icon");    if (icon !== null) {      if (node.isSelected)        icon.fill = "cyan";      else        icon.fill = "lightgray";    }  }  diagram.nodeTemplate =    $(go.Node, "Auto",      { selectionAdorned: false,  // don't bother with any selection adornment        selectionChanged: onSelectionChanged },  // executed when Part.isSelected has changed      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "RoundedRectangle",        { name: "Icon", fill: "lightgray", strokeWidth: 2 }),      $(go.TextBlock,        { margin: 5 },        new go.Binding("text", "key"))    );  var nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "200 50" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  diagram.select(diagram.findNodeForKey("Beta"));

在此类事件处理程序中可以执行的操作受到一些限制：您不应选择或取消选择任何部分，也不应在图中添加或删除任何部分。

====================================================

想要购买GoJS正版授权的朋友可以咨询官方客服

标签：