[{"id":"ff052704-1389-4029-bcdd-73c6cbe9f807","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8e72e33e-b4ab-4fb3-98fc-a0b148134aed","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c90d5fdf-420f-4978-8bf5-c9a2bb4334b3","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"900e6cab-065d-4f1c-844d-efa3c074e270","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"760b37c7-c713-4b24-b9ba-4bfe7d8437a6","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"89c707ed-9841-4e53-96fb-940cc3214804","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"64e2f4a3-2303-4bfa-8a93-6c23ef01de58","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"aa71a884-c5bc-4842-8d6a-873dfd645167","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2605431b-dc80-491d-886e-28981595d277","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"69e79655-e015-4f9a-a230-2a25c988c926","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a570c8e7-07a2-47da-965b-da44fd1fa5cf","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86662220-9b9e-4940-9ced-d22642ea49a8","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24769ecd-2b08-4a85-b318-4f533bbf8393","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a244ead7-a2c6-47a3-ac17-c5dbfa337362","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"04e73782-aa78-4dfe-a4f9-e72ed4c78a11","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4f41e22e-eb51-49e5-aeae-a42dd6bf352c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"790bc77a-9216-48fd-b8f9-fbc374ebb155","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"21c6131f-0f2d-41d1-9284-6ad9ee803c1f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ded3a22-15eb-49b8-a488-e83c2cd872eb","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"33638a1c-7196-42c1-a96d-38b2d9ba8ac4","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a0842a3-20b1-40c3-8e00-cd5941ffdf53","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6e6ac5b1-1501-4e28-89cc-525139488537","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b0576ca2-cb84-4390-9f95-9354ec20eda5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"55fd3bb8-18d4-4edb-9640-ca3a365b798f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dacc7931-6785-4675-be31-80930403cf7b","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"63c577e6-6cf9-497e-94e1-2307f7d3f498","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1b88a165-2563-437e-99bb-ae30bd4b56db","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"adf3817f-7667-4a4c-8a5f-767b0b7e1e3e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"3a083583-1d5f-492b-b450-34b2b5c775b8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5d37413b-3600-4da9-9700-feea54355f59","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a5a73576-16ea-4cbc-925c-ef547389eaa5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1126cfab-6210-4e28-bee0-02c113fb7a0c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"09a66339-64c0-415c-b142-0691587a8e4a","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"0baaf91d-84f6-404c-a487-735226b6d5b6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5b7aeac5-c755-426a-95c7-1ae8e547179a","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"57c94653-8893-403b-a5b1-0d1e33a0bd0f","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