单选框的实现

收藏

如何实现单选框radio 的样式和功能

gw0506 · gw0506

需要你这边自定义一个Radio。

function MyCellType() {
}
MyCellType.prototype = new GcSpread.Sheets.CustomCellType();
MyCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
//Paints a cell on the canvas.
};
MyCellType.prototype.createEditorElement = function() {
//Creates a DOM element then returns it.
};
MyCellType.prototype.getEditorValue = function(editorContext) {
//Gets the editor's value.
};
MyCellType.prototype.setEditorValue = function(editorContext, value) {
//Sets the editor's value.
};
MyCellType.prototype.activateEditor = function(editorContext, cellStyle, cellRect) {
//Activates the editor, including setting properties or attributes for the editor and binding events for the editor.
};
//... the other methods implements
sheet.getColumn(1).cellType(new MyCellType());

复制代码

jackeeyoung · jackeeyoung

能有一个可以运行的实例吗

frank.zhang · frank.zhang

您好，

制作例子程序，需要一些时间，我们会尽快跟您反馈。

jackeeyoung · jackeeyoung

好的

frank.zhang · frank.zhang

您好，

2016-01-15_092244.jpg (23.4 KB, 下载次数: 291)

2016-1-15 09:23 上传

点击文件名下载附件

可以参考以下代码

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="gcspread.sheets.9.40.20153.0.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="gcspread.sheets.all.9.40.20153.0.min.js"></script>
<style type="text/css">
.demo-options, .option-row {
margin-top: 10px;
}
</style>
<script type="text/javascript">
var spreadNS = GcSpread.Sheets;
$(document).ready(function ()
{
var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
initSpread(spread);
});
function RadioCellType()
{
}
RadioCellType.prototype = new spreadNS.CustomCellType();
RadioCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options)
{
spreadNS.CustomCellType.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, options]);
};
RadioCellType.prototype.createEditorElement = function ()
{
var div = document.createElement("div");
var $div = $(div);
$div.attr("gcUIElement", "gcEditingInput");
$div.css("background-color", "white");
$div.css("position", "absolute");
$div.css("overflow", "hidden");
$div.css("border", "2px #5292f7 solid");
var $input1 = $("<input type='radio' name='gender' value='male'/>Male<br>");
var $input2 = $("<input type='radio' name='gender' value='female'/>Female<br>");
$div.append($input1);
$div.append($input2);
return div;
};
RadioCellType.prototype.getEditorValue = function (editorContext)
{
if (editorContext && editorContext.children.length === 4)
{
var input1 = editorContext.children[0];
var input2 = editorContext.children[2];
if (input1.checked == true)
return "male"
if (input2.checked == true)
return "female"
}
};
RadioCellType.prototype.setEditorValue = function (editorContext, value)
{
if (editorContext && editorContext.children.length === 4)
{
var input1 = editorContext.children[0];
var input2 = editorContext.children[2];
if (value == "male")
{
input1.setAttribute("checked", true)
} else
{
input2.setAttribute("checked", true)
}
}
};
RadioCellType.prototype.isEditingValueChanged = function (oldValue, newValue)
{
if (newValue != oldValue)
{
return true;
}
return false;
};
RadioCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect)
{
if (editorContext)
{
$(editorContext).width(cellRect.width);
$(editorContext).height(100);
}
};
//Custom Cell Type
function FivePointedStarCellType()
{
this.size = 10;
}
FivePointedStarCellType.prototype = new spreadNS.CustomCellType();
FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options)
{
if (!ctx)
{
return;
}
ctx.save();
// draw inside the cell's boundary
ctx.rect(x, y, w, h);
ctx.clip();
ctx.beginPath();
if (value)
{
ctx.fillStyle = "orange";
} else
{
ctx.fillStyle = "gray";
}
var size = this.size;
var dx = x + w / 2;
var dy = y + h / 2;
ctx.beginPath();
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++)
{
ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size);
}
ctx.closePath();
ctx.fill();
ctx.restore();
};
FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context)
{
var xm = cellRect.x + cellRect.width / 2,
ym = cellRect.y + cellRect.height / 2,
size = 10;
var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea };
if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size)
{
info.isReservedLocation = true;
}
return info;
};
FivePointedStarCellType.prototype.processMouseUp = function (hitInfo)
{
var sheet = hitInfo.sheet;
if (sheet && hitInfo.isReservedLocation)
{
var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea;
var newValue = !sheet.getValue(row, col, sheetArea);
var cellEditInfo = { row: row, col: col, newValue: newValue };
var undoAction = new spreadNS.UndoRedo.CellEditUndoAction(sheet, cellEditInfo);
sheet.doCommand(undoAction);
return true;
}
return false;
};
function FullNameCellType()
{
}
FullNameCellType.prototype = new spreadNS.CustomCellType();
FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options)
{
if (value)
{
spreadNS.CustomCellType.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).width(cellRect.width);
$(editorContext).height(100);
}
};
FullNameCellType.prototype.createEditorElement = function ()
{
var div = document.createElement("div");
var $div = $(div);
$div.attr("gcUIElement", "gcEditingInput");
$div.css("background-color", "white");
$div.css("position", "absolute");
$div.css("overflow", "hidden");
$div.css("border", "2px #5292f7 solid");
var $span1 = $("<span></span>");
$span1.css("display", "block");
var $span2 = $("<span></span>");
$span2.css("display", "block");
var $input1 = $("<input type='text'/>");
var $input2 = $("<input type='text'/>");
$div.append($span1);
$div.append($input1);
$div.append($span2);
$div.append($input2);
return div;
};
FullNameCellType.prototype.getEditorValue = function (editorContext)
{
if (editorContext && editorContext.children.length === 4)
{
var input1 = editorContext.children[1];
var firstName = $(input1).val();
var input2 = editorContext.children[3];
var lastName = $(input2).val();
return { firstName: firstName, lastName: lastName };
}
};
FullNameCellType.prototype.setEditorValue = function (editorContext, value)
{
if (editorContext && editorContext.children.length === 4)
{
var span1 = editorContext.children[0];
$(span1).text("First Name:");
var span2 = editorContext.children[2];
$(span2).text("Last Name:");
if (value)
{
var input1 = editorContext.children[1];
$(input1).val(value.firstName);
var input2 = editorContext.children[3];
$(input2).val(value.lastName);
}
}
};
FullNameCellType.prototype.isReservedKey = function (e)
{
//cell type handle tab key by itself
return (e.keyCode === spreadNS.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;
};
function initSpread(spread)
{
var sheet = spread.getSheet(0);
sheet.isPaintSuspended(true);
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 170);
var columnInfo = [
{ name: "result", displayName: "Result", cellType: new RadioCellType(), size: 100 },
{ name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 }
];
var source = [
{ result: "male", person: { firstName: "LeBron", lastName: "James" } },
{ result: "male", person: { firstName: "Chris", lastName: "Bosh" } },
{ result: "male", person: { firstName: "Dwyane", lastName: "Wade" } },
{ result: "female", person: { firstName: "Mike", lastName: "Miller" } },
{ result: "female", person: { firstName: "Mike", lastName: "Miller" } },
{ result: "female", person: { firstName: "Udonis", lastName: "Haslem" } },
{ result: "male", person: { firstName: "Mario", lastName: "Chalmers" } },
{ result: "female", person: { firstName: "Joel", lastName: "Anthony" } },
{ result: "male", person: { firstName: "Shane", lastName: "Battier" } },
{ result: "male", person: { firstName: "Ray", lastName: "Allen" } },
{ result: "female", person: { firstName: "James", lastName: "Jones" } },
{ result: "male", person: { firstName: "Rashard", lastName: "Lewis" } },
{ result: "male", person: { firstName: "Norris", lastName: "Cole" } },
{ result: "female", person: { firstName: "Chris", lastName: "Andersen" } },
{ result: "male", person: { firstName: "Jarvis", lastName: "Varnado" } },
{ result: "female", person: { firstName: "Juwan", lastName: "Howard" } },
];
sheet.setDataSource(source);
sheet.bindColumns(columnInfo);
sheet.isPaintSuspended(false);
};
</script>
</head>
<body>
<div class="sample-turtorial">
<div id="ss" style="width:100%; height: 420px;border: 1px solid gray;"></div>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] 单选框的实现

5 个回复

活字格认证

微信认证勋章

元老葡萄