GridJs İstemci Tarafı İle Çalışmak

x-spreadsheet tabanlı GridJs istemcisini geliştirdik.

Ana adımlar:

x_spreadsheet örneği oluştur

xs = x_spreadsheet(id, options)
    // the parameters are:
    id: the html node id ,for example :'#gridjs-demo' for the html  <div id="gridjs-demo"></div>
    options: the load options


for example the below code init a gridjs_spreadsheet object.
	xs = x_spreadsheet('#gridjs-demo', {
			updateMode:'server',
			updateUrl:'/GridJs2/UpdateCell',
			mode: 'edit',
			showToolbar: true,
                        local: 'en',
			showContextmenu: true
			})

açık load seçenekleri parametreleri:

Parametre	Açıklama	Varsayılan Değer	İsteğe Bağlı
`allowSelectTextInTextBoxInReadMode`	Okuma modunda TextBox kontrollerinde metin seçimine izin verilip verilmediği. Varsayılan değer false.	`false`	Evet
`checkSyntax`	Kullanıcı girdisi için sözdizimi denetimi ve yazım düzeltmesi yapıp yapılmayacağı. setSyntaxCheckUrl ile birlikte çalışır. Varsayılan değer false.	`false`	Evet
`loadingGif`	Resimler/şekiller yüklenirken gösterilecek GIF URL’si. Varsayılan içerik/content/img/updating.gif.	`content/img/updating.gif`	Evet
`local`	Menü ve araç çubukları için yerelleştirme bilgisi ayarlayın, çoklu dili destekler. Olası değerler şunları içerir: - `en, zh, es, pt, de, ru, nl` (İngilizce, Çince, İspanyolca, Portekizce, Almanca, Rusça, Hollandaca) - `ar, fr, id, it, ja` (Arapça, Fransızca, Endonezce, İtalyanca, Japonca) - `ko, th, tr, vi, cht` (Korece, Tayca, Türkçe, Vietnamca, Geleneksel Çince)	`en`	Evet
`mode`	`read` veya `edit` olabilir; `read` sadece okunabilir tablolama anlamına gelir; `edit` tablolama düzenlenebilir.	Yok	Hayır
`isCollaborative`	İşbirliği modunu destekleyip desteklemeyeceği.	`false`	Evet
`searchHighlightColor`	Arama terimi için vurgulama arka plan rengi. Rengin şeffaflık için alfa kanalı içermesi gerekir.	`#dbe71338`	Evet
`showCheckSyntaxButton`	Sözdizimi denetimi ve yazım düzeltme düğmelerini araç çubuğunda gösterip göstermeme. Varsayılan değer false.	`false`	Evet
`showContextmenu`	Bir hücreye sağ tıklanınca bağlam menüsünü gösterip göstermeme. Varsayılan değer true.	`true`	Evet
`showFileName`	Dosya adını gösterip göstermeme.	`true`	Evet
`showFormulaExplain`	Fare hücre üzerinde hareket ettiğinde bu hücreye uygulanan formül açıklamalarını gösterip göstermeme. setFormulaExplainUrl ile birlikte çalışır. Varsayılan değer false.	`false`	Evet
`showFormulaTip`	Bu hücreye uygulanan mevcut formülü fare üzerine getirildiğinde gösterip göstermeyeceği. Varsayılan değer false’dir.	`false`	Evet
`showNonEditableSymbolInCell`	Hücrede istemci tarafı düzenlenemeyen sembol gösterip göstermeyeceği. True olarak ayarlandıysa, sağ tıklama menüsünden “Düzenlemeyi Devre Dışı Bırak” seçeneği tıklandıktan sonra, düzeni devre dışı bırakılan seçim alanında sembol gösterilir. Varsayılan değer false’dir.	`false`	Evet
`showToolbar`	Araç çubuğunu gösterip göstermeyeceği.	`true`	Evet
`updateMode`	Şu anda yalnızca `server` desteklenmektedir.	`server`	Hayır
`updateUrl`	JSON tabanlı güncelleme işlemleri için sunucu tarafı URL’sini ayarla.	Yok	Hayır
`view`	Sayfa görüntü boyutunu ayarla, örneğin, `{width: () => 1000, height: ()=> 500}`.	`{width: () => document.documentElement.clientWidth, height: () => document.documentElement.clientHeight }`	Evet
`token`	Kimlik doğrulama tokenını ayarla. Token null değilse, `Authorization: Bearer {token}` başlığı otomatik olarak istek başlıklarına eklenir. Yeni bir token ayarlamak için `xs.refreshToken(token)` kullanabilirsiniz.	Yok	Evet
`showBottombarStats`	Alt çubuk istatistiklerini gösterip göstermediği. Varsayılan değer true’dur.	`true`	Evet
`showRowAppenderToolbar`	Toplu satır ekleyici araç çubuğunu gösterip göstermediği. Varsayılan değer true’dur.	`true`	Evet

