Features
セルの書式設定
セルの書式設定
FlexSheetでは、セルごとの書式を設定できます。
機能
セルの書式設定
FlexSheetでは、セルごとの書式を設定できます。書式には、セル値のデータ形式(日付/数値の形式)、フォントスタイル、塗りつぶし色、水平方向の配置があります。
形式:
フォント:
配置:
色:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexSheetExplorer.Models; namespace FlexSheetExplorer.Controllers { public partial class FlexSheetController : Controller { public ActionResult FormatCells() { ViewBag.FontList = FontName.GetFontNameList(); ViewBag.FontSizeList = FontSize.GetFontSizeList(); return View(); } } }
@{ IEnumerable<FontName> fontList = ViewBag.FontList; IEnumerable<FontSize> fontSizeList = ViewBag.FontSizeList; } @section Scripts{ <script type="text/javascript" src="~/Scripts/FlexSheet/formatCells.js"></script> } <div> <div class="copy"> <h3>@Html.Raw(Resources.FlexSheet.FormatCells_Text2)</h3> <p>@Html.Raw(Resources.FlexSheet.FormatCells_Text0)</p> </div> <div class="row well well-lg"> <div class="row"> @Html.Raw(Resources.FlexSheet.FormatCells_Text3) @(Html.C1().Menu().Header("Format").Id("menuFormat") .OnClientSelectedIndexChanged("formatChanged") .MenuItems(items => { items.Add("Decimal Format", "d0"); items.Add("Number Format", "n2"); items.Add("Percentage Format", "p2"); items.Add("Currency Format", "c2"); items.AddSeparator(); items.Add("Short Date", "d"); items.Add("Long Date", "D"); items.Add("Full Date/TIme (short time)", "f"); items.Add("Full Date/TIme (long time)", "F"); })) </div> <br /> <div class="row"> @Html.Raw(Resources.FlexSheet.FormatCells_Text4) @(Html.C1().ComboBox<FontName>().Bind(fontList).SelectedIndex(0) .DisplayMemberPath("Name").SelectedValuePath("Value") .IsEditable(false).CssStyle("width", "120px") .OnClientSelectedIndexChanged("fontChanged") .Id("cboFontName") ) @(Html.C1().ComboBox<FontSize>().Bind(fontSizeList).SelectedIndex(5) .DisplayMemberPath("Name").SelectedValuePath("Value") .IsEditable(false).CssStyle("width", "80px") .OnClientSelectedIndexChanged("fontSizeChanged") .Id("cboFontSize") ) <div class="btn-group"> <button type="button" id="boldBtn" class="btn btn-default" onclick="applyBoldStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text7)</button> <button type="button" id="italicBtn" class="btn btn-default" onclick="applyItalicStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text8)</button> <button type="button" id="underlineBtn" class="btn btn-default" onclick="applyUnderlineStyle()">@Html.Raw(Resources.FlexSheet.FormatCells_Text9)</button> </div> @Html.Raw(Resources.FlexSheet.FormatCells_Text5) <div class="btn-group"> <button type="button" id="leftBtn" class="btn btn-default active" onclick="applyCellTextAlign('left')">@Html.Raw(Resources.FlexSheet.FormatCells_Text10)</button> <button type="button" id="centerBtn" class="btn btn-default" onclick="applyCellTextAlign('center')">@Html.Raw(Resources.FlexSheet.FormatCells_Text11)</button> <button type="button" id="rightBtn" class="btn btn-default" onclick="applyCellTextAlign('right')">@Html.Raw(Resources.FlexSheet.FormatCells_Text12)</button> </div> @Html.Raw(Resources.FlexSheet.FormatCells_Text6) <div class="btn-group"> <button type="button" class="btn btn-default" onclick="showColorPicker(event, false)">@Html.Raw(Resources.FlexSheet.FormatCells_Text13)</button> <button type="button" class="btn btn-default" onclick="showColorPicker(event, true)">@Html.Raw(Resources.FlexSheet.FormatCells_Text14)</button> </div> </div> </div> <div> @(Html.C1().FlexSheet().CssClass("flexSheet").Id("formatSheet") .AddUnboundSheet("Number", 20, 8) .AddUnboundSheet("Date", 20, 8)) @(Html.C1().ColorPicker().Id("colorPicker").CssStyles(new Dictionary<string, string> { {"display","none"},{"position","fixed"},{"z-index","100" } })) </div> </div> @section Summary{ <p>@Html.Raw(Resources.FlexSheet.FormatCells_Text1)</p> }