body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 95%;
background: rgb(250, 250, 250);
margin: 0 auto;
height: 600px;
}
.full-height {
height: 100%;
}
.left{
height: 100%;
overflow: auto;
}
单元格类型
说明:右图展示了多种单元格类型:
按钮单元格、复选框单元格、普通组合框单元格、超链接单元格
自定义单元格
var spreadNS = GC.Spread.Sheets;
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var spreadNS = GC.Spread.Sheets;
sheet.suspendPaint();
sheet.name('基本应用');
// 按钮
sheet.setValue(1,1,'按钮类型');
sheet.setColumnWidth(4, 110);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(2, 110);
sheet.setColumnWidth(1, 180);
sheet.setColumnWidth(0, 10);
sheet.setRowHeight(1, 50);
sheet.setRowHeight(2, 50);
// 创建单元格类型对象
var b0 = new spreadNS.CellTypes.Button();
b0.text("按钮1");
b0.marginLeft(0);
b0.marginTop(0);
b0.marginRight(15);
b0.marginBottom(15);
b0.buttonBackColor('gray');
var b1 = new spreadNS.CellTypes.Button();
b1.text("按钮2");
b1.marginLeft(15);
b1.marginTop(15);
b1.marginRight(15);
b1.marginBottom(15);
b1.buttonBackColor('red');
var b2 = new spreadNS.CellTypes.Button();
b2.text("按钮3");
b2.marginLeft(15);
b2.marginTop(15);
b2.marginRight(0);
b2.marginBottom(0);
b2.buttonBackColor('green');
// SetCellType方法将单元格类型对象设置到单元格上
sheet.setCellType(1,2,b0,spreadNS.SheetArea.viewport);
sheet.setCellType(1,3,b1,spreadNS.SheetArea.viewport);
sheet.setCellType(1,4,b2,spreadNS.SheetArea.viewport);
// checkbox
var c = new GC.Spread.Sheets.CellTypes.CheckBox();
c.isThreeState(true);
c.textTrue('已选中');
c.textFalse("未选中");
c.textIndeterminate('不确定');
c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
var c1 = new spreadNS.CellTypes.CheckBox();
c1.isThreeState(false);
c1.textTrue('已选中');
c1.textFalse("未选中");
c1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
var c2 = new spreadNS.CellTypes.CheckBox();
c2.caption('CheckBox');
sheet.setCellType(2,2,c,spreadNS.SheetArea.viewport);
sheet.setCellType(2,3,c1,spreadNS.SheetArea.viewport);
sheet.setCellType(2,4,c2,spreadNS.SheetArea.viewport);
sheet.setValue(2,1,"checkbox类型");
c2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
// comboBox
var combo = new spreadNS.CellTypes.ComboBox();
combo.items([{ text: "选项1", value: "11" }, { text: "选项2", value: "22" }, { text: "选项3", value: "33" }]);
// text 、index、value 将选中项目的文本值(下表、数据值)写入数据模型中
combo.editorValueType(spreadNS.CellTypes.EditorValueType.text);
combo.editable(true).editorValueType(spreadNS.CellTypes.EditorValueType.value);
combo.itemHeight(24);
var combo1 = new spreadNS.CellTypes.ComboBox();
combo1.items([{ text: "选项1", value: "11" }, { text: "选项2", value: "22" }, { text: "选项3", value: "33" }]);
combo1.editorValueType(spreadNS.CellTypes.EditorValueType.text);
combo1.editable(false).editorValueType(spreadNS.CellTypes.EditorValueType.text);
combo1.itemHeight(44);
sheet.getCell(3, 2, spreadNS.SheetArea.viewport).cellType(combo).value("选项1");
sheet.setValue(3, 1, "ComboBox类型可编辑");
sheet.getCell(4, 2, spreadNS.SheetArea.viewport).cellType(combo1).value("选项1");
sheet.setValue(4, 1, "ComboBox类型不可编辑");
sheet.setFormula(3, 3, "=C4");
sheet.setFormula(4, 3, "=C5");
//超链接
var h = new spreadNS.CellTypes.HyperLink();
h.text("SpreadJS Overview");
sheet.setCellType(5, 2, h, spreadNS.SheetArea.viewport);
sheet.getCell(5, 2, spreadNS.SheetArea.viewport).value("http://www.grapecity.com/en/spreadjs/");
sheet.setValue(5, 1, "超链接类型");
h.linkColor('red');
h.visitedLinkColor('blue');
var h1 = new spreadNS.CellTypes.HyperLink();
setCellTypeCallback(spread, sheet, h1);
sheet.setCellType(6, 2, h1, spreadNS.SheetArea.viewport);
sheet.getCell(6, 2, spreadNS.SheetArea.viewport).value("http://www.grapecity.com/en/spreadjs/");
sheet.setValue(6, 1, "超链接回调");
function setCellTypeCallback(spread, sheet, h) {
h.text("点击添加样式");
h.linkToolTip("点击添加样式");
h.activeOnClick(true);
h.onClickAction(function () {
spread.commandManager().execute({cmd: "setSheetTabStyle"});
});
return h;
}
spread.commandManager().register("setSheetTabStyle", {
canUndo: true,
execute: function (context, options, isUndo) {
sheet.name("超链接");
sheet.options.sheetTabColor = "red";
}
}, null, false, false, false, false);
sheet.resumePaint();
/*---------------------------自定义单元格---------------*/
var sheet1 = new GC.Spread.Sheets.Worksheet('自定义单元格');
spread.addSheet(1,sheet1);
sheet1.suspendPaint();
sheet1.setColumnWidth(0, 100);
sheet1.setColumnWidth(1, 170);
function FullNameCellType() {
}
FullNameCellType.prototype = new spreadNS.CellTypes.Base();
FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
if (value) {
spreadNS.CellTypes.Base.prototype.paint.apply(this,
[ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]);
}
};
FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
if (editorContext) {
editorContext.style.width=cellRect.width;
editorContext.style.height=100;
return {height: 100};
}
};
FullNameCellType.prototype.createEditorElement = function () {
var div = document.createElement("div");
div.setAttribute("gcUIElement", "gcEditingInput");
div.style.backgroundColor= "white";
div.style.overflow= "hidden";
var span1 = document.createElement('span');
span1.style.display = "block";
var span2 = document.createElement("span");
span2.style.display = "block";
var input1 = document.createElement("input");
var input2 = document.createElement("input");
var type = document.createAttribute('type');
type.nodeValue="text";
var clonedType = type.cloneNode(true);
input1.setAttributeNode(type);
input2.setAttributeNode(clonedType);
div.appendChild(span1);
div.appendChild(input1);
div.appendChild(span2);
div.appendChild(input2);
return div;
};
FullNameCellType.prototype.getEditorValue = function ( editorContext ) {
if (editorContext && editorContext.children.length === 4) {
var input1 = editorContext.children[1];
var firstName = input1.value;
var input2 = editorContext.children[3];
var lastName = input2.value;
return { firstName: firstName, lastName: lastName };
}
};
FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
if (editorContext && editorContext.children.length === 4) {
var span1 = editorContext.children[0];
span1.innerHTML="First Name:";
var span2 = editorContext.children[2];
span2.innerHTML="Last Name:";
if (value) {
var input1 = editorContext.children[1];
input1.value=value.firstName;
var input2 = editorContext.children[3];
input2.value=value.lastName;
}
}
};
FullNameCellType.prototype.isReservedKey = function (e) {
return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
};
FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
return true;
}
return false;
};
var columnInfo = [
{ name: "person", displayName: "姓名", cellType: new FullNameCellType(), size: 170 },
{ name: "result", displayName: "收藏", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 50 },
{ name: "money", displayName: "余额", size: 50 ,formatter:'_(¥* #,##0.00_)',size: 90}
];
var source = [
{ money:-100,result: true, person: {firstName:"LeBron",lastName:"James"}},
{ money:-100,result: false, person: { firstName: "Chris", lastName: "Bosh" } },
{ money:160,result: true, person: { firstName: "Dwyane", lastName: "Wade" } },
{ money:1060,result: false, person: { firstName: "Mike", lastName: "Miller" } },
{ money:-1400,result: true, person: { firstName: "Mike", lastName: "Miller" } },
{ money:-4100,result: true, person: { firstName: "Udonis", lastName: "Haslem" } },
{ money:1400,result: true, person: { firstName: "Mario", lastName: "Chalmers" } },
{ money:1200,result: true, person: { firstName: "Joel", lastName: "Anthony" } },
{ money:40,result: false, person: { firstName: "Shane", lastName: "Battier" } },
{ money:14,result: false, person: { firstName: "Ray", lastName: "Allen" } },
{ money:100,result: true, person: { firstName: "James", lastName: "Jones" } },
{ money:1400,result: false, person: { firstName: "Rashard", lastName: "Lewis" } },
{ money:180,result: true, person: { firstName: "Norris", lastName: "Cole" } },
{ money:190,result: true, person: { firstName: "Chris", lastName: "Andersen" } },
{ money:700,result: false, person: { firstName: "Jarvis", lastName: "Varnado" } },
{ money:-10,result: true, person: { firstName: "Juwan", lastName: "Howard" } }
];
function SortHyperlinkCellType() {
spreadNS.CellTypes.HyperLink.apply(this);
this.text("余额排序");
}
SortHyperlinkCellType.prototype = new spreadNS.CellTypes.HyperLink();
// 获取包含碰撞信息的对象
SortHyperlinkCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
if (context) {
return {
x: x,
y: y,
row: context.row,
col: context.col,
cellRect: cellRect,
cellStyle: cellStyle,
sheetArea: context.sheetArea,
isReservedLocation: true,
sheet: context.sheet
};
}
return null;
};
// 处理鼠标事件
SortHyperlinkCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet, sheetArea = hitInfo.sheetArea,
row = hitInfo.row, col = hitInfo.col;
var tag = !(sheet.getTag(row, col, sheetArea) || false);
sheet.setTag(row, col, tag, sheetArea);
//Set to true to sort by rows, and false to sort by columns.
sheet.sortRange(0, 0, sheet.getRowCount(), sheet.getColumnCount(), true, [{
index: col,
ascending: tag
}]);
};
sheet1.setCellType(0, 2, new SortHyperlinkCellType(), spreadNS.SheetArea.colHeader);
sheet1.setDataSource(source);
sheet1.bindColumns(columnInfo);
sheet1.resumePaint();
});