ui.igGridCellMerging

ui.igGridCellMerging_image

igGrid の結合セル機能は、隣接する行の同じ値を持つセルを結合します。同じ値を持つセルを結合できるため、列を並び替えた後に便利な機能です。

以下のコード スニペットは、igGrid コントロールを初期化する方法を示します。

この API を使用して作業を開始する方法は こちらをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

<!doctype html>
<html>
<head>
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery Mobile -->
    <script src="js/jquery.mobile.js" type="text/javascript"></script>
    <!-- Moderznizr -->
    <script src="js/modernizr.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Loader Script -->
    <script src="js/infragistics.loader.js" type="text/javascript"></script>   
    <!-- Infragistics Loader Initialization -->
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: 'js/',
            cssPath: 'css/',
            resources: 'igGrid.CellMerging.Sorting.Updating'
        })
         
        var productData = [
            { "ProductID": "1", "UnitsInStock": "100", "ProductDescription": "Laptop", "UnitPrice": "$ 1000" , "DateAdded": new Date() },
            { "ProductID": "2", "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "DateAdded": new Date() },
            { "ProductID": "3", "UnitsInStock": "4356", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "4", "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "5", "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "6", "UnitsInStock": "25", "ProductDescription": "coffee cup", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "7", "UnitsInStock": "98", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "8", "UnitsInStock": "998", "ProductDescription": "mouse", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "9", "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "10", "UnitsInStock": "69", "ProductDescription": "fish", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "11", "UnitsInStock": "100", "ProductDescription": "Laptop", "UnitPrice": "$ 1000" , "DateAdded": new Date() },
            { "ProductID": "12", "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "DateAdded": new Date() },
            { "ProductID": "13", "UnitsInStock": "4356", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "14", "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "15", "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "16", "UnitsInStock": "25", "ProductDescription": "coffee cup", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "17", "UnitsInStock": "98", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "18", "UnitsInStock": "998", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "19", "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$ 1000", "DateAdded": new Date() },
            { "ProductID": "20", "UnitsInStock": "69", "ProductDescription": "fish", "UnitPrice": "$ 1000", "DateAdded": new Date() },
        ];
         
        $.ig.loader(function () {
            $("#grid1").igGrid({
                dataSource: productData,
                responseDataKey: "ProductID",
                fixedFooters: false,
                fixedHeaders: true,
                virtualization: false,
                autoGenerateColumns: false,
                width: 600,
                defaultColumnWidth: 140,
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: 100},
                    { headerText: "Units in Stock", key: "UnitsInStock", dataType: "number", width: 150},
                    { headerText: "Product Description", key: "ProductDescription", dataType: "string", width: 150},
                    { headerText: "Unit Price", key: "UnitPrice", dataType: "string", width: 150 }
                ],
                features: [
                    {
                        name: "CellMerging",
                        initialState: "merged"
                    },
                    {
                        name: "Sorting",
                        type: "local",
                        mode: "multiple"
                    }
                ]
            });
        });
    </script>
</head>
<body>
    <table id="grid1"></table>
</body>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.widget.js
infragistics.datasource.js
infragistics.ui.grid.framework.js
infragistics.ui.shared.js

継承

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.