单选按钮列表单元格

SpreadJS允许用户在表单的单元格中创建单选按钮列表。

什么是单选按钮列表？

单选按钮列表单元格类型使用户能够从表单的单元格中列出的几个选项列表中选择一个选项。 它是指嵌入单个单元格中的一组单选按钮（圆形的小选项按钮）。 用户可以单击列表中的单选按钮以选择或取消选择特定选项。

使用场景

当您要创建包含多个选项列表的民意调查或问卷，但最终用户只希望获得单个答复时，单选按钮列表单元格类型将非常有用。

示例 - 假设您正在开发一个销售应用程序，在该应用程序中您想要记录客户在购买特定产品时使用的付款方式。 在这种情况下，在表单中使用单选按钮列表单元格类型将帮助用户从可用的付款选项（如现金，信用卡或借记卡）列表中仅选择一种付款方式。，如下面图片所示：

自定义单选按钮列表on List

在SpreadJS中使用单选按钮列表单元格类型时，用户可以执行以下任务，以根据其特定首选项对其进行自定义：

• 用户可以使用 textAlign() 方法配置文字对齐方式。 可用选项 TextAlign 枚举是左与右。
• 用户可以识别单选按钮列表的布局是否自动调整通过 isFlowLayout() 方法。 默认情况下，此方法的value参数设置为“ true”。
• 用户可以将单选按钮列表单元格类型的方向设置为水平或垂直通过 Direction 枚举。
• 用户可以获取或设置单选按钮列表的行数和列数的项目通过 maxRowCount() 方法与 maxColumnCount() 方法。 仅当 isFlowLayout() 方法设置为true，方向为水平才能完成。
• 用户可以在两个列表项之间配置间距，以避免单元格内列表项内的拥塞和混乱。 可以使用 itemSpacing（） 方法来完成。

代码

请参考以下示例代码，以在使用表单时在单元格中创建基本的单选按钮列表。

<script>
$(document).ready(function ()
{
// 初始化 Spread
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 获取表单
  var activeSheet = spread.getSheet(0);

// 本示例创建一个radioButtonList单元格类型
  var radioButtonListCellType = new GC.Spread.Sheets.CellTypes.RadioButtonList();
activeSheet.setText(0, 1, "Select Mode Of Payment : ", GC.Spread.Sheets.SheetArea.viewport);
radioButtonListCellType.items([{ text: "Credit Card", value: 1 },
{ text: "Debit Card", value: 2 },   { text: "Cash", value: 3 }]);
radioButtonListCellType.isFlowLayout(true);

// 将单选按钮列表的方向配置为水平
  radioButtonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);

// 配置单选按钮列表中两项的空间
  radioButtonListCellType.itemSpacing({
horizontal: 20, vertical: 10
});

// 配置单选按钮位置的文字，仅支持左右
  radioButtonListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
 // 配置单选按钮的大小，仅支持数字和“自动”
 radioButtonListCellType.boxSize(20);
activeSheet.getCell(1, 1).cellType(radioButtonListCellType);

// 配置行高
 activeSheet.setRowHeight(1, 30.0, GC.Spread.Sheets.SheetArea.viewport);

 // 配置列宽
  activeSheet.setColumnWidth(1, 300.0, GC.Spread.Sheets.SheetArea.viewport);
});
</script>