json verileri ile yükle

xs.loadData(data)
// the parameters is:
	data: the json data which describ the data structure for the worksheets

sayfa adıyla etkin tabloyu ayarla

xs.setActiveSheetByName(sheetname)
// the parameters is:
	sheetname: the sheet name

id ile etkin tabloyu ayarla

xs.setActiveSheet(id)
// the parameters is:
	sheetname: the sheet id

etkin hücreyi ayarla

xs.setActiveCell(row,col);
// the parameters are:
	row: the cell row
	col: the cell column

Birden fazla örneği etkinleştir.

xs.setActiveForMultipleInstance(isacitve);
// the parameters are:
	isacitve: whether need to do edit operation at this xs instanse 
// when there are more than one GridJs instances in one page, we need to call this method.
// we only support do edit operation for one instances at a page.
// for example,if we have two instances: xs1 and xs2 in one html page.
// if we need to keep edit operation in xs1,
// we shall call:
xs1.setActiveForMultipleInstance(true);
xs2.setActiveForMultipleInstance(false);

// if we need not do any edit operation for both,
// we shall call:
xs1.setActiveForMultipleInstance(false);
xs2.setActiveForMultipleInstance(false);

özel toast ayarla

xs.customToast(customToastFunction);
// the parameter is:
	customToastFunction: user defined function to toast message,it shall have three parameters :title, content,callback
	if set to null,it will use the default build-in toast.

    for example: 
            function myCustomToast(title, content, callback) {
	    //.....
	    }
            xs.customToast(myCustomToast);

sunucu taraflı eylem için şekil/resim işlemi için bilgi ayarla

xs.setImageInfo(imageGetActionUrl, imageAddByUploadActionUrl, imageAddByUrlActionUrl, imageCopyActionUrl, zindex, loadingGif);
// the parameters are:
	imageGetActionUrl: the get image action URL in the server side controller
	imageAddByUploadActionUrl: the upload image action  URL in the server side controller
	imageAddByUrlActionUrl: the add image from URL action  URL in the server side controller
	imageCopyActionUrl: the copy image action  URL in the server side controller
	zindex: the minimum zindex of the image in the canvas
	loadingGif (optional): the loading gif url when loading the image/shape .it is optional,the default value is:content/img/updating.gif
    for example: 
            const imageurl = "/GridJs2/imageurl";
            const imageuploadurl1 = "/GridJs2/AddImage";
            const imageuploadurl2 = "/GridJs2/AddImageByURL";
            const imagecopyurl = "/GridJs2/CopyImage";  
            const basiczorder = 5678;
    xs.setImageInfo(imageurl, imageuploadurl1, imageuploadurl2, imagecopyurl, basiczorder);

sunucu taraflı eylem için indirme işlemi için bilgi ayarla

xs.setFileDownloadInfo(downloadActionUrl);
// the parameters are:
	downloadActionUrl: the get download file action URL in the server side controller

    for example: 
            const fileDownloadUrl = "/GridJs2/Download";
            xs.setFileDownloadInfo(fileDownloadUrl);

sunucu taraflı eylem için ole nesnesi işlemi için bilgi ayarla

xs.setOleDownloadInfo(oleActionUrl);
// the parameters are:
	oleActionUrl: the ole object file action URL in the server side controller
    for example: 
            const oleDownloadUrl = "/GridJs2/Ole";
            xs.setOleDownloadInfo(oleDownloadUrl);

Sunucu tarafı eylem için sözdizimi kontrolü ve yazım düzeltme işlemi hakkında bilgi ayarla.

