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> |