العمل مع GridJs الجانب العميل

قمنا بتطوير GridJs الجانب العميل بناءً على x-spreadsheet.

الخطوات الرئيسية هي:

إنشاء مثيل x_spreadsheet

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,
     // the parameters for options:
	    updateMode:  currently we only support 'server'
	    updateUrl:  set the server side  url for update action based on json
	    mode: read means readonly spread sheet/edit means we can edit the spread sheet
            allowSelectTextInTextBoxInReadMode: whether allow select text in TextBox control when in read mode,the default value is false
	    showToolbar:   means whether to show toolbar
	    showFileName:  whether to show the filename 
	    local:         support multiple language for menus ,the locale can be:
	                        en, cn, es, pt, de, ru, nl, 
	                   for  English,Chinese,Spanish,Portuguese,German,Russian,Dutch
			        ar, fr,id,it,ja
                           for  Arabic,French,Indonesian,Italian,Japanese
			        ko,th,tr,vi,cht
                           for  Korean,Thai,Turkey,Vietnamese,Traditional Chinese                  
	    showContextmenu:   means whether to show contextmenu on right click on a cell
            loadingGif:  the loading gif url when loading the image/shape .it is optional,the default value is:content/img/updating.gif
	for example the below code init a x_spreadsheet object.
	xs = x_spreadsheet('#gridjs-demo', {
			updateMode:'server',
			updateUrl:'/GridJs2/UpdateCell',
			mode: 'edit',
			showToolbar: true,
                        local: 'en',
			showContextmenu: true
			})

تحميل بيانات json

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

تعيين ورقة نشطة حسب اسم الورقة

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

تعيين ورقة نشطة حسب الهوية

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

تعيين خلية نشطة

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

تعيين معلومات لشكل/عمليات الصور لإجراءات الجانب الخادم

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);

تعيين معلومات لعملية التنزيل لإجراءات الجانب الخادم

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);

تعيين معلومات لعملية الكائن الـ OLE لإجراءات الجانب الخادم

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);

واجهات برمجة التطبيقات الأخرى المفيدة

عرض العرض

xs.reRender()

الحصول على هوية الورقة النشطة

xs.getActiveSheet()

تعيين مستوى التكبير

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

تعيين اسم الملف

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

ما إذا كان يتعين تمكين حدث مفتاح النافذة لـ GridJs

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

إلغاء تشبيك جميع الأحداث المرتبطة بـ GridJs، بما في ذلك حدث مفتاح النافذة وحدث تغيير حجم النافذة.

xs.destroy()

تعيين عامل تصفية مرئي للصورة/الشكل

    // need 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.setActiveSheet(xs.getActiveSheet())

الحصول على الصورة/الشكل المحدد، إذا لم يتم تحديد أي شيء سيتم إرجاع قيمة فارغة

xs.sheet.selector.getObj()

تعيين حالة القابلية للتحديد للصورة/الشكل

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

الحصول على كائن الخلية

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

الحصول على نمط الخلية

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

تعيين قيمة الخلية

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

الحصول/تعيين نطاق الخلية المحدد

xs.sheet.data.selector.range

تعيين قيمة الخلية للخلية المحددة أو منطقة الخلية

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

تعيين النمط للخلية المحددة أو منطقة الخلية

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

دمج منطقة الخلية المحددة

xs.sheet.data.merge()

إلغاء دمج منطقة الخلية المحددة

xs.sheet.data.unmerge()

حذف الخلية المحددة

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

تحديد لوحة التجميد

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

إدراج صف أو أعمدة في الخلية المحددة

xs.sheet.data.insert(type, n)
    // the parameters are:
	type: row | column
	n:the row or column number

حذف صف أو أعمدة في الخلية المحددة

xs.sheet.data.delete(type)
    // the parameters are:
	type: row | column

تعيين العرض للعمود

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

تعيين العرض للأعمدة

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

تعيين العرض لجميع الأعمدة

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

الحصول على العرض للعمود

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

تعيين الارتفاع للصف

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

تعيين الارتفاع للصفوف

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

تعيين الارتفاع لكل الصفوف

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

الحصول على الارتفاع للصف

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

الحصول/تعيين اتجاه العرض

xs.sheet.data.displayRight2Left

استدعاء رد الفعل

يمكننا تتبع الأحداث أدناه

 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) => {
                console.log('text:', text, ', ri: ', ri, ', ci:', ci);
            });

تخصيص

تعيين أيقونة المنزل والرابط

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')

عرض شريط القائمة

xs.sheet.menubar.show()

إخفاء شريط القائمة

xs.sheet.menubar.hide()

لمزيد من المعلومات التفصيلية ، يمكنك التحقق من المثال هنا https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs