JavaScript to set the border, the right menu to set the border, the performance is inconsistent

Tags: #<Tag:0x00007f8b1cd7fc40>
#1

@aleksandra_budnik
This is the border that I set with JavaScript，Whether or not the borders appear to overlap, resulting in thicker lines.

let cellRange = this.getSelectedRange();
    let border = {
        left: {width: 1, color: color,},
        right: {width: 1, color: color,},
        top: {width: 1, color: color,},
        bottom: {width: 1, color: color,}
    }
    customBordersPlugin.setBorders(cellRange, border);

Below is the border for the right-click menu Settings Settings

Are they inconsistent because I used them the wrong way?

  1. How to make Js also keep the feature of right-click menu? Set only the borders around the range of my choice, not every cell.
    2.Do you need functions that trigger the right-click menu to do these things?

thank you

#2

Hey @MaLaTang

we only use the right and bottom border of a TD element to create a border.

You can get a pretty much same result if you use inset box-shadow for the TD elements, like here https://jsfiddle.net/w28fLu1d/

#3

@aleksandra_budnik
Hello, thank you for your reply.
But now I have a new problem.

  1. I used cellMeta. Type =‘time’ to change the format of cell, and passed in ‘1553591727349’ time stamp for formatting.

  2. However, cellMeta. Type =numeric, calling hot. Render (), which is valid. Did I make a mistake?

  3. After I successfully set the cell to time type and displayed it as yyyy-mm-dd, I set the cell to cellMeta. Type =text again, and the data could not be restored to ‘1553591727349’, which still kept the formatted form.

Did I make a mistake?

#4

Hey @MaLaTang

I’ve created a demo here https://jsfiddle.net/1mtq0Lo5/ when I call the validateCells method and it works for 1553591727349 as expected. How can I replicate the issue?

#5

@aleksandra_budnik
Here’s a GIF,

  1. I set this to numeric and call hot.render(), which is valid

  2. I set it to text and call hot-render (), which renders

  3. I set the time, and call the hot. The render (), failure, double-click the cell must be edited.

  4. I set to text, and call the hot. The render (), failure, data has been unable to restore for ‘1553591727349’

0326A.gif806×403 358 KB

#6

Does it work when you call validateCells() instead? It would be great if you could share any demo for me to test and debug.

#7

@aleksandra_budnik
I share the code that implements this functionality

let selected = this.getAllSelectedCells();
let type = $("#toolbar-select-type").val();
let format = $("#toolbar-select-info").val();
for (let cell of  selected) {
    let cellMeta = this.getCellMeta(cell.row, cell.col);
    // 处理遗留
    delete cellMeta.type;
    delete cellMeta.valid;
    delete cellMeta.editor;
    delete cellMeta.renderer;
    delete cellMeta.dataType;
    delete cellMeta.validator;
    delete cellMeta.timeFormat;
    delete cellMeta.correctFormat;
    delete cellMeta.numericFormat;
    
    // 时间
    if (type === "time") {
        cellMeta.type = type;
        cellMeta.timeFormat = format;
        cellMeta.correctFormat = true;
    }
    // 数字
    if (type === "numeric") {
        cellMeta.type = type;
        cellMeta.numericFormat = {
            pattern: format,
        }
    }
    console.log(cellMeta);
}
this.render();
this.validateCells();
#8

Can you send over a demo @MaLaTang?

Only then I will be able to ask our developer to for help. He needs a working example (JSFidde/JSBin/CodePen, basically any online demo or .zip) that he could debug.

#9

@aleksandra_budnik
How can I send it to you?

I will compress my project.

#10

@aleksandra_budnik
@wojciech.czerniak
hi? help me

#11

You can send it over to support@handsontable.com

#12

@aleksandra_budnik
I have sent it to you, thank you.

The mail receipt is #22701

#13