前端可编辑表格插件有哪些
前端可编辑表格插件有哪些
一、总结
一句话总结:jQuery Handsontable和jExcel.js
1、常用的可编辑表格插件有哪些?
jQuery Handsontable和jExcel.js
2、为什么可以考虑使用表格插件?
表格插件的话对表格做的比较精致,好看,而且提供了一般的常用的功能。
二、jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】
jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格,通过HTML,JavaScript和jQuery可以对它进行实现)
我们来简单介绍下0.10.0-beta4,此版本也是最新版本,当然可能会有一些bug,但是,对于这种开源项目,我们也应该抱着一种尝试与学习的心态去面对,所以,我们就学习一下它的最新版本,同时如果大家发现bug还可以给作者提出,学习的乐趣不就在其中吗?
这个版本更加的灵活,它提供了更多的钩子方法(例如:事件和回调机制)和更多的灵活的操作,同时该版本兼容0.8版本的API,当然有一些具体的变化,大家可以看具体变化细节。
在其官网中http://handsontable.com/我们可以看到非常好的演示效果,同时你可以点击Edit in jsFiddle进入在线编辑模式(jsFiddle是一款非常好用的js在线编辑演示工具,想在博客上演示自己的成果的js工程师们有福了),同时,我们可以点击Hide source code展现出来简单的代码。
例子及指南
Appearance
- Cell renderers
- Custom HTML
- Scroll bars / Column stretch
- Native scroll window BETA
- Native scroll div BETA
- Conditional formatting
- Pre-populate new rows
- Highlight current row/col
- Column sorting
- Column resize & move
- Fixed rows/columns
- Pagination
Cell types
- Numeric
- Date
- Checkbox
- Dropdown NEW
- Autocomplete
- Password
- Handsontable
Editing
- Validation
- Drag-down
- Custom buttons
- Context menu
- Read-only cells
- Search of values
Integration
- Understand binding as reference
- Array, object, function data source
- Load & Save (Ajax)
- Options
- Callbacks beforeKeyDown
Backbone.js Twitter Bootstrap W3C Web Components (beta)
这个表格的非常重要的特性就是它能够像Excel表格那样,比如说 (1)你拖住右下角的一部分就可以将其复制单元格中的内容,当然这个只有当我们页面上有类似这种Excel表格页面编辑的时候,我们才可以这样使用,因为本身如果说你什么表格都使用这方面的功能的话,其实会让用户感觉到有”陷阱的感觉“,也就是说不能将一些本身不需要的功能直接加到页面上,会造成功能大于页面表现的这么一种情况,如果大家了解设计的话,可能我不太明了的表述,大家就不会感觉到空洞了; (2)另外一点就是一些头信息之类的都可以进行自定义修改,比较灵活,同时将一些日历插件封装,风格统一了,所以这样看来,还是非常不错的选择
三、jExcel.js-类似Excel的jquery电子表格插件
浏览《jExcel.js-类似Excel的jquery电子表格插件》小提示:
- 文章若附带资源/案例下载、效果/视频/动画演示,一般在文章底部资源列表里有提供
- 文章清晰的要点多数有加粗提示,多留意
- 涉及到代码地方,有清晰的代码样式。
- 文章内蓝色字体,多是本文的相关链接。
- 好文可以收藏到您个人的会员中心
- 要查阅跟本文相关的大量信息,可以访问专属栏目《Jquery》
jexcel.js是一款轻量级的类似Excel的jquery电子表格插件。你可以同js数组、json数据或CSV文件来为jexcel表格提供数据,你甚至可以直接从一个Excel表格中直接复制粘贴数据到jexcel表格中。
使用方法
在页面中引入jquery、jquery.jexcel.js和jquery.jexcel.css文件。
<link rel="stylesheet" type="text/css" rel="nofollow" href="css/jquery.jexcel.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.jexcel.js"></script>
HTML结构
使用一个<div>
容器作为jexcel表格的容器。
<div id="my"></div>
初始化插件
在页面DOM元素加载完毕之后,通过下面的代码来初始化jexcel表格。
data = [['Google', 1998, 807.80],['Apple', 1976, 116.52], ['Yahoo', 1994, 38.66], ]; $('#mytable').jexcel({ data:data, colWidths: [ 300, 80, 100 ] });
下面是一张带日期的jexcel表格的截图效果:
更多关于jexcel.js表格插件的信息,可以参考官方网站:http://bossanova.uk/jexcel
四、用表格插件的必要性
转载于:https://www.cnblogs.com/Renyi-Fan/p/9289718.html
前端可编辑表格插件有哪些相关推荐
- html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable
插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件.通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑. 更新时间:2019-11-2 ...
- vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
- 使用js-export-excel插件实现前端导出excel表格
js-export-excel 前端导出excel模板 1.下载 npm install js-export-excel 2.使用 /*** * 前端生成excel 表格(基于 js-export-e ...
- Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
- 前端表格插件Jquery DataTable简单汉化
前端表格插件Jquery DataTable简单汉化 项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...
- jeecgboot前端自定义组件、JgEditable Table行编辑表格
上一篇 本次示例全部是在新建的Demo.vue中操作 jeecgboot前端自定义组件 1.首先,在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/mo ...
- 前端表格插件 BootstrapTable API 参数查询。
官网地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Github地址: https://github.com/wenzhixin/bootstra ...
- java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件 直接上插件API:链接地址 感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖 后端: pom文件添加: 1.7.0.RELEASE ...
- ABP入门系列(14)——应用BootstrapTable表格插件
1. 引言 之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台web分页,在后台管理系统中并不适用.后台管理系统中的数据展示一般都是使用一些表格插件来完成的.这 ...
最新文章
- P6097-[模板]子集卷积
- 从安全和不安全两个角度,教你如何发布对象(含各种单例代码)
- ViedoUtil获取视频的缩略图
- 如何设置ubuntu的PATH环境变量
- [hdu 1003] Max Sum
- 深入理解Java虚拟机——VisualVM工具的下载及安装
- 景观设计建模中最常用的SU插件有哪些?
- linux上的pcb设计软件,PCB设计软件(CadSoft Eagle Professional)
- 图片像素低,图片模糊怎么变清晰?
- 计算机很多术语都是cat,18 个开源翻译工具帮助你的项目本地化
- 关于阿里云个人网站备案流程的介绍
- AGV、IGV、RGV这三者之间的区别浅析
- RLC并联谐振电路分析
- qq发消息时键盘挡住了_键盘挡住输入框解决办法
- java手机振动软件_Android实现手机震动效果
- WORD禁止自动更新域
- JAVA信息管理系统毕业设计 开题报告
- git commit报错subject may not be empty
- 赛扬n5095和r55500u哪个好
- 月光族开始反消费主义:58万年轻人攒钱攒到“丧心病狂”
热门文章
- C#笔记之移位运算符
- 微课在初中计算机教学中的运用,微课视频应用在初中信息技术教学中的几点体会论文...
- PageHelper关于Mybatis一对多查询返回Total错误
- leaflet百度坐标转天地图坐标(bd09转大地2000)(leaflet篇.56)
- [组图]Nokia PC Connectivity SDK 3.0入门(转)
- c 语言结构体类型转换,C 语言编程 — 结构体的数据类型转换
- android平台短视频技术之 视频编辑的经验分享
- 建筑结构中常见的CAD技巧
- 如何取循环数组里面的数组对象
- 刚刚,Science发布2019十大科学突破!