SpreadJS自定义单元格实现下拉多选

背景： 用户想要实现下拉多选框，SpreadJS 中原生没有提供下拉多选的单元格。
思路：通过自定义单元格的方式实现，与第三方开源框架结合，快速实现下拉多选的效果。
实现效果：
关键代码（引入layui.js、xm-select.js）：

1.   function MyCellType9() {};
   
2.         MyCellType9.prototype = new GC.Spread.Sheets.CellTypes.Text();
   
3.         MyCellType9.prototype.createEditorElement = function() {
   
4.         var div = document.createElement("div");
   
5.         $div = $(div);$div.attr('id','demo9');
   
6.         return div;
   
7.         };
   
8.         MyCellType9.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
   
9.                 if (editorContext) {
   
10.                 $editor = $(editorContext);
    
11.                 GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
    
12.                 /*$editor.css('position', 'absolute');*/$editor.attr('gcUIElement', 'gcEditingInput');
    
13.                 var index=[];
    
14.                 var disList=trimSpace(sheet.getText(sheet.getActiveRowIndex(),sheet.getActiveColumnIndex()).split(','));
    
15.                 for (var js=0; js<DIYCellData9.length;++js){if(disList.indexOf(DIYCellData9[js].name)!=-1){index.push(DIYCellData9[js].value)}};
    
16.                 if((disList).length==0){sheet.setValue(sheet.getActiveRowIndex(),sheet.getActiveColumnIndex(),'')};
    
17.                         var demo9 = xmSelect.render({
    
18.                         el: '#demo9',autoRow: true,direction: 'down',language: 'zn',data:DIYCellData9,model: {
    
19.                                 label: {type: 'block',block: {showCount: 3,showIcon: true,}}},initValue: index,pageSize: 3,toolbar: {show: true,list: [ 'ALL' ]},on: function(data)

复制代码

完整Demo见附件