Flexmonster实时动态更新工具栏内容指南

const pivot = new Flexmonster({
  container: "pivot-container", // 容器ID
  toolbar: true,                 // 确保工具栏已启用
  // ... 其他Flexmonster配置，例如报表或数据源
  report: {
    dataSource: {
      data: [
        // 示例数据
        { "Category": "A", "Value": 100 },
        { "Category": "B", "Value": 150 }
      ]
    },
    // 初始工具栏配置（可选，可以在这里定义一些自定义按钮）
    // toolbar: true, // 可以在这里或构造函数中设置
    // customizeCell: (cell, data) => { /* ... */ }
  }
});

let currentTabs = pivot.toolbar.getTabs();

pivot.toolbar.updateTabs(updatedTabs);

const pivot = new Flexmonster({
  container: "pivot-container",
  toolbar: true,
  report: {
    dataSource: {
      data: [
        { "Category": "A", "Value": 100 },
        { "Category": "B", "Value": 150 },
        { "Category": "C", "Value": 200 }
      ]
    },
    // 可以在此处定义初始的自定义工具栏项，以便后续修改
    options: {
      // 示例：定义一个带有自定义菜单的按钮
      toolbar: {
        items: [
          {
            id: "fm-tab-custom-button",
            title: "我的操作",
            icon: "fm-icon-settings",
            menu: [
              { id: "initial-item-1", title: "初始菜单项1", handler: () => alert("初始项1") },
              { id: "item-to-remove", title: "待移除项", handler: () => alert("此项将被移除") }
            ]
          }
        ]
      }
    }
  }
});

/**
 * 动态更新Flexmonster工具栏的函数
 */
function updateFlexmonsterToolbar() {
  console.log("开始更新工具栏...");
  let currentTabs = pivot.toolbar.getTabs(); // 获取当前工具栏配置

  // --- 1. 删除特定选项卡 (例如：移除"Connect"选项卡) ---
  let updatedTabs = currentTabs.filter((tab) => tab.id !== "fm-tab-connect");

  // --- 2. 在现有自定义按钮的菜单中添加/删除项目 ---
  const customButtonTab = updatedTabs.find(tab => tab.id === "fm-tab-custom-button");
  if (customButtonTab && customButtonTab.menu) {
      // 添加一个新的菜单项
      const newItemId = "my-new-dynamic-item";
      if (!customButtonTab.menu.some(item => item.id === newItemId)) {
          customButtonTab.menu.push({
              id: newItemId,
              title: "动态新增项",
              icon: "fm-icon-add",
              handler: () => {
                  alert("动态新增项被点击！");
              },
          });
      }
      // 删除一个菜单项 (例如：id为"item-to-remove"的项)
      customButtonTab.menu = customButtonTab.menu.filter(item => item.id !== "item-to-remove");
  } else {
      // 如果没有找到自定义按钮，可以考虑添加一个新的主选项卡
      if (!updatedTabs.some(tab => tab.id === "fm-tab-new-dynamic-feature")) {
          updatedTabs.push({
              id: "fm-tab-new-dynamic-feature",
              title: "新动态功能",
              icon: "fm-icon-export",
              handler: () => {
                  alert("新动态功能选项卡被点击！");
              },
          });
      }
  }

  // --- 3. 修改现有选项卡的属性 (例如：改变"Report"选项卡的标题) ---
  const reportTab = updatedTabs.find(tab => tab.id === "fm-tab-report");
  if (reportTab) {
      reportTab.title = "我的定制报表";
  }

  // --- 4. 应用更新 ---
  pivot.toolbar.updateTabs(updatedTabs);
  console.log("工具栏已成功更新。");
}

// 示例：在Flexmonster就绪后，可以触发一次工具栏更新
pivot.on("ready", function() {
  console.log("Flexmonster枢轴表已就绪。");
  // 假设在页面加载完成后需要进行一次初始的动态调整
  // updateFlexmonsterToolbar(); // 可以在这里立即调用
});

// 在实际应用中，您会在特定的用户交互或数据事件中调用 `updateFlexmonsterToolbar`
// 例如，点击一个保存按钮后：
// document.getElementById("saveDataButton").addEventListener("click", () => {
//   // 模拟数据保存操作
//   console.log("数据保存中...");
//   setTimeout(() => { // 模拟异步操作
//     console.log("数据保存完成！");
//     updateFlexmonsterToolbar(); // 数据保存后更新工具栏
//   }, 1000);
// });