excel插件demo

跳转页，因为在body里面不可以正常使用点击事件，绑定的事件不可以触发.

网址http://115.238.31.37/sheet/excel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
#include("/view/config.html")

<link data-jsfiddle="common" rel="stylesheet" media="screen" href="#(cxt ??)/view/excel/handsontable/samples.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="#(cxt ??)/view/excel/handsontable/handsontable.full.css">
<script data-jsfiddle="common" src="#(cxt ??)/view/excel/handsontable/handsontable.full.js"></script>
<title>spreadsheet</title>
</head>
<body>
<div>
<button id="load">读取</<button>
<button id="save">保存</<button>
<button id="bold">加粗</button>
<button id="fontSize">字体大小</button>
<button id="backgroundColor">背景色</button>
<button id="fontColor">字体色</button>
<button id="mergeCell">合并单元格</button>
</div>

</body>
<script type="text/javascript">
// 读取
$('#load').click(function() {
window.frames[0].eventHandler.load();
});
// 保存
$('#save').click(function() {
window.frames[0].eventHandler.save();
});
//合并单元格
$("#mergeCell").click(function(){
window.frames[0].eventHandler.andCell();
})
// 字体加粗
$("#bold").click(function(){
window.frames[0].eventHandler.addBold();
})
// 改变背景颜色
$("#backgroundColor").click(function(){
var backgroundcan="green";
window.frames[0].eventHandler.changeBackground(backgroundcan);
})
// 改变字体颜色
$("#fontColor").click(function(){
var colorcan="red";
window.frames[0].eventHandler.changeColor(colorcan);
})
// 改变字体大小
$("#fontSize").click(function(){
var fontSizecan="21px"
window.frames[0].eventHandler.changeFontSize(fontSizecan);
})
</script>

<iframe src="#(cxt ??)/excel/content" style="width:800px;height:300px;"></iframe>
</html>

对应的iframe文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
#include("/view/config.html")

<link data-jsfiddle="common" rel="stylesheet" media="screen" href="#(cxt ??)/view/excel/handsontable/samples.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="#(cxt ??)/view/excel/handsontable/handsontable.full.css">
<script data-jsfiddle="common" src="#(cxt ??)/view/excel/handsontable/handsontable.full.js"></script>

<title>spreadsheet</title>
</head>
<body>

<div id="example"></div>

</body>
<script type="text/javascript">
var Font = function() {
var baseFonts = [ 'monospace', 'sans-serif', 'serif' ];
var testString = "mmmmmmmmmmlli";
var testSize = '72px';
var h = document.getElementsByTagName("body")[0];
var s = document.createElement("span");
s.style.fontSize = testSize;
s.innerHTML = testString;
var defaultWidth = {};
var defaultHeight = {};

for ( var index in baseFonts) {
s.style.fontFamily = baseFonts[index];
h.appendChild(s);
defaultWidth[baseFonts[index]] = s.offsetWidth;
defaultHeight[baseFonts[index]] = s.offsetHeight;
h.removeChild(s);
}

var match = function(font) {
var detected = false;
for ( var index in baseFonts) {
s.style.fontFamily = font + ',' + baseFonts[index];
h.appendChild(s);
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
h.removeChild(s);
detected = detected || matched;
}
return detected;
}

var filter = function(_fontList) {
var fontList = [];
for(var i=0; i<_fontList.length; i++) {
if(match(_fontList[i])) fontList.push(_fontList[i]);
}

return fontList;
}

return {
match: match,
filter: filter
}

this.match = match;
};

var fontList = [
'方正舒体',
'方正姚体',
'宋体',
'黑体',
'仿宋GB2312',
'楷体GB2312',
'华文彩云',
'华文仿宋',
'华文细黑',
'华文新魏',
'华文行楷',
'华文中宋',
'隶书',
'幼圆',
'新宋体',
'Arial'
];
var getbackgrcolor=function(backgroundColor){
return String(backgroundColor);
};
var Renderer = function(instance,td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
switch(true){
case !!arguments[6].data.backgroundColorkey:

td.style.backgroundColor=arguments[6].data.backgroundColorkey;

case arguments[6].data.colorkey!==undefined:

td.style.color=arguments[6].data.colorkey;

case arguments[6].data.fontSizekey!==undefined:

td.style.fontSize=arguments[6].data.fontSizekey;

case arguments[6].data.fontweigth!==undefined:
td.style.fontWeight=arguments[6].data.fontweigth;

}

//td.style.backgroundColor = getbackgrcolor("green");
//arguments[6].data={backgroundColor:"green"};
};
// var addBoldRender=function(instance, td, row, col, prop, value, cellProperties){
// Handsontable.renderers.TextRenderer.apply(this, arguments);
// //arguments[6].data={fontWeight:"bold"};
// td.style.fontWeight ="bold";
// };
// var FontSizeRender=function(instance,td, row, col, prop, value, cellProperties){
// Handsontable.renderers.TextRenderer.apply(this, arguments);
// //arguments[6].data={fontWeight:"bold"};
// td.style.fontSize ="17px";
// };
// var changeColorRender=function(instance, td, row, col, prop, value, cellProperties){
// Handsontable.renderers.TextRenderer.apply(this, arguments);
// //arguments[6].data={fontWeight:"bold"};
// td.style.color ="red";
// };
var setting, settingFn = {
afterChange: function(changes, source, c, d) {
console.log(setting.data);
}
};

