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第一课
Feb 27 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
广告显示判断
2006/08/31 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
快速查询Python文档方法分享
2017/12/27 Python
详解python字节码
2018/02/07 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
某公司.Net方向面试题
2014/04/24 面试题
销售工作岗位职责
2013/12/24 职场文书
打架检讨书800字
2014/01/10 职场文书
运动会稿件300字
2014/02/14 职场文书
政府法律服务方案
2014/06/14 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
给领导敬酒词
2015/08/12 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS