Travailler avec la fonction de surlignage de GridJs
Contents
[
Hide
]
Travailler avec la fonction de surlignage de GridJs
Nous prenons en charge les API JS ci-dessous pour la fonction de surlignage
- Activer le surlignage et définir le style de surlignage, toutes les API de surlignage ne prendront effet qu’après que le style de surlignage ait été 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 surlignage 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 le surlignage dans la feuille de calcul active
xs.sheet.hideHighlights()
- Ajouter du texte de cellule à surligner 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 le surlignage du texte de la cellule dans un tableau dans 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 surligner le texte de la cellule dans la feuille de calcul active
xs.sheet.getHighlightTexts()
- Ajouter une plage de cellules à surligner 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 le surlignage de la plage de cellules dans un tableau dans 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 surligner la plage de cellules dans la feuille de calcul active
xs.sheet.getHighlightRanges()
- Définir une plage de cellules pour inverser le surlignage 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 le surlignage pour inverser le surlignage dans la feuille de calcul active
xs.sheet.removeHighlightInverseRange()
- Obtenir la plage de cellules de surlignage inverse dans la feuille de calcul active
xs.sheet.getHighlightInverseRange()
- Ajouter une forme pour surligner un 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 surlignage dans un tableau dans 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 surligner la forme dans la feuille de calcul active
xs.sheet.getHighlightShaps()
- Ajouter une zone de texte pour surligner, la zone de texte est un type de forme spécial dont la propriété de type est: “ZoneDeTexte”, 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
- Supprimer la plage de surlignage dans la zone de texte, la zone de texte est un type de forme spécial dont la propriété de type est: “ZoneDeTexte”, 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 surligner un 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 de surlignage dans un tableau dans 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 surligner l’image dans la feuille de calcul active
xs.sheet.getHighlightImages()
- Définir si tous les objets doivent être surlignés dans la feuille de calcul active, incluant toutes les formes, les images et toute la zone de travail
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 une fonction de surlignage 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 les paramètres de surlignage pour la feuille de calcul active
xs.sheet.clearHighlights()
Surlignage pour 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 va montrer quelle forme est textbox
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 textbox
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 un surlignage pour l’objet textbox
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 un surlignage pour l’objet textbox
getHighlight()
//for example,we assume shape 0 is a textbox object
const textbox=xs.sheet.data.shapes[0];
textbox.getHighlight();
- Changer la couleur de fond pour l’objet textbox
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');
- Changer automatiquement la couleur de fond et la couleur du texte pour obtenir un effet actif visuel
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 textuel dans l’objet textbox
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 trouver plus d’informations sur notre page de démonstration GitHub https://github.com/aspose-cells/Aspose.Cells-for-.NET/blob/master/Examples_GridJs/wwwroot/xspread/index.html