Travailler avec la fonctionnalité GridJs Highlight
Contents
[
Hide
]
Travailler avec la fonctionnalité GridJs Highlight
Nous prenons en charge les API JS ci-dessous pour la fonctionnalité Highlight
- Activez la surbrillance et définissez le style de surbrillance. Toutes les API de surbrillance ne prendront effet qu’une fois le style de surbrillance défini dans la feuille de calcul active.
xs.sheet.showHighlights(style)
// the parameter is:
style: the style for highlight ,currently only support color
for example: {'color':'rgba(85, 57, 47, 0.08)'}
- mettre à jour le style de surbrillance défini dans la feuille de calcul active
xs.sheet.updateHighlightStyle(style)
// the parameter is:
style: the style for highlight ,currently only support color
for example: {'color':'rgba(85, 57, 47, 0.08)'}
- Désactiver la surbrillance dans la feuille de calcul active
xs.sheet.hideHighlights()
- Ajouter du texte de cellule à mettre en surbrillance dans la feuille de calcul active
xs.sheet.addHighlightText(row,col,startpostion,endposition)
// the parameters are:
row:row index
col:column index
startpostion: highlight start postion in cell text
endpostion: highlight end postion in cell text
//it support multiple range postion inside one cell
- Supprimer la surbrillance du texte de cellule dans le tableau de la feuille de calcul active
xs.sheet.removeHighlightText(row,col,startpostion,endposition)
// the parameters are:
row:row index
col:column index
startpostion: highlight start postion in cell text
endpostion: highlight end postion in cell text
- Obtenir un tableau pour mettre en surbrillance le texte de la cellule dans la feuille de calcul active
xs.sheet.getHighlightTexts()
- Ajouter une plage de cellules à mettre en surbrillance dans la feuille de calcul active
xs.sheet.addHighlightRange(sri,sci,eri,eci)
// the parameters are:
sri:start row index of cell range
sci:start column index of cell range
eri:end row index of cell range
eci:end column index of cell range
- Supprimer la surbrillance de la plage de cellules dans le tableau de la feuille de calcul active
xs.sheet.removeHighlightRange(sri,sci,eri,eci)
// the parameters are:
sri:start row index of cell range
sci:start column index of cell range
eri:end row index of cell range
eci:end column index of cell range
- Obtenir un tableau pour mettre en surbrillance la plage de cellules dans la feuille de calcul active
xs.sheet.getHighlightRanges()
- Définir la plage de cellules pour inverser la surbrillance dans la feuille de calcul active
xs.sheet.setHighlightInverseRange(sri,sci,eri,eci)
// the parameters are:
sri:start row index of cell range
sci:start column index of cell range
eri:end row index of cell range
eci:end column index of cell range
- Supprimer la surbrillance pour la surbrillance inversée dans la feuille de calcul active
xs.sheet.removeHighlightInverseRange()
- Obtenez la plage de cellules de surbrillance inversée dans la feuille de calcul active
xs.sheet.getHighlightInverseRange()
- Ajouter une forme pour mettre en surbrillance le tableau dans la feuille de calcul active
xs.sheet.addHighlightShape(shapeid)
// the parameters are:
shapeid: the id of shape, can be find in xs.sheet.data.shapes
- Supprimer la forme de surbrillance dans le tableau de la feuille de calcul active
xs.sheet.removeHighlightShape(shapeid)
// the parameters are:
shapeid: the id of shape, can be find in xs.sheet.data.shapes
- Obtenir un tableau pour mettre en surbrillance la forme dans la feuille de calcul active
xs.sheet.getHighlightShaps()
- Ajouter une zone de texte à mettre en surbrillance, la zone de texte est un type spécial de forme dont la propriété de type est : “TextBox”, dans la feuille de calcul active
xs.sheet.addHighlightTextBox(shapeid, startpostion, endposition)
// the parameters are:
shapeid: the id of shape, can be find in xs.sheet.data.shapes whose type is 'TextBox'
startpostion: highlight start postion in the text of textbox
endpostion: highlight end postion in the text of textbox
//it support multiple range postion inside one textbox
- Supprimez la plage de surbrillance dans la zone de texte, la zone de texte est un type spécial de forme dont la propriété de type est : “TextBox”, dans la feuille de calcul active
xs.sheet.removeHighlightTextBox(shapeid, startpostion, endposition)
// the parameters are:
shapeid: the id of shape, can be find in xs.sheet.data.shapes whose type is 'TextBox'
startpostion: highlight start postion in the text of textbox
endpostion: highlight end postion in the text of textbox
//it support multiple range postion inside one textbox
- Ajouter une image pour mettre en surbrillance le tableau dans la feuille de calcul active
xs.sheet.addHighlightImage(imageid)
// the parameters are:
imageid: the id of image, can be find in xs.sheet.data.images
- Supprimer l’image en surbrillance dans le tableau de la feuille de calcul active
xs.sheet.removeHighlightImage(imageid)
// the parameters are:
imageid: the id of image, can be find in xs.sheet.data.images
- Obtenir un tableau pour l’image en surbrillance
xs.sheet.getHighlightImages()
- définir s’il faut mettre en évidence tous les objets dans la feuille de calcul active, inclure toutes les formes et images et toute la zone de la feuille de calcul
xs.sheet.setHighlightAll(ishighlightall,isrerender=true)
// the parameters are:
ishighlightall: true or false,whether to highlight all
isrerender: true or false,whether to reRender
- Définir la fonction de surbrillance d’image personnalisée
xs.sheet.setCustomHighlightImgFunc(func)
// the parameters are:
func: the custom highlight image function, it shall take two parameters ,first is ishighlight,the second one is the fabric image object
//we use fabric js to manage image object, please refer to http://fabricjs.com/image-filters to check more info
below is an example for the decleare function:
const customHighlightImage = (ishighlight, imgobj) => {
imgobj.filters[0] = ishighlight ? new fabric.Image.filters.Sepia() : false;
imgobj.applyFilters();
}
- effacer le paramètre de surbrillance pour la feuille de calcul active
xs.sheet.clearHighlights()
Mettre en surbrillance l’objet zone de texte
textbox est un type spécial de forme dont la propriété de type est : “TextBox”, par exemple : le code ci-dessous montrera quelle forme est une zone de texte
for (let shape of xs.sheet.data.shapes) {
if (shape.type === 'TextBox') {
console.log(shape.id + ' is a textbox');
}
}
- Ajouter un surlignage pour l’objet zone de texte
addHighlight(startpostion,endposition)
// the parameters are:
startpostion: highlight start postion in textbox
endpostion: highlight end postion in textbox
//for example,we assume shape 0 is a textbox object
const textbox=xs.sheet.data.shapes[0];
//first we shall add to highlight shape to enable the highlight for the textbox shape object,it support multiple range postion
xs.sheet.addHighlightShape(textbox.id);
textbox.addHighlight(5,10);
textbox.addHighlight(18,28);
- Supprimer la surbrillance de l’objet zone de texte
removeHighlight(startpostion,endposition)
// the parameters are:
startpostion: highlight start postion in textbox
endpostion: highlight end postion in textbox
//for example,we assume shape 0 is a textbox object
const textbox=xs.sheet.data.shapes[0];
textbox.removeHighlight(5,10);
- Obtenir la mise en surbrillance de l’objet zone de texte
getHighlight()
//for example,we assume shape 0 is a textbox object
const textbox=xs.sheet.data.shapes[0];
textbox.getHighlight();
- Changer la couleur d’arrière-plan de l’objet zone de texte
setBackgroundColor(color)
// the parameters are:
color: the html color value in hex string value
//for example,we assume shape 0 is a textbox object,this will set the background color to Yellow
const textbox=xs.sheet.data.shapes[0];
textbox.setBackgroundColor('#FFFF00');
- Changez automatiquement la couleur d’arrière-plan et la couleur du texte pour obtenir un effet visuel actif
setActiveEffect(boolvalue)
// the parameters are:
boolvalue: if true,will change background color and the text color of the textbox object;if false,restore to original appearence
- masquer/afficher le contenu du texte dans l’objet zone de texte
hideText(boolvalue)
// the parameters are:
boolvalue: if true,will not display the text in the textbox object;if false,restore to original appearence
Vous pouvez en trouver plus sur notre page de démonstration github https://github.com/aspose-cells/Aspose.Cells-for-.NET/blob/master/Examples_GridJs/wwwroot/xspread/index.html