var getCell = function(cells, row, col) {
var cell = {};
$(cells).each(function(i, e) {
if(e.row==row && e.col==col) cell = e;
});
return cell;
}

setting={
rowHeaders: true,
colHeaders: true,
mergeCells:[],
contextMenu: true,
cell:[]
// cells:function(row, col, prop){
// this.renderer = Renderer;
// },
}
var hot = new Handsontable($('#example')[0], setting);
var row,col,rowspan,colspan;
var minbackRow,minbackCol,maxbackRow,maxbackCol
var eventHandler = {
load: function() {
$.ajax({
url:global.cxt+'/excel/load',
async:false
}).done(function(res){
if(res && res.code==0) {
setting = res.data;
if(setting.cell) {
$(setting.cell).each(function(i, e) {
e.renderer = Renderer;
});
}
$.extend(setting, settingFn);
hot.updateSettings(setting);
} else {
console.log('/excel/load 错误');
}
});
},
save: function() {
setting.data = hot.getData();
$.ajax({
url:global.cxt+'/excel/save',
data: {setting: JSON.stringify(setting)},
async:false
}).done(function(res){
console.log('setting success');
});
},
/*
合并单元格
*/
andCell:function(){
if(setting.mergeCells==true){
setting.mergeCells=[]
}
fouPos=hot.getSelected();
row=fouPos[0];
col=fouPos[1];
rowspan=fouPos[2]-fouPos[0]+1;
colspan=fouPos[3]-fouPos[1]+1;
var d={"row":row, "col":col, "rowspan":rowspan, "colspan":colspan}
setting.mergeCells.push(d);
$.extend(setting, settingFn);
hot.updateSettings(setting);
},
/*
改变背景颜色
*/
changeBackground:function(backgroundColor){
fouPos=hot.getSelected();
minbackRow=fouPos[0]; minbackCol=fouPos[1];maxbackRow=fouPos[2];maxbackCol=fouPos[3];
for(var i=minbackRow;i<maxbackRow+1;i++){
for(var l=minbackCol;l<maxbackCol+1;l++){
var cell=getCell(setting.cell,i,l);
//0getCell(setting.cell, i, l);
$.extend(true,cell,{row: i, col: l, renderer: Renderer, data: {backgroundColorkey:backgroundColor}})
//var f={row: i, col: l, renderer: Renderer, data: {backgroundColorkey:backgroundColor}}
setting.cell.push(cell);

}
}
$.extend(setting, settingFn);
hot.updateSettings(setting);
},
/*
改变字体颜色
*/
changeColor:function(colorcan){
fouPos=hot.getSelected();
minbackRow=fouPos[0]; minbackCol=fouPos[1];maxbackRow=fouPos[2];maxbackCol=fouPos[3];
for(var i=minbackRow;i<maxbackRow+1;i++){
for(var l=minbackCol;l<maxbackCol+1;l++){
var cell = getCell(setting.cell, i, l);
$.extend(true, cell, {row: i, col: l, renderer: Renderer, data: {colorkey:colorcan}});
setting.cell.push(cell);

}
}
$.extend(setting, settingFn);
hot.updateSettings(setting);
},
/*
加粗
*/
addBold:function(){
fouPos=hot.getSelected();
minbackRow=fouPos[0]; minbackCol=fouPos[1];maxbackRow=fouPos[2];maxbackCol=fouPos[3];
for(var i=minbackRow;i<maxbackRow+1;i++){
for(var l=minbackCol;l<maxbackCol+1;l++){
var cell=getCell(setting.cell,i,l);
$.extend(true,cell,{row: i, col: l, renderer: Renderer, data: {fontweigth:"bold"}})
setting.cell.push(cell);

}
}
$.extend(setting, settingFn);
hot.updateSettings(setting);
},
/*
改变字体大小
*/
changeFontSize:function(fontSizecan){
fouPos=hot.getSelected();
minbackRow=fouPos[0]; minbackCol=fouPos[1];maxbackRow=fouPos[2];maxbackCol=fouPos[3];
for(var i=minbackRow;i<maxbackRow+1;i++){
for(var l=minbackCol;l<maxbackCol+1;l++){
var cell=getCell(setting.cell,i,l);
$.extend(true,cell,{row: i, col: l, renderer: Renderer, data: {fontSizekey:fontSizecan}})
setting.cell.push(cell);

}
}
$.extend(setting, settingFn);
hot.updateSettings(setting);
}
}
//合并单元格
var fouPos;
var selectFirst = document.getElementById('mergeCell');
</script>
</html>

猜你喜欢