Блог

Я хотел бы иметь возможность ставить водяной знак на ячейку в spreadJs с помощью значка замка. Я хочу, чтобы это всегда было в правом центре ячейки, как на изображении ниже.

Возможно ли это?

Я вижу, что приведенная ниже ссылка делает нечто подобное, но она растягивается по всей ячейке, чего я на самом деле не хочу, поскольку ширина и высота ячейки могут быть любой ширины и высоты, поэтому это выглядело бы странно.

Я хотел бы, чтобы ячейка функционировала как обычно и сохраняла весь существующий стиль, кроме водяного знака над ячейкой замка, где это необходимо.

https://help.grapecity.com/spread/SpreadJSWeb/backimage.html

Обновить

Я только что наткнулся на следующее, которое, я думаю, потенциально может сработать с использованием пользовательской ячейки. У кого-нибудь есть простой пример, которым они могут поделиться, где все, что он делает, это добавляет пользовательский значок в существующую ячейку?

https://help.grapecity.com/spread/SpreadJSWeb/cellcustom.html

Вы можете создать пользовательский тип ячейки, как вы отметили выше.

Определите тип ячейки:

 function IconCellType() {
    }
    IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
    IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }

        GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, value, x, y, w, h, style, context);

        ctx.save();

        // draw inside the cell's boundary
        ctx.rect(x, y, w, h);
        ctx.clip();

        let img = document.getElementById('lock');
        ctx.drawImage(img, x w-20, y h/2-10, 20, 20);

        ctx.restore();
    }
  

Затем задайте тип ячейки:

 var sheet = workbook.getActiveSheet();
sheet.getCell(1, 1).cellType(new IconCellType());
  

Пожалуйста, также обратите внимание, что ссылки на документацию, которые вы добавили, относятся к SpreadJS версии 9.
Перейдите к документации v12 для получения самой последней документации.

Служба поддержки SpreadJs вернулась ко мне со следующим примером, который соответствовал моим потребностям, на случай, если кто-то еще столкнется с этим для версии 12.7

Javascript

 var spread;
var sheet;
$(document).ready(function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    sheet = spread.getActiveSheet();

    sheet.setColumnCount(5);
    sheet.setRowCount(5);
    sheet.suspendPaint();
    sheet.getCell(0, 0).text("This is Circle text.").cellType(new IconCellType(document.getElementById('icon-lock')));

    sheet.getCell(2, 0).text("Orange").cellType(new IconCellType(document.getElementById('icon-lock')));
    sheet.resumePaint();
});

function IconCellType(img) {
    this.typeName = "IconCellType";
    this.img = img;
}
IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
// EllipsisTextCellType.prototype
IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {            
    if (!ctx) {
        return;
    }
    ctx.save();

    // draw inside the cell's boundary
    ctx.rect(x, y, w, h);
    ctx.clip();

    // draw text
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x 20, y, w-20, h, style, context]);
    ctx.beginPath();
    // let img = document.getElementById('icon-lock');
    ctx.drawImage(this.img, x   2, y   2, 16, 16);
    ctx.fill();
    ctx.stroke();

    ctx.restore();
};
  

HTML

 <img id="icon-lock" style="display:none"  src="data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4Ij4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOSw0OWMtMS4xLDAtMi0wLjktMi0yVjIzICBjMC0xLjEsMC45LTIsMi0yaDMyYzEuMSwwLDIsMC45LDIsMnYyNGMwLDEuMS0wLjksMi0yLDJIOXoiLz4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzYsMjFjMCwwLDAtNC45LDAtNiAgYzAtNi4xLTQuOS0xMS0xMS0xMWMtNi4xLDAtMTEsNC45LTExLDExYzAsMS4xLDAsNiwwLDYiLz4KPHBhdGggZD0iTTI4LDMzYzAtMS43LTEuMy0zLTMtM2MtMS43LDAtMywxLjMtMywzYzAsMC45LDAuNCwxLjcsMSwyLjJWMzhjMCwxLjEsMC45LDIsMiwyYzEuMSwwLDItMC45LDItMnYtMi44ICBDMjcuNiwzNC43LDI4LDMzLjksMjgsMzN6Ii8 Cjwvc3ZnPgo="/>
<h1>SpreadJS</h1>
<div id="ss" style="width: 500px; height: 400px; border: 1px solid gray"></div>
  

Визуализация