首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:39:23
字体:
来源:转载
供稿:网友

  在 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'
              });

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选