扩展新的菜单项 |
数据洞察支持扩展添加新的菜单标签页。基于提供的一系列接口，您还可以在新的菜单标签页中扩展左侧数据目录区，右侧主体工作区及右上角的工具栏图标的内容（详见：数据洞察界面组成）。
扩展菜单标签页前，请先阅读数据洞察 WebApp 扩展流程。本节仅介绍菜单标签页的扩展开发步骤。
第一步：在创建的菜单标签页 js 文件中，实例化 iDataInsights.Plugins.MenuTabsExtension，代码如下所示：
const menuTab = [{
id: "custom-tab-id",
name: '示例',
icon: "supermapol-icons-link"
}, {
id: "custom-tab-id2",
name: '我的',
icon: "supermapol-icons-link"
}]
const menuTabInstance = new iDataInsights.Plugins.MenuTabsExtension(menuTab);
其中：
id，菜单的id
name，菜单的名称
icon，菜单字体图标
注意：如果用户的id使用了 iDataInsights.Plugins.menuTabsExtension.defaultMenuTabsId 中的某一个，则会导致其对应面板按照系统默认模式展现。如果用户想要自定义各面板内容，请勿使用这三个id。
第二步：调用 initPane 初始化面板
const paneId = [{
id: "custom-tab-id",
catalogID: "custom-catalog-id11",
containerID: "custom-container-id",
}, {
id: "custom-tab-id2",//tabID
catalogID: "custom-catalog-id22",
containerID: "custom-container-id22",
}]
menuTabInstance.initPane(paneId)
其中：
id，创建实例时的菜单id（必须是创建实例时传入的 id 之一）
catalogID，该菜单id对应显示的左侧数据目录面板 ID
containerID，该菜单id对应显示的右侧主体面板 ID
第三步：创建用户自定义组件
function creatMyComponents() {
let catalogDom = document.querySelector("#custom-catalog-id22");
//左侧目录面板---添加按钮
let btnDom = createButton('custom-btn1', "添加数据");
btnDom.onclick = () => {
comComponents.openAddDataWindow();
}
catalogDom.appendChild(btnDom);
}
// 向指定容器添加用户自定义组件
menuTabInstance.createComponents(creatMyComponents);
其中：
creatMyComponents，用户自定义创建组件的函数
openAddDataWindow，数据洞察提供的 CommonComponents 的实例方法，用于打开添加数据的弹窗
第四步：调用 addCustomToolBarBtn 添加用户自定义工具条图标按钮
const myToolBarBtn = [{
id:"custom-my",
text: '我的',
func: function () { console.log('我的') },
hasText: true,
icon: "supermapol-icons-link",
otherClass:'',
}, {
id:"custom-btn",
text: '示例',
func: function () { console.log('示例') },
hasText: true,
icon: "supermapol-icons-link",
otherClass:'',
}]
menuTabInstance.addCustomToolBarBtn("custom-tab-id2", myToolBarBtn);
其中：
"custom-tab-id2"，菜单tab的id
myToolBarBtn.id：按钮id
myToolBarBtn.text：按钮名称
myToolBarBtn.func：点击按钮时要执行的函数（点击事件）
myToolBarBtn.hasText：按钮图标是否要显示按钮名称
myToolBarBtn.icon：按钮字体图标
myToolBarBtn.otherClass：该按钮的其它类名
addCustomToolBarBtn：该接口默认，第二个参数传入的按钮，在该菜单页被选中时都需要显示
第五步：调用 setDefaultToolBarBtnShow 设置工具条图标按钮的显示与隐藏
menuTabInstance.setDefaultToolBarBtnShow(customMenuTabId, [tooBarBtnId1, tooBarBtnId2, tooBarBtnId3,tooBarBtnId4]);
其中：
第一个参数： 菜单tab的id
第二个参数： 该菜单tab上对应要显示的工具条图标按钮id数组（此数组id是数据洞察中已提供的图标按钮id，参见：defaultToolBarButtonId）；
注：如果不需要显示数据洞察提供的图标，则无需调用此接口
第六步：调用 setDefaultAddDataWindowTabs 设置添加数据窗口要显示的菜单页
menuTabInstance.setDefaultAddDataWindowTabs([menuTabID1, menuTabID2, menuTabID3]);
其中：
参数： 要显示的菜单页id数组，参见：defaultAddDataWindowTabsId
参考：