Travailler avec la fonctionnalité GridJs Highlight

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