Windows Azure Pack 管理ポータル拡張機能でグリッドを表示する方法

  • [アーティクル]

 

適用対象: Azure Pack Windows

グリッドは、ユーザーにデータの一覧を表示する基本的な方法です。 複数選択、列の並べ替えと並べ替え、アイコンとテキストの表示、定義されたデータ ソースからの自動更新がサポートされています。 一般的なパターンは、ユーザーがタブを選択したときにグリッドを表示する拡張機能です。

ユーザーがタブを選択したときにグリッドを表示するには

  1. タブの開いている関数に次のグリッド コードを配置します。

    // This function has been set to be the opened function earlier
// For this to work, there should be a <div> in your template for the tab with a class of "gridContainer"
function loadTab(extension, renderArea, initData) {
  // Create a dataset so the client-side framework knows how to get the data for refreshes
  var localDataSet = Exp.Data.getLocalDataSet(DomainTenantExtension.Controller.listOwnedDomainNamesUrl),
  // Define the columns in the grid. A number of pre-defined types exist.
  columns = [
    { name: "Name", field: "Name", sortable: false },
    { name: "Status", field: "Status", type: "status", displayStatus: waz.interaction.statusIconHelper(statusIcons), filterable: false, sortable: false },
    { name: "Type", field: "Type", filterable: false, sortable: false },
    { name: "Expires", field: "ExpiryDate", filterable: false, sortable: false, formatter: dateFormatter }
  ];

  grid = renderArea.find(".gridContainer")
    .wazObservableGrid("destroy")
    .wazObservableGrid({
      lastSelectedRow: null,
      data: localDataSet.data,
      keyField: "name",
      columns: columns,
      gridOptions: {
        // Function to call when a row is selected. Optional.
        rowSelect: onRowSelected
      },
      // If the grid is empty, a template can be rendered instead, typically suggesting to the user that they create a new resource
      emptyListOptions: {
        extensionName: "DomainTenantExtension",
        templateName: "domainsTabEmpty",
        arrowLinkSelector: ("{0} .dm-new-domain-link").format(renderArea.selector),
        arrowLinkAction: global.DomainTenantExtension.CreateWizard.showCreateWizard
        }
      });
    }

参照

Windows Azure Pack 管理ポータル拡張機能での一般的なタスクの実行