xs.setSyntaxCheckUrl(checkUrl);
// the parameters are:
	checkUrl: the  syntax checking & spell correction operation action URL in the server side controller
    for example: 
            const checkurl = "/GridJs2/CheckSyntax";
            xs.setSyntaxCheckUrl(checkurl);

Sunucu tarafı eylem için formül açıklaması hakkında bilgi ayarla.

xs.setFormulaExplainUrl(formulaExplainUrl);
// the parameters are:
	formulaExplainUrl: the  formula explanation  action URL in the server side controller
    for example: 
            const formulaExplainUrl = "/GridJs2/FormulaExplain";
            xs.setFormulaExplainUrl(formulaExplainUrl);

diğer faydalı api’ler

Görünümü oluştur

xs.reRender()

aktifi sayfa kimliğini al

xs.getActiveSheet()

yeni bir çalışma sayfası ekle

xs.addSheet(name,isactive,tabcolor,fontcolor)
// the parameters are:
	name:the sheet name
	isactive:whether set this sheet as active sheet
	tabcolor:the background color for the sheet in the tab bottom menu
	fontcolor:the font color for the sheet name in the tab bottom menu
   for example:
    xs.addSheet('hello',true,'#12ee5b','#2c5d3b')

çalışma sayfası adını değiştir

xs.modifySheetName(oldName,newName)
// the parameters are:
	oldName:the sheet name
	newName:the new desired name
   for example:
     xs.modifySheetName('Sheet1','student');

Sayfayı sil

xs.deleteSheet(name)
// the parameters is:
	name:the sheet name
   for example:
        xs.deleteSheet('Sheet1');

Yakınlaştırma seviyesi ayarla

xs.setZoomLevel(zoom)
// the parameters is:
	zoom:the zoom level ,can be number ,for example 0.5 for zoom out, or 2 for zoom in

Dosya adını ayarla

xs.setFileName(name)
// the parameters is:
	name:the file name with extension ,for example trip.xlsx

Kaydetmeden önce fonksiyon çağrısı ayarla

xs.setBeforeSaveFunction(func)
// the parameters is:
	func:This function is called before the save action. If it returns true, the save will proceed; otherwise, the save will not proceed.
   for example:
	xs.setBeforeSaveFunction(()=>{console.log('hello before save');return true;});

E-posta gönderme özelliği için geri çağrı işlevi.

xs.setEmailSendCallFunction(callback)
// the parameters is:
	callback: the callback function to handle email sending, receives a mailObj parameter
		callback: function(mailObj) {
			// mailObj properties:
			// mailObj.receiver: the email address of the receiver, e.g., 'example@gmail.com'
			// mailObj.type: the format of the file to be sent, can be 'html', 'xlsx', or 'pdf'
		}

GridJs için pencere olayı etkinleştirilsin mi

xs.enableKeyEvent(isenable)
// the parameters is:
	isenable:whether the window key event is active for GridJs
//when has other controls in the same page, you may want to ignore the key event in GridJs

pencereye bağlı tüm olayları, pencere olayı ve pencere yeniden boyutlandırma olayını içeren GridJs’ten çözülmemiş tüm olayları ayır

xs.destroy()

İşbirliği modunda işbirliği ayarlarını yapılandır, setUniqueId’den önce setCollaborativeSetting’i emin olun

xs.setCollaborativeSetting(url,wsendpoint,wsapp,wsuser,wstopic)
    //the parameters are:
         url: the basic action URL in the server side controller to get history messages ,the default is '/GridJs2/msg'
	 wsendpoint: the websocket endpoint in the server side , the default is '/ws'
	 wsapp: the websocket destinations prefixed with "/app", the default is '/app/opr'
	 wsuser: the websocket for user-specific queues prefixed with "/usr", the default is '/user/queue'
	 wstopic: the websocket destinations prefixed with "/topic", the default is '/topic/opr'

Görüntü/şekil için görünür filtre ayarla

