教你在浏览器里做出EXCEL的效果

Posted 2020-11-21 devilzh

 在浏览器里做出EXCEL的效果，复制、粘贴、设置公式、双击编辑等效果，如果自己开发的话，比较麻烦，建议使用成熟的插件。这里介绍使用智表ZCELL插件，实现用户快捷操作。

     首先下载插件，引入到页面中，一共4个文件，包括jquery 基础文件，插件和样式文件。

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script type="text/javascript" src="zcell/ZCell.min.js"></script>
<script type="text/javascript" src="zcell/ZCell.register.js"></script>

 <link rel="stylesheet" type="text/css" href="zcell/ZCell.css" />

　　

文件引入后，界面加载，准备数据

//页面加载时，执行
var zcell1;

//准备数据源
var jsondata = [//四行五列
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["■合并单元格", "单位", "综合取值", "费用", "E1", "F1"],
["", "", "", "机械费", "材料费", "人工费"],
["■计算公式", "合计", "", "30", "40", "50","公式支持加减乘除和自定义函数"],
["", "分公司1", "", "300", "5.2375", "28.2345",""],
["", "分公司2", "", "600", "13.232", "58.14298"]

];

　　然后在页面加载时，生成表格：

 

  //创建JSCELL，指明承载容器
            zcell1 = new ZCell(document.getElementById("cellContainer"));
            //创建表，并指定列，行数
            zcell1.InserSheet(0,10,22);

　　这是，基本表已经有了，是个空表。我们可以在上面设置数据，设置数据分两种方式，一种通过数据源批量加载：

  //加载数据
            zcell1.GetSheet(0).LoadJsonData(jsondata);

　　还可以单独设置某个单元格值：

  //设置单元格文本
            zcell1.GetSheet(0).SetCellValue(1,3,"下面请体验：");

　　插件的功能比较多，可以设置数据，公式等，支持复制、黏贴、双击编辑等效果，这里不再逐一介绍，感兴趣的自行搜索吧。