Features

はじめに

はじめに

FlexSheetコントロールは、FlexGridコントロールを拡張してExcelと同様の機能を提供します。

機能

はじめに

FlexSheetコントロールは、FlexGridコントロールを拡張してExcelと同様の機能を提供します。
FlexSheetは、FlexGridのすべての機能をサポートするほか、FlexGridには含まれていないExcelの主要な機能も追加しています。

メモ：FlexSheetでは、xlsxファイルをロードおよび保存するためにJSZipライブラリが必要です。CDNからjszip.jsを追加するか、プロジェクトにスクリプトファイルを入れる必要があります。

FlexSheetは、Excelと同様の次の機能を提供しています。

マルチシート
1つのワークシートの中に複数の独立したシートを含めることができます。
数式
計算エンジンは、組み込みの数式をサポートしており、 約100の数式と自動補完機能を備えています。 数式演算はMicrosoft Excelとの整合性を考慮して作成されており、 集計、数学演算、論理、およびテキストを処理できます。
セルのスタイル
セルのスタイル設定では、書式、フォント、水平方向の配置、前景色、塗りつぶし色などがサポートされています。
セルの結合
コンテンツ依存のセル結合しかサポートしていないFlexGridとは異なり、任意のセルを結合できます。
元に戻す/やり直す
セルの編集、行/列の挿入/削除、セルスタイルの適用、セルの結合、行/列のサイズ変更、 行/列のドラッグアンドドロップなどの複数の操作を元に戻す/やり直すことができます。
ドラッグアンドドロップ
行/列をドラッグアンドドロップして移動またはコピーできます。
列全体の選択
列ヘッダーをクリックして列全体を選択できます。
自動入力を許可
セルの右下隅をドラッグして、パターンに従うデータをセルに自動入力します。

using Microsoft.AspNetCore.Mvc;

namespace FlexSheetExplorer.Controllers
{
    public partial class FlexSheetController : Controller
    {
        public ActionResult Intro()
        {
            return View();
        }
    }
}

<div>
    <div class="copy">
        <h3>
            @Html.Raw(FlexSheetRes.Intro_Text4)
        </h3>
        <p>@Html.Raw(FlexSheetRes.Intro_Text0)</p>

        <div class="collapsed-content collapse">
            <p>@Html.Raw(FlexSheetRes.Intro_Text1)</p>

            <dl class="dl-horizontal">
                <dt>@Html.Raw(FlexSheetRes.Intro_Text5)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text6)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text7)</dt>
                <dd>
                    @Html.Raw(FlexSheetRes.Intro_Text8)
                </dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text9)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text10)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text11)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text12)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text13)</dt>
                <dd>
                    @Html.Raw(FlexSheetRes.Intro_Text14)
                </dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text15)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text16)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text17)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text18)</dd>
                <dt>@Html.Raw(FlexSheetRes.Intro_Text20)</dt>
                <dd>@Html.Raw(FlexSheetRes.Intro_Text21)</dd>
            </dl>
        </div>
        <p>
            <button type="button"
                    data-toggle="collapse"
                    data-target=".collapsed-content, .btn.btn-default.btn-xs.collapse"
                    class="btn btn-default btn-xs collapse in">
                @Html.Raw(FlexSheetRes.Intro_Text2)
            </button>
        </p>
    </div>
    <div>
        <c1-flex-sheet class="flexSheet" allow-auto-fill="true">
            <c1-unbound-sheet column-count="12" row-count="25"></c1-unbound-sheet>
            <c1-unbound-sheet column-count="12" row-count="25"></c1-unbound-sheet>
        </c1-flex-sheet>
    </div>
</div>
@section Summary{
    <p>@Html.Raw(FlexSheetRes.Intro_Text3)</p>

}