xspreadsheet是一款简单易用可读写excel表格的在线表格js插件

xspreadsheet是一款简单易用可读写excel表格的在线表格js插件

xspreadsheet 是一款基于javascript开发的,简单的,易用的在线表格插件

使用方式:

第一步在dom中放入容器

<div id="xspreadsheet"></div>

第二步引入bfwone ,引入依赖xspreadsheet

<script id="bfwone" data="dep=xspreadsheet&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

第三步use语言包和主题css及初始化参数

use(["xspreadsheet-zh-cn", "xspreadsheet"],function() {
                    x_spreadsheet.locale('zh-cn');
                    var grid = x_spreadsheet('#xspreadsheet');
});

方法及事件

事件绑定

// event of click on cell
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// edited on cell
s.on('cell-edited', (text, ri, ci) => {});

更改单元格数据

const s = new Spreadsheet("#x-spreadsheet-demo")
// cellText(ri, ci, text, sheetIndex = 0)
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
获取单元格数据及样式
const s = new Spreadsheet("#x-spreadsheet-demo")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);

完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=xspreadsheet&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">



        bready(function() {
            use(["xspreadsheet-zh-cn",
                "xspreadsheet"],
                function() {
                    x_spreadsheet.locale('zh-cn');
                    var grid = x_spreadsheet('#xspreadsheet');


                });
        });
    </script>


</head>
<body>

    <div id="xspreadsheet"></div>

</body>
</html>


立即下载xspreadsheet.js查看所有js插件

网友评论0

程序员在线工具箱