javascript excel插件(类似excel的前端插件)

jExcel是一个轻量级的本地javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于web的交互式表格和电子表格。您可以从JS array、JSON、CSV或XSLX文件创建在线电子表格。它可以从excel中复制并直接粘贴到jExcel电子表格中,反之亦然。集成任何第三方javascript插件都非常容易。您可以创建自己的定制列、定制编辑器以及定制应用程序中的任何功能。JExcel通过其本地列类型提供了大量不同的输入选项,以满足最常见的基于Web的应用程序需求。这是一个完整的网络数据管理解决方案。使用jExcel javascript电子表格创建优秀的应用程序。
开放源地址https://github.com/paulhodel/jexcel
主要优点丰富且用户友好的Web界面和应用程序能够以用户的方式轻松处理复杂的数据输入。改善用户的软件体验创建丰富的CRUDS和美观的UI与excel兼容:用户可以使用常见的复制和粘贴快捷方式来移动数据。通过简单的第三方插件集成轻松定制。精简、快速且易于使用。数以千计的成功用户案例加速了在基于网络的软件中处理复杂数据输入的工作。安装。使用npm install jexcel简单示例将javascript电子表格集成到站中。创建第一个在线电子表格的基本示例:
1.首先介绍一下相关的js和css文件。
2.基于P定义一个容器,写js。
3.打开浏览器查看效果。
这些简单的代码就像打开了一个无限简化的Excel。
查看DEMOGithub上的演示。让我们来看看它们。
搜索和分页jexcel(文档。getelementbyid(‘电子表格’),{ CSV : ‘ https://bossanova。英国/jexcel/v3/demo。CSV ‘,csvHeaders:true,search:true,pagination:10,columns: [ { type:’text ‘,width:300 },{ type :200 },{ type 33:200 }列类型支持textnumerichiddendropdowneautocompletecheckboxradicalendarimagecolorvar data=[‘ Jazz ‘,’ Honda ‘,’ 2019-02-12 ‘,”,true,’ $ 2.000,00 ‘,’ #777700′],[‘思域,’本田’,’ 2018-07-11 ‘,”,真,’ $ 4.000,01 ‘,’ # 007777 ‘];jexcel(文档。getelementbyid(‘ spread sheet ‘),{ data:data,columns: [ { type: ‘text ‘,title:’Car ‘,width : ‘ drop down },title:’Make ‘,width:200,source 3360[\ ‘ Alfa Romeo \ ‘,\’Audi\ ‘,\’Bmw\’ ] },{ type: ‘calendar##,00 ‘,decimal: ‘,’ }。下拉框var data=[‘ US ‘,’ Wholemeal ‘,’ Yes ‘,’ 2019-02-12′],[‘ CA;我们;英国’,’早餐麦片’,’是,’ 2019-03-01′],[‘ CA;BR ‘,’五谷’,’否,’ 2018-11-10′],[‘BR ‘,’面食’,’是’,’ 2019-01-12′],];jexcel(文档。getelementbyid(‘ spread sheet ‘),{ data:data,columns :[{ type : ‘ drop down ‘,width:’300 ‘,title:’Product Origin ‘,url:’/jexcel/countries ‘,autocomplete:true,multiple:true },{ type: ‘ text ‘,width:’200 ‘,title:’Description’ },日期时间选择框var data=[‘ Flag Fen ‘,’ South East ‘,’ 2019-01-01′],[‘Bristol Aero Collection (BAC ‘,’ South West ‘,’ 2019-04-03′],[‘Experience Barnsley ‘,’ North ‘,’ 2018-12-03′],[‘Cinema Museum ‘,’ London ‘,’ ‘],[‘ University of Hertfordshire Art Collection ‘,’ ‘],[‘LUX London ‘,’ London ‘,’ 2016-11-03 ‘,];jexcel(文档。getelementbyid(‘ spread sheet ‘),{ data:data,columns: [ { type:’text ‘,title:’Museum ‘,width:’300 ‘,},{ type:’dropdown ‘,title:’Region ‘,source:[‘South East ‘,’ South West ‘,’ North ‘,’ London’],width:’200 ‘,},{ type: ‘ calendar ‘,上传图片到表格jexcel(文档。getelementbyid(‘ spread sheet ‘),{ data:data,columns: [ { type:’text ‘,width:300,title:’Title’ },{ type:’image ‘,width:120,title: ‘ Cover ‘ },]);表格操作插入,移除和移动列和行,这块就是表格的相关操作了,都可以通过相关应用程序界面实现
表头杰克斯尔电子表格使用指令nestedHeadrs本机实现嵌套头文件,如下面的示例所示。
导出导出非常简单,就调用一个方法
mySpreadsheet=jexcel(document。getelementbyid(‘电子表格1 ‘),{ CSV : ‘ https://bossanova。英国/jexcel/v3/demo。CSV ‘,csvHeaders:true,columns: [ { type:’text ‘,width:70 },{ type:’text ‘,width:200 },{ type 3: ‘ text ‘,width :300 document . getelementbyid(‘下载’)。onclick=function(){ myspreadsheet。下载();}由于相关示例比较丰富,包括合并单元格、懒加载等丰富的功能等再此就不在展示,已经对它感兴趣的小伙伴不妨直接去体验下,就能感受到它的强悍了!并且还提供了包括React、Vue、jQuery等在内的相关实现,这样你就可以更好的集成到你的相关项目中去了,非常的人性化!
jExcel是一个非常简单且功能丰富的Web端JavaScript电子表格。就像它的名字一样,它就像Web端的Excel,相当于Excel的表单模块。在数据处理和用户操作上比普通的HTML表单好了无限。相信已经有朋友想要尝试了。赶紧试试吧!希望对你有帮助!

其他教程

视频制作工具(视频制作电脑配置推荐)

2022-8-31 4:38:26

其他教程

陪孩子一起看的动画电影(适合万圣节看的动画片)

2022-8-31 4:40:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索