javascriptのknockout.jsのsimpleGridのヘッダーの非表示方法やセルの背景色の色、セルの境界線の非表示方法を教えてください。

Question

いつもありがとうございます。

開発環境
C#(VisualStudio2015)
Asp.net
Windows 10
Knockout.js
SQLServer2014
を利用しています。

http://kojs.sukobuto.com/tips/grid

こちらのページング付きのグリッドを利用したいです。
そのため、以下のカスタマイズを行いと思っています。
⓵グリッドの内のヘッダーを非表示にする。
②グリッド内のセルの境界線の非表示（エクセルのセルのような設定を行う）
③グリッドのセルに画像を表示させる。

 this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "タイトル", rowText: "name" },
            { headerText: "販売実績(冊)", rowText: "sales" },
            { headerText: "価格", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });

このソース内で行うことは、わかるのですがどのように設定したらよいのかおしえていただけないでしょうか。よろしくお願いします。

Answer 1

SimpleGridのソースコード自体もシンプルなものなので、ソース(knockout.simpleGrid.3.0.js)を読んでみることをお勧めします。

①グリッドの内のヘッダーを非表示にする。
SimpleGridはシンプルすぎるので、ヘッダ非表示のオプションなどは用意されていなそうですね。
ソースをいじらずに非表示にするには、CSSでtheadのdisplayをnoneにでもするといいでしょう。

.ko-grid thead {display:none}

②グリッド内のセルの境界線の非表示（エクセルのセルのような設定を行う）
どのような見た目にするか、はCSSで設定するのが適切です。
背景の塗りつぶしは、background、
罫線は、borderやoutlineなどで設定しましょう。

③グリッドのセルに画像を表示させる。
SimpleGridでは、表示する内容をHTMLではなくtextとしてescapeされているため、このままでは画像の表示ができません。
SimpleGridのソースを参考に、独自に拡張するといいでしょう。

Comments

[UekiKouji]

ご連絡が遅くなりすいません。ご回答ありがとうございます。