Working with GridJs Client Side
Contents
[
Hide
]
Working with GridJs Client Side
We developed GridJs client based on x-spreadsheet.
the main steps are:
- create x_spreadsheet instance
xs = x_spreadsheet(id, options)
- load json data
xs.loadData(jsondata.data)
- set active sheet
xs.setActiveSheetByName(jsondata.actname)
- set active cell
xs.setActiveCell(jsondata.actrow,jsondata.actcol);
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
}).loadData(sheets)
// 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
showToolbar: means whether to show toolbar
local: support multiple language for menus ,the locale can be: en, cn, es, pt, de, ru, nl for english,chinese,Spanish,Portuguese,germany,Russian,Dutch
showContextmenu: means whether to show contextmenu on right click on a cell
other useful apis
- Render the view
xs.reRender()
- Get Selected Image/shape£¬if nothing select will return null
xs.sheet.selector.getObj()
- Get the cell object
xs.sheet.data.getCell(ri,ci)
// the parameters are:
ri:row index
ci:column index
- Get the cell style
xs.sheet.data.getCellStyle(ri,ci)
// the parameters are:
ri:row index
ci:column index
- Set the cell value
xs.sheet.data.setCellText(ri,ci,value,state)
// the parameters are:
ri:row index
ci:column index
value:the cell value
state: input | finished
- Get/Set the selected cell range
xs.sheet.data.selector.range
- Set the cell value for the selected cell or cell area
xs.sheet.data.setSelectedCellText(value)
// the parameters are:
value:the value for the cell
- Set the style for the selected cell or cell area
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
- Merge the selected cell area
xs.sheet.data.merge()
- Unmerge the selected cell area
xs.sheet.data.unmerge()
- Delete the selected cell
xs.sheet.data.deleteCell(what)
// the parameters are:
what:all|format all: means delete the cell and clear the style ;format means delete the cell value and keep the cell style
- Set the freeze pane
xs.sheet.data.setFreeze(ri,ci)
// the parameters are:
ri:row index
ci:column index
- Insert row or columns at the selected cell
xs.sheet.data.insert(type, n)
// the parameters are:
type: row | column
n:the row or column number
- Delete row or columns at the selected cell
xs.sheet.data.delete(type)
// the parameters are:
type: row | column
- Set the width for the column
xs.sheet.data.setColWidth(ci,width)
// the parameters are:
ci:column index
width:the width for the column
- Get the width for the column
xs.sheet.data.cols.sumWidth(min,max)
// the parameters are:
min:the start column index
max:the end column index,not include
- Set the height for the row
xs.sheet.data.setRowHeight(ri,height)
// the parameters are:
ri:row index
height:the height for the row
- Get the height for the row
xs.sheet.data.rows.sumHeight(min,max)
// the parameters are:
min:the start row index
max:the end row index,not include
- Get/Set the display direction
xs.sheet.data.displayRight2Left
for detail info ,you can check the example here https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs