Wijmo UI for the Web
スクロールの有効化

wijgrid ウィジェットでは、スクロールバーを使用して、データを垂直方向または水平方向にスクロールできます。次のスクリプトでは、height オプションの値を 300px に、scrollMode オプションを「auto」に設定します。

スクロールモードを選択するには、 scrollingSettings を設定します。有効値は「vertical(垂直方向)」、「horizontal(水平方向)」、および「both(両方)」です。

スクリプト
コードのコピー
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            // bind the grid
            $("#demo").wijgrid({
                scrollMode: "auto",
                editingMode: "cell",
                data: getData(1000),
                columnsAutogenerationMode: "none",
                columns: [
                    { dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
                    { dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency" },
                    { dataKey: "Quantity", headerText: "Quantity", dataType: "number", dataFormatString: "n0" },
                    { dataKey: "Discount", headerText: "Discount", dataType: "number", dataFormatString: "p0" },
                    { dataKey: "OrderDate", headerText: "Order Date", dataType: "datetime", dataFormatString: "MMM-dd-yyyy", textAlignment: "center" },
                    { dataKey: "Overseas", headerText: "Overseas", dataType: "boolean" }
                ]
            });
        });
    });
    // random data
    function getData(count) {
        var data = [];
        var name = "Lorem,Ipsum,Dolor,Amet,Consectetur,Adipiscing,Elit,Vivamus,Pharetra,Velit,Eget,Imperdiet,Mattis,Egestas,Donec,Tempus,Vestibulum,Tincidunt,Blandit,Lacinia,Lobortis,Feugiat,Mauris,Massa,Rutrum,Pulvinar,Ornare,Facilisi,Sociis,Natoque,Penatibus".split(",");
        var suffix = "LLC,Inc,International,Transpacific,Services,Financial,Enterprises,Consultants,Foundation,Institute".split(",");
        for (var i = 0; i < count; i++) {
            data.push({
                TransactionID: i,
                ProductName: getString(name) + " " + getString(suffix),
                UnitPrice: getNumber(10, 100),
                Quantity: Math.floor(getNumber(1, 500)),
                Discount: getNumber(0, 0.3),
                OrderDate: getDate(i),
                Overseas: Math.random() > 0.8
            });
        }
        return data;
    }
    function getString(arr) {
        return arr[Math.floor((Math.random() * arr.length))];
    }
    function getNumber(lo, hi) {
        return lo + Math.random() * (hi - lo);
    }
    function getDate(daysAgo) {
        return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
    }
</script>

 

 


Copyright © GrapeCity inc. All rights reserved.