欢迎光临小鱼网个人网站!

登录/注册
JavaScript的Excel插件——JExcel

1、首先引入相关js和css文件

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

<div id="mytable"></div>
<script>
 data = [
 ["苹果", 0, 1],
 ["草莓", 1, 2],
 ["西瓜", 2, 3]
 ];
 jexcel(document.getElementById("mytable"), {
 data: data,
 colWidths: [300, 80, 100]
 });
</script>
  • 搜索和分页

jexcel(document.getElementById('spreadsheet'), {
 csv:'https://bossanova.uk/jexcel/v3/demo.csv',
 csvHeaders:true,
 search:true,
 pagination:10,
 columns: [
 { type:'text', width:300 },
 { type:'text', width:200 },
 { type:'text', width:100 },
 { type:'text', width:100 },
 { type:'text', width:100 },
 ]
});
  • 列类型支持

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', }
 ]
});
  • 下拉框

var data = [
 ['US', 'Wholemeal', 'Yes', '2019-02-12'],
 ['CA;US;UK', 'Breakfast Cereals', 'Yes', '2019-03-01'],
 ['CA;BR', 'Grains', 'No', '2018-11-10'],
 ['BR', 'Pasta', 'Yes', '2019-01-12'],
];
jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 { type:'dropdown', width:'300', title:'Product Origin', url:'/jexcel/countries', autocomplete:true, multiple:true },
 { type:'text', width:'200', title:'Description' },
 { type:'dropdown', width:'100', title:'Stock', source:['No','Yes'] },
 { type:'calendar', width:'100', title:'Best before' },
 ]
});
  • 日期时间选择框

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', 'South East',''],
 ['LUX London', 'London','2016-11-03'],
];
jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 {
 type:'text',
 title:'Museum',
 width:'300',
 },
 {
 type:'dropdown',
 title:'Region',
 source:['South East','South West','North','London'],
 width:'200',
 },
 {
 type:'calendar',
 title:'Last visit',
 options: { format:'DD/MM/YYYY' },
 width:'100',
 },
 ]
});
  • 上传图片到表格

jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 { type:'text', width:300, title:'Title' },
 { type:'image', width:120, title:'Cover' },
 ]
});
  • 导出

mySpreadsheet = jexcel(document.getElementById('spreadsheet1'), {
 csv:'https://bossanova.uk/jexcel/v3/demo.csv',
 csvHeaders:true,
 columns: [
 { type:'text', width:70 },
 { type:'text', width:200 },
 { type:'text', width:300 },
 ]
});
document.getElementById('download').onclick = function () {
 mySpreadsheet.download();
}


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。