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

 在浏览器里做出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,"下面请体验:");

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

 

posted @ 2018-06-30 17:33  帆张芳显  阅读(935)  评论(0编辑  收藏  举报