jQuery仿Excel表格编辑功能的实现代码


Posted in Javascript onMay 01, 2013

在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制、Ctrl+C 、Ctrl+V 等等。

另外在浏览器支持方面,它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera。

如何使用:
     首先在页面中引入 jQuery 框架和 Handsontable 插件的相关 JS 和 CSS 文件,以下列出的两个是必要的,还有其它的是可选的,如果需要某个功能时就(参看demo)加上。

    <script src="jquery.min.js"></script>
    <script src="jquery.handsontable.full.js"></script>
    <link rel="stylesheet" href="jquery.handsontable.full.css">

然后添加一个用于呈现 Excel 编辑表格的 DIV 层

<div id="example1" ></div>

最后就可以对其进行初始化了

//数据
            var data = [
              {id: 1, name: "Ted", isActive: true, color: "orange"},
              {id: 2, name: "John", isActive: false, color: "black"},
              {id: 3, name: "Al", isActive: true, color: "red"},
              {id: 4, name: "Ben", isActive: false, color: "blue"}
            ];
            //黄色渲染方法
            var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'yellow'
              });
            };
            //绿色渲染方法
            var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'green'
              });
            };
            //初始化
            var $container = $("#example1");
            $container.handsontable({
              data: data,
              startRows: 5,
              colHeaders: true,
              minSpareRows: 1,
              columns: [
                {data: "id"},
                {data: "name", type: {renderer: yellowRenderer}}, //黄色渲染
                {data: "isActive", type: Handsontable.CheckboxCell}, //多选框
                {data: "color",
                  type: Handsontable.AutocompleteCell, //自动完成
                  source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //数据源
                }
              ],
              cells: function (row, col, prop) {
                if (row === 0 && col === 0) {
                  return {type: {renderer: greenRenderer}};
                }
              }
            });

注意是div容器加载完了之后进行初始化:

demo代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Demo</title>
    <script src="jquery.min.js"></script>
    <script src="jquery.handsontable.full.js"></script>
    <link rel="stylesheet" href="jquery.handsontable.full.css">
    <script>
        $(function(){
            //数据
            var data = [
              {id: 1, name: "Ted", isActive: true, color: "orange"},
              {id: 2, name: "John", isActive: false, color: "black"},
              {id: 3, name: "Al", isActive: true, color: "red"},
              {id: 4, name: "Ben", isActive: false, color: "blue"}
            ];
            //黄色渲染方法
            var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'yellow'
              });
            };
            //绿色渲染方法
            var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              $(td).css({
                background: 'green'
              });
            };
            //初始化
            var $container = $("#example1");
            $container.handsontable({
              data: data,
              startRows: 5,
              colHeaders: true,
              minSpareRows: 1,
              columns: [
                {data: "id"},
                {data: "name", type: {renderer: yellowRenderer}}, //黄色渲染
                {data: "isActive", type: Handsontable.CheckboxCell}, //多选框
                {data: "color",
                  type: Handsontable.AutocompleteCell, //自动完成
                  source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] //数据源
                }
              ],
              cells: function (row, col, prop) {
                if (row === 0 && col === 0) {
                  return {type: {renderer: greenRenderer}};
                }
              }
            });
        });
    </script>
</head>
<body>
    <div id="example1" ></div>
</body>
</html>
Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
实例详解Node.js 函数
Jun 10 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
JavaScript 实现类的多种方法实例
May 01 #Javascript
Json字符串转换为JS对象的高效方法实例
May 01 #Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 #Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 #Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 #Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
You might like
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python中偏函数用法示例
2018/06/07 Python
python实现随机梯度下降法
2020/03/24 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python 绘制可视化折线图
2020/07/22 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
设计大赛策划方案
2014/06/13 职场文书
工作检讨书范文
2015/01/23 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
《植树问题》教学反思
2016/03/03 职场文书
导游词之江西赣州
2019/10/15 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers