jQuery实现仿Excel表格编辑功能 - Handsontable

编程之家收集整理的这篇文章主要介绍了jQuery实现仿Excel表格编辑功能 - Handsontable编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

前言:

  Handsontable 是一个相当给力的 jQuery 插件,它实现了 HTML 页面中的表格编辑功能,并且是仿 Excel 的编辑效果

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

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

如何使用:

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

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

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

<div id="example1" >

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

            //数据
            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代码

<Meta charset="UTF-8">Basic Demo<script src="jquery.min.js"><script src="jquery.handsontable.full.js"><link rel="stylesheet" href="jquery.handsontable.full.css">
        $(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}};
                }
              }
            });
        });    " _ue_custom_node_="true"><div id="example1" >


总结

以上是编程之家为你收集整理的jQuery实现仿Excel表格编辑功能 - Handsontable全部内容,希望文章能够帮你解决jQuery实现仿Excel表格编辑功能 - Handsontable所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); //获取到canvas
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($(&quot;#&quot;+id).val());例如:使用id设置隐藏控件 $(&quot;.img&quot;).mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/&amp;lt;a id=&quot;(...
使用js去除字符串内所带有空格,有以下三种方法:( 1 ) replace正则匹配方法去除字符串内所有的空格:str = str.replace(/s*/g,&quot;&quot;);去除字符串内两头的空格:str = str.replace(/^s*|s*$/g,&quot;&quot;);去除字符串内左侧的空格:str = str.replace(/^s*/,&quot;&quot;);去除字符串内右侧的...
1.开启disabled,是input不可以编辑$(&quot;#input_id&quot;).attr(&quot;disabled&quot;,&quot;disabled&quot;);2.关闭disabled$(&quot;#input_id&quot;).removeAttr(&quot;disabled&quot;);普通js中是这样写的,document.getElementById(&quot;input_id&quot;).disabled = false;...
最近自学了一段时间的HTML、CSS、JavaScript、jQuery。通过自己这段时间学到的一点小知识,自己制作了一个小app------简易备忘录在此简单记录一下,同时也希望有更好创意的朋友提出改进意见或者指++++++++++++++++++++++++++++++++++++++++++++++++++++++++++开发工具:HBui
http://www.runoob.com/jquery/jquery-chaining.htmljQuery- 链(Chaining)通过jQuery,可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)。jQuery方法链接直到现在,我们都是一次写一条jQuery语句(一条接着另一条)。不过,有一
jQuery拥有以下滑动方法:slideDown(),slideUp(),slideToggle()1、jQueryslideDown()方法用于向下滑动元素。$(selector).slideDown(speed,callback);可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。可选的callback参数是滑动完成后所执行的函数名称
一、宽度和高度获取宽度.width()描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推