xs.setVisibleFilter((sheet,s) =>{})
    //  to set a function which return true(for visible) or false(for invisible) for the visible filter with the below parameters :
	sheet:the sheet instance
	s:the image or shape instance
    for example: 
	//this will make visible for image/shape in sheet with name 'Sheet3' and 'Sheet1' except for the 'Rectangle' type
		xs.setVisibleFilter((sheet,s) => { if (sheet.data.name==='Sheet3'||sheet.data.name==='Sheet1') return s.type!=='Rectangle';  return false; })
	//this will make visible for image/shape in sheet with name  'Sheet1' 
		xs.setVisibleFilter((sheet,s) => { if (sheet.data.name==='Sheet1') return true;  return false; })
	//this will make invisible for image/shape in all sheets 
		xs.setVisibleFilter((sheet,s) => {  return false; })
	//if all the image/shape is already loaded and you want to change the visible filter at runtime,you can call the below code to trigger a reload for image/shape
		xs.reRender()

Seçili görüntü/şekli al, eğer bir şey seçilmediyse null dönecektir

xs.sheet.selector.getObj()

Belirtilen hücre konumunda HTML düğümünü göster veya gizle.

xs.sheet.showHtmlAtCell(isShow, html, ri, ci, deltaX, deltaY)

    //the parameters are:
      isShow: Boolean value indicating whether to show or hide the HTML content.
      html: The HTML string to be displayed.
      ri: Row index of the target cell.
      ci: Column index of the target cell.
      deltaX: (Optional) Relative X-position adjustment from the top-left corner of the cell.
      deltaY: (Optional) Relative Y-position adjustment from the top-left corner of the cell.

    for example: 
    // Show HTML at cell A1
    xs.sheet.showHtmlAtCell(true, "<span>html span</span><input length='30' id='myinput'>test</input>", 0, 0);

    // Hide the HTML node
    xs.sheet.showHtmlAtCell(false);

    // Note: When an HTML node is shown, the default GridJS event handling is disabled to allow interaction with the HTML content.
    // This means you cannot select any cells or perform edit operations until the HTML node is hidden.

Resim/şekil için seçilebilir durumu ayarla.

const shape=xs.sheet.selector.getObj();
shape.setControlable(isenable)
     // the parameter is:
      isenable: when set to true,the image or shape can be selectable and movable/resizeable

Satır ekle

xs.sheet.insertRows(start, n)
    // the parameters are:
	start: start row id 
	n:how many rows will be inserted

Sütun ekle

xs.sheet.insertColumns(start, n)
    // the parameters are:
	start: start column id
	n:how many columns will be inserted

Satır sil

xs.sheet.deleteRows(start, n)
    // the parameters are:
	start: start row id 
	n:how many rows will be deleted

Sütun sil

xs.sheet.deleteColumns(start, n)
    // the parameters are:
	start: start column id 
	n:how many columns will be deleted

Sabit pencereyi ayarla

xs.sheet.freeze(ri,ci)
    // the parameters are:
	ri:row index 
	ci:column index

Bölmeyi sabitleme

xs.sheet.freeze(0,0)

Düzenlenebilir/yalnız okunur alan ayarla

xs.sheet.setEditableRange(range,isenable)
    // the parameters are:
	range:the cell range ,etc. {sri:0,sci:0,eri:2,eci:2} reprensents range start from cell A1 to C3
	isenable:when set to true,the range is editable.other wise,the range is readonly.

Satırları gizle

xs.sheet.hideRows(sri,eri)
    // the parameters are:
	sri:the start row index 
	eri:the end row index

Satırları göster

xs.sheet.unhideRows(sri,eri)
    // the parameters are:
	sri:the start row index 
	eri:the end row index

Sütunları gizle

xs.sheet.hideColumns(sci,eci)
    // the parameters are:
	sci:the start column index 
	eci:the end column index

Sütunları göster

xs.sheet.unhideColumns(sci,eci)
    // the parameters are:
	sci:the start column index 
	eci:the end column index

Satır için yüksekliği ayarla

xs.sheet.setRowHeight(ri,height)
    // the parameters are:
	ri:row index
	height:the height for the row

Satırlar için yüksekliği ayarla

xs.sheet.setRowsHeight(sri,eri,height)
    // the parameters are:
	sri:start row index
	eri:end row index
	height:the height for the rows

Tüm satırlar için yüksekliği ayarla

xs.sheet.setAllRowsHeight(height)
    // the parameters are:
	height:the height for the rows

Sütun için genişliği ayarla

xs.sheet.setColWidth(ci,width)
    // the parameters are:
	ci:column index
	width:the width for the column

