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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js获取和设置属性的方法
Feb 20 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
在网页中屏蔽快捷键
2006/09/06 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Pytorch之保存读取模型实例
2019/12/30 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
英文版销售经理个人求职信
2013/11/20 职场文书
上学迟到的检讨书
2014/01/11 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
陈欧广告词
2014/03/14 职场文书
企业党员一句话承诺
2014/05/30 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
武侯祠导游词
2015/02/04 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL