実行時にセルの結合

ワークシートのセルを結合すると、データをわかりやすく表示できます。コンテンツが同じセルを結合してまとめると、通常よりデータを読みやすくできます。

ワークシートデータの一部を結合しないときれいに表示できないという例はよくあります。たとえば、ある会社の四半期ごとの売上を地域別製品別に表示して分析するとします。このような場合は、四半期ごとに見出しのセルを結合すると、表示を改善できます。次はこのシナリオの具体例です。実行時にボタンをクリックすると、セル結合が実行されます。ここでは、結合するセルを選択し、［Merge］ボタンをクリックすると、mergeRange()が呼び出されます。

次の例のFlexSheetは、サーバーからロードされたワークブックファイルのデータを表示します。

次のコード例は、実行時にFlexSheetコントロールでセル結合を行う方法を示します。

コードの場合

MergingController.cs

C#	コードのコピー
public class MergeController : Controller { // GET: Merge public ActionResult MergeIndex() { return View(); } }

Merging.cshtml

Razor	コードのコピー
<script src= "http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"> </script> <script> function mergeSelection() { var flex = wijmo.Control.getControl("#mSheet"); flex.mergeRange(); } function setBold() { var flex = wijmo.Control.getControl("#mSheet"); flex.applyCellsStyle({ fontWeight: 'bold' }); } function changeFont() { var flex = wijmo.Control.getControl("#mSheet"); flex.applyCellsStyle({ fontFamily: 'Unicode' }); } function setColor() { var flex = wijmo.Control.getControl("#mSheet"); flex.applyCellsStyle({ backgroundColor: '#FFC966' }); } function align() { var flex = wijmo.Control.getControl("#mSheet"); flex.applyCellsStyle({ textAlign: 'Center' }); } </script> <div> <input id="font" type="button" onclick="changeFont()" value="フォントを変更" /> <input id="bold" type="button" onclick="setBold()" value="大胆" /> <input id="cellColor" type="button" onclick="setColor()" value="色" /> <input id="merge" type="button" onclick="mergeSelection()" value="連結" /> <input id="textAlign" type="button" onclick="align()" value="中央に排す" /> <br /><br /> @(Html.C1().FlexSheet().Height("500px").Width("1500px") .Load("~/Content/FlexSheet/QuarterlyData.xlsx").Id("mSheet") ) </div>

Razor

コードのコピー

<script src=
"http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script>
    function mergeSelection() {
        var flex = wijmo.Control.getControl("#mSheet");
        flex.mergeRange();
    }
    function setBold() {
        var flex = wijmo.Control.getControl("#mSheet");
        flex.applyCellsStyle({ fontWeight: 'bold' });
    }
    function changeFont() {
        var flex = wijmo.Control.getControl("#mSheet");
        flex.applyCellsStyle({ fontFamily: 'Unicode' });
    }
    function setColor() {
        var flex = wijmo.Control.getControl("#mSheet");
        flex.applyCellsStyle({ backgroundColor: '#FFC966' });
    }
    function align() {
        var flex = wijmo.Control.getControl("#mSheet");
        flex.applyCellsStyle({ textAlign: 'Center' });
    }
</script>

<div>
    <input id="font" type="button" onclick="changeFont()" 
value="フォントを変更" />
    <input id="bold" type="button" onclick="setBold()" 
value="大胆" />
    <input id="cellColor" type="button" onclick="setColor()" 
value="色" />
    <input id="merge" type="button" onclick="mergeSelection()" 
value="連結" />
    <input id="textAlign" type="button" onclick="align()" 
value="中央に排す" />
    <br /><br />
    @(Html.C1().FlexSheet().Height("500px").Width("1500px")
.Load("~/Content/FlexSheet/QuarterlyData.xlsx").Id("mSheet")
    )
</div>

先頭に戻る