Sütunlar için genişliği ayarla

xs.sheet.setColsWidth(sci,eci,width)
    // the parameters are:
	sci:the start column index
	eci:the end column index
	width:the width for the column

Tüm sütunlar için genişliği ayarla

xs.sheet.setAllColsWidth(width)
    // the parameters are:
	width:the width for the columns

Hücreye yorum ekle

xs.sheet.setComment(ri,ci,author,note)
    // the parameters are:
	ri:row index of the cell
	ci:column index of the cell
	author:the author for the comment
	note:the content for the comment

Hücredeki yorumu kaldır

xs.sheet.removeComment(ri,ci)
    // the parameters are:
	ri:row index of the cell
	ci:column index of the cell

Hücre nesnesini al

xs.sheet.data.getCell(ri,ci)
    // the parameters are:
	ri:row index 
	ci:column index

Hücre stilini al

xs.sheet.data.getCellStyle(ri,ci)
    // the parameters are:
	ri:row index 
	ci:column index

Hücre değerini ayarla

xs.sheet.data.setCellText(ri,ci,value,state)
    // the parameters are:
	ri:row index 
	ci:column index
	value:the cell value
	state: input | finished ,if finished ,it will do update action to servside

Seçili hücre aralığını al/ayarla

xs.sheet.data.selector.range

Seçili hücre veya hücre alanı için hücre değerini ayarla

xs.sheet.data.setSelectedCellText(value)
    // the parameters are:
	value:the  value for the cell

Seçili hücre veya hücre alanı için stil ayarla

xs.sheet.data.setSelectedCellAttr(attributename,value)
    // the parameters are:
	attributename:font-name | font-bold | font-italic | font-size  | format|border|merge|formula |strike|textwrap |underline |align |valign |color|bgcolor|pattern
	value:the  value for the attribute

İstenen hücre alanı için stil ayarla

xs.sheet.data.setRangeAttr(range,attributename,value)
    // the parameters are:
        range:the cell range ,etc. {sri:0,sci:0,eri:2,eci:2} reprensents range start from cell A1 to C3
	attributename:font-name | font-bold | font-italic | font-size  | format|border|merge|formula |strike|textwrap |underline |align |valign |color|bgcolor|pattern
	value:the  value for the attribute
   for example:
        xs.sheet.data.setRangeAttr({sri:0,sci:0,eri:2,eci:2},'bgcolor','#11ee2a');

Seçili hücre alanını birleştir

xs.sheet.data.merge()

Seçili hücre alanının birleşimini kaldır

xs.sheet.data.unmerge()

Seçilen hücredeki içerik veya stili sil veya temizle

xs.sheet.data.deleteCell(type)
    // the parameters are:
	type:all|format  all: means delete the cell and clear the style ;format means delete the cell value and keep the cell style

İstenen hücre alanında içeriği sil veya stili temizle

xs.sheet.data.deleteRange(range,type)
    // the parameters are:
        range:the cell range ,etc. {sri:0,sci:0,eri:2,eci:2} reprensents range start from cell A1 to C3
	type:all|format  all: means delete the cell and clear the style ;format means delete the cell value and keep the cell style

Sütun için genişliği al

xs.sheet.data.cols.sumWidth(min,max)
    // the parameters are:
	min:the start column index
	max:the end column index,not include

Satır için yükseklik al

xs.sheet.data.rows.sumHeight(min,max)
    // the parameters are:
	min:the start row index
	max:the end row index,not include

Görüntüleme yönünü al/ayarla

xs.sheet.data.displayRight2Left

Olay geri çağrısı

