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

收藏

背景：用户想要实现下拉多选框，SpreadJS 中原生没有提供下拉多选的单元格。
思路：通过自定义单元格的方式实现，与第三方开源框架结合，快速实现下拉多选的效果。
实现效果：

关键代码（引入layui.js、xm-select.js）：

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

复制代码

完整Demo见附件

		自动登录	找回密码
密码			立即注册

0 个回复