dede 其实stylesheet是什么意思,stylesheet的意思翻译、用法、同义的问题并不复杂，但是又很多的朋友都不太了解Web端优秀的Javascript电子表格，因此呢，今天小编就来为大家分享stylesheet是什么意思,stylesheet的意思翻译、用法、同义的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
x-spreadsheet是一款开源的基于Web的Javascript电子表格，在Github获得6k+的star，它在功能上有点类似于googlesheet,可以说是简化版的webexcel，虽然没excel那么强大，但也能够应付一些需求了。
Github：https://github.com/myliang/x-spreadsheet
DEMO：https://myliang.github.io/x-spreadsheet/
<linkrel="stylesheet"href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css">\n<scriptsrc="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>\nNPM安装
npminstallx-data-spreadsheet\n使用方式
<divid="xspreadsheet"></div>\n<script>\nx.spreadsheet('#xspreadsheet');\n</script>\n
在浏览器运行结果如图：
或者你也可以使用模块化的方式使用
importSpreadsheetfrom"x-data-spreadsheet";\n//Ifyouneedtooverridethedefaultoptions,youcansettheoverride\n//constoptions={};\n//newSpreadsheet('#x-spreadsheet-demo',options);\nconsts=newSpreadsheet("#x-spreadsheet-demo")\n.loadData({})//loaddata\n.change(data=>{\n//savedatatodb\n});\n//datavalidation\ns.validate()\n所有默认的配置
{\nshowToolbar:true,\nshowGrid:true,\nshowContextmenu:true,\nview:{\nheight:()=>document.documentElement.clientHeight,\nwidth:()=>document.documentElement.clientWidth,\n},\nrow:{\nlen:100,\nheight:25,\n},\ncol:{\nlen:26,\nwidth:100,\nindexWidth:60,\nminWidth:60,\n},\nstyle:{\nbgcolor:'#ffffff',\nalign:'left',\nvalign:'middle',\ntextwrap:false,\nstrike:false,\nunderline:false,\ncolor:'#0a0a0a',\nfont:{\nname:'Helvetica',\nsize:10,\nbold:false,\nitalic:false,\n},\n},\n}\n国际化
<!--ImportviaCDN-->\n<linkrel="stylesheet"href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css">\n<scriptsrc="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>\n<scriptsrc="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>\n<script>\nx.spreadsheet.locale('zh-cn');\n</script>\n
或者
//npm\nimportSpreadsheetfrom'x-data-spreadsheet';\nimportzhCNfrom'x-data-spreadsheet/dist/locale/zh-cn';\nSpreadsheet.locale('zh-cn',zhCN);\nnewSpreadsheet(document.getElementById('xss-demo'));\n
上图是我测试中文的
<!DOCTYPEhtml>\n<htmllang="en">\n\n<head>\n<metacharset="UTF-8">\n<metaname="viewport"content="width=device-width,initial-scale=1.0">\n<metahttp-equiv="X-UA-Compatible"content="ie=edge">\n<title>x-spreadsheet</title>\n<linkrel="stylesheet"href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css">\n<scriptsrc="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>\n<scriptsrc="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>\n</head>\n\n<bodyonload="load()">\n<divid="x-spreadsheet-demo"></div>\n<script>\nfunctionload(){\nx.spreadsheet.locale('zh-cn');\nvartable=x.spreadsheet('#x-spreadsheet-demo',{})\n.loadData({\nfreeze:'B3',\nstyles:[{\nbgcolor:'#f4f5f8',\ntextwrap:true,\ncolor:'#900b09',\nborder:{\ntop:['thin','#0366d6'],\nbottom:['thin','#0366d6'],\nright:['thin','#0366d6'],\nleft:['thin','#0366d6'],\n},\n},],\nmerges:[\n'C3:D4',\n],\nrows:{\n1:{\ncells:{\n0:{\ntext:'testingtesttestetst'\n},\n2:{\ntext:'testing'\n},\n},\n},\n2:{\ncells:{\n0:{\ntext:'render',\nstyle:0\n},\n1:{\ntext:'Hello'\n},\n2:{\ntext:'haha',\nmerge:[1,1]\n},\n}\n},\n8:{\ncells:{\n8:{\ntext:'bordertest',\nstyle:0\n},\n}\n}\n},\n});\n\ntable.change((cdata)=>{\n//console.log(cdata);\nconsole.log(table.validate());\nconsole.log(table);\n});\n}\n</script>\n\n\n</body>\n\n</html>\n兼容性
支持主流浏览器（chrome,firefox,Safari），Edge貌似有问题，本地测试未通过
值得注意的是在Github提供的cdn中版本号较低，在国际化的时候会出现错误，因此在更改官网的cdn版本至1.0.21即可，可以直接使用我上面更改后的，已经亲自测试过，如果你觉得它对你有帮助，请麻烦点赞、转发加关注哟！后续更多实用技巧和工具等着你！
关于stylesheet是什么意思,stylesheet的意思翻译、用法、同义，Web端优秀的Javascript电子表格的介绍到此结束，希望对大家有所帮助。
微信扫一扫打赏
支付宝扫一扫打赏
