条件付きの書式設定

Wijgrid では、指定の値より大きな値を赤色で表示するなど、条件付きの書式設定を行えます。このような書式設定を行うことで、データの表現方法を大きく向上させることができます。

次のサンプルスクリプトでは、特定インスタンスの割引値が 25% を超える場合、この値が赤で表示されるように、グリッドセルの条件付き書式設定を行います。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { // bind the grid $("#demo").wijgrid({ data: getData(12), columnsAutogenerationMode: "none", columns: [ { dataKey: "Country", headerText: "Country", dataType: "string" }, { 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", cellFormatter: function (args) { if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header) if (args.row.data.Discount > .25) { // discount > 25%? bold + red! args.$container.css("font-weight", "bold"); args.$container.css("color", "red"); } } } } ] }); }); }); // random data generators function getData(count) { var data = []; var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(","); var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(","); var suffix = "LLC,Inc".split(","); for (var i = 0; i < count; i++) { data.push({ TransactionID: i, Country: getString(country), ProductName: getString(name) + " " + getString(suffix), UnitPrice: Math.floor(getNumber(5, 10)), Quantity: Math.floor(getNumber(1, 5)) * 10, Discount: getNumber(0, 0.3) }); } 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>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
        require(["wijmo.wijgrid"], function () {
            $(document).ready(function () {

                // bind the grid
                $("#demo").wijgrid({
                    data: getData(12),
                    columnsAutogenerationMode: "none",
                    columns: [
{ dataKey: "Country", headerText: "Country", dataType: "string" },
{ 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",
cellFormatter: function (args) {
if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header)
if (args.row.data.Discount > .25) {             // discount > 25%? bold + red!
args.$container.css("font-weight", "bold");
args.$container.css("color", "red");
      }
    }
  }
}
]
 });
   });
     });
// random data generators
function getData(count) {
var data = [];
var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(",");
var suffix = "LLC,Inc".split(",");
for (var i = 0; i < count; i++) {
data.push({
    TransactionID: i,
    Country: getString(country),
    ProductName: getString(name) + " " + getString(suffix),
    UnitPrice: Math.floor(getNumber(5, 10)),
    Quantity: Math.floor(getNumber(1, 5)) * 10,
    Discount: getNumber(0, 0.3)
});
   }
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>