Wijmo UI for the Web
セルのカスタマイズ

Wijgrid では、Column オブジェクトの cellFormatter フィールドを使用することで、セルの内容をカスタマイズできます。フォーマッタを使用すると、グリッドによって作成されたコンテンツのカスタマイズ、イメージの追加、各セルに対する新規 HTML コンテンツの作成などを行え、柔軟性が飛躍的に向上します。

次のサンプルスクリプトでは、Country 列の国名に従い、該当する国旗のイメージを Flag 列に追加します。

スクリプト
コードのコピー 
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
          // bind the grid
        $("#demo").wijgrid({
        data: getData(5),
       // columnsAutogenerationMode: "none",
        columns: [
        { dataKey: "Country", headerText: "Country", dataType: "string" },
        {
          dataKey: "Country",
          headerText: "Flag",
          cellFormatter: function (args) {
          if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header)
          var img = $("<img/>")
          .attr("src", getFlagUrl(args.row.data.Country)) // flag url
          .attr("height", "50");         // image size
          args.$container
          .css("text-align", "center")    // center the flag
          .empty()                        // remove original content
          .append(img);                   // add image element
          return true;                   // content has been customized
       }
    }
},
{ dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
{ dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency" },
{ dataKey: "Quantity", headerText: "Quantity", dataType: "number", dataFormatString: "n0" }
                    ]
                });
            });
        });
// get url to flag image
        function getFlagUrl(country) {
            var url = "http://www.geonames.org/flags/m/";
            switch (country) {
                case "USA": return url + "us.png";
                case "UK": return url + "uk.png";
                case "Germany": return url + "de.png";
                case "Italy": return url + "it.png";
                case "Japan": return url + "jp.png";
                case "Brazil": return url + "br.png";
                case "Canada": return url + "ca.png";
            }
            return "";
        }
 //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({
                    Country: getString(country),
                    ProductName: getString(name) + " " + getString(suffix),
                    UnitPrice: Math.floor(getNumber(5, 10)),
                    Quantity: Math.floor(getNumber(1, 5)) * 10
                });
            }
            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.