Aşağıdaki olayları takip edebiliriz

 xs.on('cell-selected', (cell, ri, ci) => {
                console.log('cell selected:', cell, ', ri:', ri, ', ci:', ci);
                if (ci === -1) {
                    console.log('ci === -1 means a row selected ',ri);
                }
                if (ri === -1) {
                    console.log('ri === -1 means a column selected',ci);
                }
            }).on('cells-selected', (cell, range) => {
                console.log('range   selected:', cell, ', rang:', range);
            }).on('object-selected', (shapeOrImageObj) => {
                console.log('shape or image selected id:', shapeOrImageObj.id, ', type: ', shapeOrImageObj.type);
            }).on('sheet-selected', (id,name) => {
                console.log('sheet selected id:', id, ', name: ',name);
            }).on('sheet-loaded', (id,name) => {
                console.log('sheet load finished:', id, ', name: ',name);
            }).on('cell-edited', (text, ri, ci) => {
	        //just edit the cell
                console.log('text:', text, ', ri: ', ri, ', ci:', ci);
            }).on('cells-updated', (name, cells) => {
	       //cell value got updated
                console.log('cells updated for sheet name:', name);
                cells.forEach((acell, index, array) => {
                console.log('acell got updated:', acell);
            })
            }).on('cells-deleted', (range) => {
                console.log('cells deleted :', range);
            }).on('rows-deleted', (ri, n) => {
                console.log('rows-deleted :', ri, ",size", n);

            }).on('columns-deleted', (ci, n) => {
                console.log('columns-deleted :', ci, ",size", n);

            }).on('rows-inserted', (ri, n) => {
                console.log('rows-inserted :', ri, ",size", n);

            }).on('columns-inserted', (ci, n) => {
                console.log('columns-inserted :', ci, ",size", n);

            });

Ön kontrol olayı. Eğer false dönerse, ekleme/silme işlemi devam etmez.

  xs.checkRowInsert = (ri, size) => { if (ri % 2 == 1) return true; else return false; };
  xs.checkColumnInsert = (ci, size) => { if (ci % 2 == 1) return true; else return false; };
  xs.checkRowDelete = (ri, size) => { if (ri % 2 == 1) return true; else return false; };
  xs.checkColumnDelete = (ci, size) => { if (ci % 2 == 1) return true; else return false; };

Özelleştirme

Ana simgeyi ve bağlantıyı ayarlayın

xs.sheet.menubar.icon.setHomeIcon(iconUrl,targetUrl)
    // the parameters are:
	iconUrl:the home icon URL
	targetUrl:the target link URL
	for example ,the below code will set the new logo and with link to google.com
	xs.sheet.menubar.icon.setHomeIcon('https://forum.aspose.com/letter_avatar_proxy/v4/letter/y/3e96dc/45.png','https://www.google.com')

Menü çubuğunu göster

xs.sheet.menubar.show()

Menü çubuğunu gizle

xs.sheet.menubar.hide()

Şekil nesnesi için API’ler

Şekil nesnesinin arka plan rengini değiştir

    setBackgroundColor(color)
    // the parameters are:
        color: the html color value in hex string value
    //for example,we assume shape 0 existed,this will set the background color to Yellow 
     const ashape=xs.sheet.data.shapes[0];
     ashape.setBackgroundColor('#FFFF00');

TextBox nesnesi için API’lar

TextBox özel bir şekil türüdür ve tip özelliği: “TextBox”, Örneğin: Aşağıdaki kod, hangi şeklin metin kutusu olduğunu gösterecektir

for (let shape of xs.sheet.data.shapes) {
    if (shape.type === 'TextBox') {
        console.log(shape.id + ' is a textbox');
    }
}

Metin kutusu nesnesi için yazı tipi ayarlarını uygula

    setFont(fontsettings)
    // the parameter is:
        fontsettings:   {'name':'Arial', 'size':12, 'bold':true, 'color':'#FFFF00', 'italic':true} ,the properties are 'name', 'size', 'bold', 'color', 'italic',they are all optional.
    //for example,we assume shape 0 is a textbox object,this will set the font color to Yellow ,and font size to 12pt,and bold the font. 
     const textbox=xs.sheet.data.shapes[0];
     const fontsettings= {'name':'Arial', 'size':12, 'bold':true, 'color':'#FFFF00'}; 
     textbox.setFont(fontsettings);

Görsel etki elde etmek için arka plan rengini ve metin rengini otomatik olarak değiştir

    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

TextBox nesnesinde metin içeriğini gizle/göster

    hideText(boolvalue)
    // the parameters are:
        boolvalue: if true,will not display the text in the textbox object;if false,restore to original appearence

detaylı bilgi için buradaki örneği kontrol edebilirsiniz https://github.com/aspose-cells/Aspose.Cells.Grid-for-.NET/tree/master/Examples_GridJs

GridJs için Özel İndirme Fonksiyonu