X-sheet development tutorial: initialization configuration custom layout

Introduce

x-sheet  It's a high performance  Web JavaScript Canvas  The spreadsheet , I wrote an article before  

x-sheet  Entry experience

, Briefly introduce how to use  x-sheet. This time, let's go deeper , Get to know  x-sheet  What other configurations are supported , By modifying the configuration, we can customize our table layout and characteristics .

Latest original text  

X-Sheet  Development tutorial ： Initialize configuration custom layout

To configure

Xiaobian is using  x-sheet  In the process , A relatively complete configuration list is summarized , You can refer to it .

const settings = {
 //  Workbook configuration
 workConfig: {
 //  Creation time
 created: "",
 //  Modification time
 modified: "",
 //  The author information
 creator: "",
 //  Finally, modify the author
 lastModifiedBy: "",
 //  Name of the workbook
 name: "x-sheet",
 //  Top configuration
 top: {
 //  Top options bar configuration
 option: {
 //  Whether to display the option bar
 show: true,
 },
 //  Top menu bar configuration
 menu: {
 //  Show menu bar or not
 show: true,
 },
 },
 //  Main body configuration
 body: {
 //  Worksheet menu configuration
 sheetConfig: {
 //  Whether to display the right-click menu
 showMenu: true,
 },
 //  Worksheet body configuration
 sheets: [
 {
 //  Worksheet name
 name: "sheet1",
 //  Table configuration
 tableConfig: {
 //  Title row and column configuration
 index: {
 //  Title row height
 height: 30,
 //  Title column width
 width: 50,
 //  Title row border color
 gridColor: "rgb(193,193,193)",
 //  Font size of Title row and column
 size: 12,
 //  Title line font color
 color: "rgb(0,0,0)",
 },
 //  The overall configuration of the table
 table: {
 //  Show gridlines or not
 showGrid: true,
 //  Table area background color
 background: "rgb(255,255,255)",
 //  Grid line color
 gridColor: "rgb(225,225,225)",
 },
 //  Line configuration
 rows: {
 //  Customize the maximum number of rows
 len: 100,
 //  Default line height
 height: 30,
 //  Row configuration data
 data: [
 {
 //  Custom line height , If it is not set, the default row height will be taken
 height: 100
 },
 ],
 },
 //  Column configuration
 cols: {
 //  Customize the maximum number of columns
 len: 25,
 //  Default column width
 width: 110,
 //  Row configuration data
 data: [{
 //  Custom column width , If it is not set, the default column width will be taken
 width: 200
 }],
 },
 //  Freezing range
 xFixedView: {
 //  Freeze column index ,-1 For not freezing
 fxLeft: -1,
 //  Freeze row index ,-1 For not freezing
 fxTop: -1,
 },
 //  Freeze split line style
 xFixedBar: {
 //  Freeze row split line height
 height: 16,
 //  Freeze column divider width
 width: 26,
 //  Freeze the split line background color
 background: "rgb(234,234,234)",
 //  Freeze split line button background color
 buttonColor: "rgb(193,193,193)",
 },

 //  Tabular data , Two dimensional array
 data: [
 [
 // A1  Cell data
 {
 //  Cell type
 contentType: 2,
 //  Font properties
 fontAttr: {
 //  Line break
 textWrap: 2,
 //  Direction
 direction: "vertical",
 },
 //  Rich text configuration
 richText: {
 //  Rich text specific field information
 rich: [
 //  The first paragraph is rich text
 {
 //  typeface
 name: "Arial",
 //  font size
 size: 14,
 //  Text content
 text: " I am a ",
 //  The font color
 color: "rgb(255,0,2)",
 //  Is it bold
 bold: false,
 //  Is it italicized
 italic: false,
 //  Whether there is a delete line
 strikethrough: false,
 //  Is there an underline
 underline: false,
 },
 {
 //  The second paragraph of rich text contains characters
 //  If no style is configured , Just take the style of the cell , Cells are not styled , Just take the default style
 text: " Rich text ",
 },
 ],
 },
 },
 {
 //  The background color
 background: "rgb(255,255,0)",
 //  Cell icon
 icons: [],
 //  Custom properties
 custom: {},
 //  Font measuring ruler
 ruler: undefined,
 //  Format type
 format: "default",
 //  Cell formula
 formula: undefined,
 //  Text content
 text: "Text",
 //  Formatted content
 formatText: "Text",
 //  The width of the content
 contentWidth: 100,
 //  The height of the content
 contentHeight: 100,
 //  Font properties
 fontAttr: {
 //  typeface
 name: "Arial",
 //  font size
 size: 14,
 //  The font color
 color: "rgb(0,0,0)",
 //  Is it bold
 bold: false,
 //  Is it italicized
 italic: false,
 //  Whether there is a delete line
 strikethrough: false,
 //  Is there an underline
 underline: false,
 //  padding
 padding: 5,
 //  Text angle
 angle: 0,
 //  The text direction
 direction: "horizontal", // 'horizontal' 'vertical' 'angle' 'bar'
 //  Horizontal alignment
 align: "left", // 'left' 'center' 'right'
 //  Vertical alignment
 verticalAlign: "middle", // 'top' 'middle' 'bottom'
 //  Word wrap
 textWrap: 1, // 1  overflow  2  Line break  3  truncation
 },
 //  Border properties
 borderAttr: {
 //  The left margin
 left: {
 //  Hierarchy
 zIndex: 0,
 //  Whether or not shown
 display: true,
 //  Width type
 widthType: "low", // 'low' 'medium' 'high'
 //  Color
 color: "rgb(0,0,0)",
 //  Line type
 type: 0, // 0 solid 1 dotted 2 point 3 double
 },
 //  Right margin
 right: {
 zIndex: 0,
 display: true,
 widthType: "medium",
 color: "rgb(0,255,0)",
 type: 0,
 },
 //  On the border
 top: {
 zIndex: 0,
 display: false,
 widthType: "high",
 color: "rgb(0,0,255)",
 type: 0,
 },
 //  Under the frame
 bottom: {
 zIndex: 0,
 display: true,
 widthType: "high",
 color: "rgb(0,255,255)",
 type: 3,
 },
 },
 },
 ],
 ],
 //  Protection configuration
 protection: {
 protections: [],
 },
 //  Whether to protect
 sheetProtection: true,
 //  merge cell
 merge: { merges: ["A2:B3", "D5:H9"] },
 },
 },
 ],
 //  Worksheet tab configuration
 tabConfig: {
 //  Whether to display the tab right-click menu
 showMenu: true,
 },
 },
 //  Bottom status bar configuration
 bottom: {
 //  Is the status bar displayed
 show: true,
 },
 },
 };

 //  initialization x-sheet
 new XSheet("#demo1", settings);


summary

x-sheet  It's still under development , part  API  Is not stable , If there are changes in the follow-up, the editor will update it in time .

Reference resources

• X-Sheet  Development tutorial ： Initialize configuration custom layout

• High performance  web javaScript  The spreadsheet

• Free and open source high performance  JavaScript  The spreadsheet ：X-Sheet  Entry experience