[{"id":"b66f8b1e-cc14-4e89-9679-abd5687d283d","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"569bb90a-ea68-46c6-96f1-ab151c120714","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5eb52f08-2d1a-4362-9ffc-4871bdc10f3f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"341dd607-b97d-4d70-bde2-53acda6b6c95","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"05349273-414f-4208-9ea2-c4fc8f4ea2cb","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86089f76-b778-4d52-821e-6f27de3df613","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b81e4fd6-1fc5-43a0-a258-b6e16a5cbec6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8aa8ce31-43e4-438e-951f-241608435260","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"37343f41-6ec2-4c7e-b21d-2cc18d5ce1e0","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5915e52f-64f8-4146-b8bd-81bead6324a3","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"836ba889-af9e-460d-a4cc-c24d922795f2","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4ae14b06-bb68-4394-a210-a46b8f028346","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d8f42066-e9dc-4411-bdcf-43b1a203370c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ef86f16-b1a0-49f7-9592-612b9be02b25","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b29c7775-a9a4-451e-a1b5-01d19ed5ca5e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"e56f3989-8f81-46af-90fa-a4813eeb976f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2526c963-f170-45a8-923e-91b0712a9810","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24575cf0-501a-44f9-8426-c40f8f4b5552","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1a6f8d7f-acd6-42be-8c4f-f464c6218381","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"82b176fd-5cab-498c-909e-8fa7d29c38d8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1708b3a9-4f37-44a8-8f0e-f9a2d2e5d940","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c9ac246e-29fb-4bc4-8231-8439795bb590","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"94f2a5c3-2539-436a-af75-23fbbd1a3957","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d99594f4-2d40-4df4-9419-ba2ca6aa3f7f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"fd66e72d-0f10-4f57-9807-6db26290ab2e","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8f344863-503d-4bc3-a594-3815e7d55f5c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"9be82601-de9d-4c18-948a-23ab6f4dd431","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6495f3c0-b463-47e0-b08a-ca949672211e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b4bede08-3f08-4839-ba4a-abc7ac195bde","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4afcdfc0-3ff5-4f2b-a223-f8fc042a5bbe","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"422062c4-fa40-4771-a86f-008efe6d86e5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d87e8013-86a7-4840-8d25-6f62e14eb4ac","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a6acedfd-4043-4c64-a5d1-aec3326df9e7","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dbdc0b24-06c4-48b9-8d6c-7455119dc773","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a3856849-954a-4cfc-96a6-382e530d3638","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a39306b-ffa5-433d-80a3-28e41f929b72","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
        
(Showing Draft Content)

自定义状态栏图标

需求:如何自定义状态栏图标


背景:

在在线表格编辑器中如何对状态栏实现图标自定义?

解决方案:

在线表格编辑器中,实际上也是给workbook绑定了一个StatusBar状态栏实例对象

通过findControl接口,就可以获取状态栏实例了。获取到这个实例之后,可以继续根据自己的需求进行定制。


接下来我们看下如何实现设计器上状态栏的自定义。

  1. 查找状态栏的实例

var statusBar = GC.Spread.Sheets.StatusBar.findControl(document.getElementsByClassName("gc-statusBar")[0]);
  1. 通过自定义状态项 GC.Spread.Sheets.StatusBar.StatusItem 类的onCreateItemView方法, 为状态条创建项目元素。这个方法可以被复写以自定制对应的状态项UI。

var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;

function Popup(name, options) {
  StatusItem.call(this, name, options);
}

Popup.prototype = new StatusItem();
Popup.prototype.onCreateItemView = function (container) {
  var item = document.createElement("div");
  item.style.padding = "0 3px";
  item.innerHTML = `<img src='data:image/png;base64,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' height='20' width='20'></img>`;
  container.appendChild(item);
  container.addEventListener("click", function () {
    alert("我是图标按钮");
  });
};

在上面的代码中,我们通过innerHTML插入img标签,同时为这个容器添加了点击事件。

最后,再将其添加到statusBar中

statusBar.add(new Popup('Popup', { menuContent: 'popup item', tipText: 'popup' }));

效果图如下:

image

下载附件即可查看完整demo。

statusbar.html


更多自定义状态栏的介绍,请参考学习指南自定义状态栏

作者: Grapecity.China | 审核:Richard.Ma | 更新时间:2023.12.14