【功能进阶】如何在一个单元格上创建多个自定制按钮

背景：
通过cellbuttons功能在同一个单元格上设置多个自定制按钮，每个按钮点击后可以触发不同的事件。常见于grid表格中的操作列，常用于对改行数据进行增删改查操作。
核心代码：
通过cellbuttons设置单元格上的列表按钮，代码中的图片采用了base64的编码便于序列化操作。

1.    let style = new GC.Spread.Sheets.Style();
   
2.                         style.cellButtons= [{
   
3.                                         imageType: GC.Spread.Sheets.ButtonImageType.custom,
   
4.                                         imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC",
   
5.                                         imageSize: {
   
6.                                                 height: 20,
   
7.                                                 width: 20
   
8.                                         },
   
9.                                         hoverBackColor: "#3390FF", // customize the hover backColor
   
10.                                         buttonBackColor: "#82BC00", // customize the button backColor
    
11.                                         command: (sheet, row, col, option) => {
    
12.                                                 alert("do something you want to do 1");
    
13.                                         },
    
14.                                         position: GC.Spread.Sheets.ButtonPosition.left
    
15.                                 },{
    
16.                                         imageType: GC.Spread.Sheets.ButtonImageType.custom,
    
17.                                         imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAFm5JREFUeF7tXWtsXMd1/ube3bvc5ZKiSEpKUrdVEkq2aVtwoAKFC6Qw2h99IC3aogwSJEVRpHDRBjasWH4odetVHMuxa9mu3TiIE6Ao0B+F3X/90RYBGgcF6qKNAlU2KT9o1wFU23qQJs3lLvfu7j3FXIoWRe3d+5r7PgQMGNiZOed853yaO3NmzgjwHyPACDgiIBgbRoARcEaACcLRwQgMQYAJwuHBCDBBOAYYgWAI8AwSDDfuVRAEmCAxOXruBdLn56GbyxC9Kdi4f3wVwty1+f/dJkRvdPP/5V9pHVSug+T/n18FlXZt/n9pCWRMghYEemgIKyb1CyuGCaLY9bc3qPQOUKoRSoZAqbWGUklDicpXgl+VSB2weoSeaaFX76PX6qC3+D56eFH0Vcko+jhMkBARMDdH+svXwZgmVJpVlMsCpRDDKesquqCehZ41BhOT6Cwuo8uzTTB4mSA+cJOzQ2cV5fMGDE2DkRZCeDGh30FX6Oh0aui+A5hMGC+oQf20701sRloRieu+hpF9BozVjBHCDWEimL0KulhCZ/FZ0XFrX9TfeQYZ4PmZZ6hi/R9G6lVUuib0vAdHl9DT+9jQq+gsHBdm3u31Yx8T5DJasw+RYS5jBHVUsvTp5MfZXtrKmUUz0NkrsPFSQ/S89Mlzm2ITZI702VlUe02M6BWU8+zoILZJoowAG6caaAPC3mYu2l8hCSIX2+eWUBsZQ7UPaEVzul975SdYrYvWmTraRVvcF4ogh79L5Q/eRm3EQjWKvITfwMta+7KJfm8UrYUFtIuSaykEQWbupEp9CtWOiWrWgjKN+soE5cYa2tdNoZX3dUquCSKJUR1FradhJI2BlnWdZEJyQ0P756pYzytR8kmQBmkzQL1sYjTrQZgF/eWMoplonnlCrGdBXz865o4ghxtUszoY3UjJsQ8/zsh6Wzv52EQzT4nH3BBE**N/0WdP6eSp1nXwPoi0MzDjlf2CUIkrr8fda2EevKhwRpsISB3vMp1NE81RCvLqGSaIHIRrk1hTDc5yZfWICxZ2JgawVpWF/GZJcjsQ1SnLsbSGhis1xUE5Gyy3MfauadEO2u4ZI4g8mbeaz/BOK81shZq8nYXmq8/LtaypHmmCLK/QSPjTYx3jfyfsM1SEPnR1T7f9S7WTj0vun76JdU2MwS5/j4a44V4UmGiVq7Mm1QMrGVhAZ96gsiDhRdXMW5VUVHrJh4taQQ6fbTefkysJq3HMPmpJoi8o1FaxwR/UqU5hMLpprXRmX8SH0Ck8zh9agki1xu1dUzwqdtwAZiF3vK+/BtjWE5jYjGVBLntCFVXqpjIgnNZRzUIyK3g63+KpRdTVrIodQSRZ6laJnapgZ1HyRIC8nTw3lFcSlNSMVUEOXSURrsGxrPkVNZVPQK1S7iUlm3g1BCEM+PqAy3LI4oyltJQYSUVBOGZI8uhHJ3u+wxcTPpzK3GCyN2qqond0cHMI2cZgZvfxIUkF+6JEkSexi2PYTLLDmTdo0fgrIHzSW0BJ0YQmQSkLqaih5clZB0BuQV8po5LSZAkEYLI23+tn2I6645j/eNDQF7nfe0EluPOuMdOkMN3ULkzjUku2BZfcOVFkrx89cq3sBJnlcdYCWJXNOxgd5Fr3+YlWJOyY5Mk4oO45MdKkJuO0CSfyo3LtfmVE+fFq9gIwvc58huwSVi21sZKHFd4YyEI5zqSCKF8y5Q7W5N1LEedSIycIPIO+ev/hSm+05HvgE3CujjWI5ET5JYHaDcXWEgifIohU5SxtnBcNKOyNlKC8AHEqNzG425HoLuG5ajKnUZGED5GwkEcFwLygZ/FCpaiyLRHQxAicfA4prjiYVwhwnJqfbRORVAAIhKC8JYuB2wSCLQNfPBOQ2yolK2cIHzOSqV7eCw/CNjFH05iSeVRFOUE4V0rPy7ltqoRUL2rpZQgXHBBtbt5PL8IyMIP1VUsqbrTro4gDdI+08EUv+zk16XcXjUCKhOIyggy06BxfhNQtat5vKAITLSx8rKC5xaUEIRzHkHdyP2iQkBVbkQJQXhhHpWbedwwCKhYsIcmCM8eYVzIfaNEwL7L/le4GOaabmiC3NqgiY6JapSG8tiMQFAEyiY+DPN+eyiCcFIwqNu4X1wI2GuRR8XFoPJCEeRT99Ouio5aUOHcjxGIA4GagdWgr1kFJogswHBhHdP8fkccLmYZYRCwSwY9KpaCjBGYIDN30nh5DKNBhHIfRiBuBILeYQ9GkDnSbz6Aaa5tFbebWV5QBOTruvMNsey3fyCC8E1BvzBz+zQgEOTmYSCCHLyHpvUKymkwmnVgBLwiEORVXd8E4aLTXt3B7dKGgJ04fAIX/dwX8U0QXpynze2sjx8E/N469E+QY7SHa+v6cQm3TRMClRbap58WK1518kWQmWeoUn6fH7zxCi63Sx8COmC9auCi1woovgjCmfP0OZw18o+An8y6d4IQiUPHsadrQvevEvdgBNKDgJ8bh54Jct0Rqo5VMZEeM1kTRiA4Ajffigsvfl703UbwTJDD99OuVgEOJgoLvwFgFsBBQnHeUNSA8xCYJ8JbpOFf3QIn6797/czyTJCZIuxeWfiGAP44685XoP+/kYYvKxgntUN43c3yRBB5cve8iT2ptVaBYsLCuwqGydUQpOETuTJomzFe74l4Ikje610JC38P4FfyGgxB7SLg+9Dwl0H7p73fPgMX3R7g8USQPF+rFRZ+DcDfDnImAf+Rdier0k8Av+Qw1ldIwz+rkpOmcbysQzwR5NBR2pvXF6I0wp8R4cEdjjtJGk6myZlx6CIs3APY/23/yy0WFQPt043hWXVXguR9/aFZ+DYBv7s9IvL87e1GtAFrsX8iDX/i1i+Lv28eXhQXhunuSpC8rz9g4R+3f17Yn1Uafj+LDleic8HwcMuHuBLk1rtpolPLcVmfggWEK4kKhodbiVJXguQ+/1GwgGCCXI2A2yUqV4Lc+HX6uCuoWW4QgCBEOFjSca5voZVl0wfqHgCPLGPgVvFkKEHyvkC3HeszIISF7wL4LUC+ZIRnScPzqQ4QDXV0ca+QeR6BTxNwHzQ77zP4zyceqbbdg3L28fcT4rxT06EE2d+gkaqJ3R7kZLeJj4AQlp1MvCq4hMAPyMJTpON02kAQwK+SZZPj0Ee6ybNWOj7LBLmCwFkD553uhwwlSCGql/ggiAZ8gSw8uTO4BNAmsknyN6kgiYABSQzCVwfpM3Qb2wceqbBVgRKijKWF48IcNNRQguQ5g/4RGD4CQq49NLI/qQ4O9IvAjwTwpCXw3wr8FmgIAXyWyCbHLwwkB/AcNHyTZ5ArCAzLqA8lSCHK+/ggiIRUE/hZkhlnwucd/sXpX55NrplpAkW8n06bn1NHHLsIPEkCTwwd0iceftRLa9uugfXFhvjQ9wwyey99LPe1d4MGhIUvaMA9BPyMg+NfJg2PAPhJ5IFB+EWxeVzmsMOscUYjPGjp+LGrLkHxcB04vQ20NjrzTw2uuug4g8y9QPqrp7E3vWYp0ixMQPTw80K3ZxPHzLsA/trS8Jgiba8ZRhDuAuGBIbPGMyTwLc/yw+DhWUi6Gg47cuJIkMIUiFMQEBrhi0Q4CsApZ3RKAA9aGv5HWWgQPiMsPAKBWx3GnCfgL6DhP33JVICHL3kpaXz2hHjP1ydWYZ5WUxQQ1McnhYZ7BOH3nHxOAt+GsD+7Qv1pFr5KwJ87DSIEvmMJPBxIiCI8AslOsJPTVq/jDFKIHIh0iOKAEIQvYXM22efg71cs4KjQ8IrveLBwE4AnBXCL06wBwjdIx7/7Hnurg2I8AusRc8ezb+ICXry2iAMTJIKAEH182r5XIfA7qtYGoo+7IJzXGiTwPQg8FDquIsAjtE4xDOB0u9CRILcdoepKEcr8RBkQhD+Qs4nA4Pv8AnidNPtzacExBvo4IASeA+zZY9DfvCCcsHT8UEkcRYmHEgWjGcQpWehIkNzfA4npk0IQZi5/cv2249qE8DR0PL7zd41wNxHuG7Km+Z5loKF1QcrCpqAEcXo7hAkSU0AIwh9eJsqUQzC/aQF3CA2vQ+CA6NuHIm9wmjWI8Dh0/EAZMWL6B0O5vooGdKr67kiQQ0dptGtgXJH89A4TE0EkAPKoitj85PrcEEDkXfid98I/ai7XGsLCN0lHNxJQY8QjEv0DDup03GRYHqROXYwFlJedbgkEhCD8kU0C8lUpfx4CJ0ngXyIFNwE8IrXH4+BlEx+eeUKs72zOBEkoIDTgBrLs7eDfdPOhnDV0HY/FckErITzcMIj6d1HG2sJx0WSC7EQg6YDo4ysywQgaWBg8nlljOyZJ4xE1ExzG9z2D8BokPk8JWSx7czb59S2pctawdJzULAw8ZRqZdgUliO81CG/zRhaCjgMLy77Ke5AIP4aOH8WvgfqTBYnYEECo710sJkgAlPPQpaAziO88SGEezCloQDhyuaB4+M6k82HFPEwHAWwoKEF8n8ViggQIrjx0KShBfJ/m5fsgeYj2ADYUlSCP4H0Icc2ZNr5RWNCA4DXI1Qj4vlGIBmk3mo6XfgL805TSLkyQqx1TQDyGPcc2tOzPzV+nfX1AS2loq1GrgAExFLgC4jHs3fShBLnhGE0JWaUvz38FDAgmyI5Js4fm64+LtUG4DCXIp+6nXZW8v43OBCn8J9ZaGyvnnhJt3wQpxHksJkjhCVK7hEunnhcD79cMnUEKsdXLBCk8Qc6ewPvAtVu8EpjhD+jMkX7jgZxXV2SCFJogbg95ur4wlfv6vEyQQhNkWF1e9xlEnr2+h6b1Csq53chighSaIN01rC8+O7iyuyeCzDRovGxilAmSWwQKTRCneyBboLh+Ys08Q5Xy+76KC2QrkngGKTRBhj2/5mkGyfuRE2HZBdu+vD1KtBJm+xZWssX08NpqFkYJePOqkQReIIG7w4+evhH6HXTfOCkuDdPMdQaRnfO8DrFL8NA1FdcXhIavWcCZ9Lk1Go3kA6VC4GEifHK7BAIehobvRCM12VGtIRl0z59YsuH199GYVkI9WXMikm7hlwXwDxGNnvlhifDFxO7HR4ye2/rD2ycWgLxfnhJ9PDe0EnvEjkrt8ALHSODvUqtfSMXc1h+eCZL3dYgNhIV3Q+Kdr+4CPySBL+XLqCvWEMF87VGx5GafpzWIHKQgJ3v/VMhny4r99x4B38/rumPLtW75D19rENk49/mQK6SYuvwe+vUAnCqx545CJPAWBBb7Ft7SNQw82Zono72sP7x/YkmC3EmV8liO8yF58j7bMhQBHbBeNXARDWG5QeX5E8ueRY7RnrJAyW1Q/p0RSDMCtT5apx4Tq1509EWQXG/3ekGL2+QCAa+fV74+sWTjwrydnoswYCMGIeB2vH1nH18zSGF2szi2cotA18D6YsP59G5ogsw+RMV4eSq3IVJsw5yKVDuh4nsGub1BpfPm4GeNiw09W592BPoGum80hh9ODD2DyAFuatCkZaKSdkBYP0ZgOwJeDicqIUhh3g7h+MoVAsOqlyj7xNociMTMMUxzTiRX8ZNrYyottE8/LXzf8fG9BtlCsRA1s3IdMsUyzumBHDcUAhNEnvA91MR014DuJoR/ZwSSRGBY7V03vYITZDNxyFu+bgjz74kj0P0YlhfvEp0gioQiCOZIv/kApnNfAT4IstwnFQhoBjrzDbEcVJlwBNk85TteHstxWaCgyHK/VCAwrDC1FwVDE0QmDi+sY5rKLmVMvWjDbRgBhQh4vTU4TGRogsjBC/FMgkLH8VDxIFAzsHqqIVphpCkhiJxFLpmY4rVIGFdwX5UIuNXc9SpLCUGkMM6LeIWc28WBQNC8x07dlBFEDlyIwg5xeJdlhELAa0EGL0KUEoTvrXuBnNtEiYD9Ym0FS17um3vRQylBpMACVT/xgi+3iRmBiTZWXnZ4bzCIKsoJwkdQgriB+6hAIMyREif56gkCgI/Dq3A3j+EHAdEFVVex5PQYp5+xtreNhCBSwC0P0O6ehpGginE/RsAPAqKMtYXjoumnj5e2kRFE5kaWm5jk075e3MBtwiAQxafVlj6REUQKuO4IVceqmAhjPPdlBIYhIMv4TNax/FJD9KJAKlKCSIW52FwUbuMxtxAIexjRDcnICSIV4CIPbm7g34MgoDIhGOsu1k5hh++gcmcak3xWK0gYcJ9BCKg4qesF2VhmEKkIb/16cQe38YKArM5euYRl1Vu6g2THRhApnI/Fe3E/t3FDQMUxdjcZsexiDVLipiM0aVW56JxXB3G7qxEIUvwtDIaxziC2okTi4FFM6RWUwyjOfYuHgJ93PVShEz9BpOZcMkiV/wozTpTJwGEgJkMQAHNzpM/vxx6+y16YGA9saFw7Vokv0ncqwJXiA8dMYTra9zseFReTMjixGWTLYJkjaU1jOikAWG56EbAf2zwhziepYeIEkcbz025JhkB6ZZ89Id5LWrtUEESCwJ9bSYdCeuT7fUcwSs1TQxBppFy4v3oAe6M0mMdONwJJLshTt0gf6CreAk53BEeoXcVA+3TD/xseEaqU0nKhDdJu6GC3EDCiNJ7HTg8Cfl+fjUvzVH1iXWU0kbjlGCb42m5coZCcnLiPj/ixNL0Esa0gccsDTBI/Ds1a2zSTQ2KZcoJsuptvJWYt7N31tY+sG1gLW1zaXVK4FpkgiDRR3m+f1DHGRSDCOTwNveVO1egSPozjPkdYezNDEGmozJUsbWCM1yVh3Z5c/ziuyaq0LlME2TKc30ZUGQLxjCWTf8t9rJ1TWBY0Ds0zSRAJjCyUjTrG+a32OMIknAx5VH1qBGtRleYJp93w3pkliG1Wg7TDbYy1dNSiBInHDoaALAeKGppRVDwMppH/XtkmyGV79zdoxFhDnW8p+g+AqHrIWcNYRjMLC/FhGOSCIJsGkph9CKNooc6XsKIKe/dx5f2NPRtoqnyCwF1qdC1yRJBNkOT9EnMSdd7pii5onEa2d6im0FT1eE38FlwrMXcE2TLxtiNUvTiCOi/iow8z+WAmjdtrDTN6afFKyC1Bthbxs4RaaR01TjCqDyw74VdBO+3Z8DCW55sgW8gQiUP3otYqo8YzSphw2eyrGeisrqKdtZxGEMuLQZBtyMgSqOsdVPkovf9wkTtT7U+gtXiX6Pjvnc0ehSPIlpvk2a5du1C1TK7y6Ba6lRba5i608rjGcLO9sATZAkZm5K0aRup9VHidciVc+ga6ooVOfQUbWc9luJFg2O+FJ8gVcEjsb6AysYKRXg2VIj7VIM9LterYwBI6i88W5zOKCeL3nxB5hAUYMTdQyXs+xb6X0cfGUhWddxpiwy9UeW/PM4iLh+deIP3tBVT6KzCaVZTzsAvW76BrjcHsAeY7gJmnxJ5qwjJBfCIq76SsAUYfMKwmjCysW+R6otdG1zRhnjsHEy+Kvk+zC9ucCRLS9XKGOfcyjPMGDENDqSRQSnL9ItcR/T56nR56vSmeIUK6Nxt30sMaGXv/BmmzhFJVoLQKlCqrKOk6SipnG3kosEromRZ661309q2jd+p59ABBsdubY4E8g8Tt3AZpmIe4/SaICwTNXIboTUFMAVq3CdEbhSitg8p10BJglZZAxiRor4D10jwIL8CCYBLE5TYmSFxIs5xMIsAEyaTbWOm4EGCCxIU0y8kkAkyQTLqNlY4LASZIXEiznEwi8P/24b1B8ysNMwAAAABJRU5ErkJggg==",
    
18.                                         imageSize: {
    
19.                                                 height: 20,
    
20.                                                 width: 20
    
21.                                         },
    
22.                                         command: (sheet, row, col, option) => {
    
23.                                                 alert("do something you want to do 2");
    
24.                                         },
    
25.                                         position: GC.Spread.Sheets.ButtonPosition.left
    
26.                         }];

复制代码

由于cellbuttons属于style,故可以通过style进行整列设置，或者使用namedStyle方便后续多次设置。

1. sheet.setStyle(-1, 1, style);

复制代码

效果如下所示，第二列整列设置了按钮列表，点击不同的按钮触发不同的效果

完整的demo见附件