TableList 微件

尝试一下在线预览

此示例演示如何使用 TableList 微件进行编辑。在此示例中，此微件中显示了两个 FeatureLayer 表。一张表保存在 WebMap 中，而另一张表通过调用 fromPortalItem 方法并传入关联托管表的 itemId 在应用程序中动态添加。

该微件采用包含表集合的地图属性。把这些表读取为图层的集合。为了让微件识别表是否有效，要素图层的 isTable 属性必须返回 true 。

如果一个表是动态加载的，它必须首先被加载并添加到映射的表集合中。下面的代码片段展示了如何处理这个问题。

Layer.fromPortalItem({
  portalItem: {
    // autocasts new PortalItem()
    id: "6aa49be79248400ebd28f1d0c6af3f9f" // loads a feature layer table from AGO portal item
  }
}).then(function(layer) {
  layer.load().then(function() {
    // Must first load the layer and then check if it's a table
    if (layer.isTable) {
      webmap.tables.add(layer); // add this table to the map's tables collection
    }
  });
});

在实例化微件时，传入一个有效的地图。在本例中，我们将其设置为一个包含要素图层表的 WebMap 。

const tableList = new TableList({
  // Two tables should display, the first one is stored within the webmap,
  //ie. Chicago public health statistics. The other is dynamically loaded
  //from the portal item, ie. Chicago Covid daily cases deaths and hospitalizations.
  map: webmap, // get access to the map which has the collection of tables
  selectionEnabled: true,
  listItemCreatedFunction: createActions,
  container: document.createElement("div");
});