页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

类似Excel的jquery/VUE电子表格插件jExcel(推荐)

表格 其它源码 HTML我帮您 18天前  次浏览
jexcel.js是一款轻量级的类似Excel的jquery电子表格插件,作者还兼容了VUE。你可以同js数组、json数据或CSV或XSLX文件创建在线电子表格表,你甚至可以直接从一个Excel表格中直接复制粘贴数据到jexcel表格中,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格 。
很容易集成任何第三方的javascript插件来创建您自己的自定义列、自定义编辑器,并自定义应用程序中的任何功能。Jexcel通过其本机列类型具有许多不同的输入选项,以满足最常见的基于Web的应用程序需求。它是一个完整的Web数据管理解决方案。使用jexcel javascript电子表格创建令人惊叹的应用程序。
类似Excel的jquery/VUE电子表格插件jExcel
主要优势
制作丰富且用户友好的Web界面和应用程序
您可以以使用用户的方式轻松处理复杂的数据输入
改善用户软件体验
创建丰富的cruds和漂亮的用户界面
与Excel的兼容性:用户可以使用常见的复制粘贴快捷方式移动数据
通过第三方插件集成轻松定制
精益、快速、简单易用
数千个成功的用户案例

在基于Web的软件中加快处理困难数据输入的工作速度

<html>
<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />

<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];

jexcel(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', title:'Car', width:120 },
        { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
        { type: 'calendar', title:'Available', width:200 },
        { type: 'image', title:'Photo', width:120 },
        { type: 'checkbox', title:'Stock', width:80 },
        { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
        { type: 'color', width:100, render:'square', }
     ]
});
</script>
</html>

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<input type="button" value="Add new row" onclick="vm.insertRow()" />

<script>
var options = {
    data:[[]],
    minDimensions:[10,10],
}

var vm = new Vue({
    el: '#spreadsheet',
    mounted: function() {
        let spreadsheet = jexcel(this.$el, options);
        Object.assign(this, spreadsheet);
    }
}); 
</script>

相关链接

发表评论