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

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

教你在浏览器里做出EXCEL的效果的更多相关文章

  1. 微信浏览器里location.reload问题

    微信浏览器里location.reload问题会导致有时候post数据丢失.建议不要用此方式,尽量ajax方式获取或不要为了获取新的UI而刷新页面 2015-12-26 00:51:34array ( ...

  2. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  3. VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开

    如何设置VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开 工具-选项-项目和解决方案-常规-在解决方案资源管理器中跟踪活动项(C)

  4. 手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

    转载自:http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...

  5. 简单配置,让ES6脚本在浏览器里飞

    如果你只是想学习ES6语法,找个地方练习下写法.不想看环境如何搭配,就想简单的学习,那有两种简单的方式. 1.在Chrome浏览器里直接F12调出控制台   2.在浏览器里跑引用ES6的HTML页面 ...

  6. IndexedDB:浏览器里内置的数据库(转)

    出处;http://www.webhek.com/indexeddb/ IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local ...

  7. 用php命令执行php脚本报错,在浏览器里执行却正常。

    写了一个Php脚本,里面用到了PDO连接数据库,但是所有的库都已经安装,在浏览器里执行完全正常,但是写到批处理文件里用php命令去执行的时候却报错找不到驱动,很奇怪. 经查找得知原来php命令与浏览器 ...

  8. ABAP的语法高亮是如何在浏览器里显示的

    这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...

  9. 在浏览器里使用SAPGUI里的SE80

    效果如图:点击Fiori launchpad的SE80对应的tile: 即可在浏览器里打开SE80 具体步骤 (1). 在后台找到Fiori catalog page ID: SAP_FIORI_EX ...

随机推荐

  1. SQL Server函数与存储过程 计算时间

    一.通过一个开始时间.结束时间计算出一个工作日天数(不包含工作日与节假日): 1.函数 --创建函数,参数 @bengrq 开始时间,@endrq 结束时间 create function [dbo] ...

  2. win10修改cmd默认输入法为英文

    每次打开cmd窗口输入东西后,按下空格,输入的英文就会变为中文,感觉十分不爽,网上找了很多解决办法,由于系统升级了,都没有效果,今天记录一下解决方法: 1.点击任务栏输入法,打开“语言首选项”,如图: ...

  3. 理解ASP.NET Core验证模型(Claim, ClaimsIdentity, ClaimsPrincipal)不得不读的英文博文

    这篇英文博文是 Andrew Lock 写的 Introduction to Authentication with ASP.NET Core . 以下是简单的阅读笔记: -------------- ...

  4. PERL学习笔记---正则表达式

    要匹配某个模式(正则表达式)和$_的关系,可以将模式放在正斜线(//)之间,如下:$_ =“yabba dabba doo”;if(/abba/){print “It matched!\n”;} 表达 ...

  5. Python基础(os模块)

    os模块用于操作系统级别的操作: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当 ...

  6. 文本离散表示(二):新闻语料的one-hot编码

    上一篇博客介绍了文本离散表示的one-hot.TF-IDF和n-gram方法,在这篇文章里,我做了一个对新闻文本进行one-hot编码的小实践. 文本的one-hot相对而言比较简单,我用了两种方法, ...

  7. springboot~注册bean的方法

    spring在启动时会自己把bean(java组件)注册到ioc容器里,实现控制反转,在开发人员使用spring开发应用程序时,你是看不到new关键字的,所有对象都应该从容器里获得,它们的生命周期在放 ...

  8. FastDFS分布式文件系统&Nginx负载均衡最小环境安装配置[超级详解]

    1.背景 FastDFS 是一款开源的.分布式文件系统(Distributed File System),由淘宝开发平台部资深架构师余庆开发.该开源项目的主页是 http://code.google. ...

  9. SpringMVC之Controller和参数绑定

    在上一篇Spring+SpringMVC+Mybatis整合中说到了SSM的整合,并且在其中添加了一个简单的查询功能,目的只是将整个整合的流程进行一个梳理,下面在上一篇中工程的基础上再说一些关于Spr ...

  10. DS控件库 DS标签的另类用法之折叠展开

    某些场合下,可以通过动态设置DS标签的文本内容来输出不同的显示效果,以下是示例. 示例中的素材   示例资源文本 String1="<linkimg=E1><b>&l ...