jqgridをブートストラップテーブルのルックアンドフィールのように見せたいです。
ルックアンドフィールをカスタマイズすることは可能ですか?
jqgridがサポートしていることは知っていますが(jqueryテーマ)、jqueryテーマではなくbootstarpのルックアンドフィールが必要です。
6 に答える
問題は、jqGridがjQueryUICSSフレームワークに基づいていることです。jqGridは、空の<table>
要素から動的にグリッドを構築します。、、、など"ui-widget"
の事前定義されたCSS名を持つ多くの要素を挿入します。"ui-widget-content"
"ui-state-hover"
"ui-icon"
私はこれまでブートストラップを使用したことがありません。独自のベースCSSフレームワークを持っているようです。したがって、私が見る唯一の方法は、ブートストラップの外観に対応するようにjQueryUICSSをカスタマイズすることです。Themerollerに関してこれを行うことができます。このページでは、ブートストラップCSSに非常に近い新しいjQueryUIテーマをインタラクティブに作成できます。最後に、[テーマのダウンロード]ボタンをクリックして、カスタマイズされたCSSをダウンロードできます([自分でロール]タブのページの左側を参照)。または、 jQuery UI ThemeRollerDeveloperToolを使用して新しいCSSを作成することもできます。
同じ問題が発生し、jqgridを削除して、代わりにDataTablesを取得することになりました-http: //datatables.net/。jqgridと非常によく似ており、間違いなく優れた機能を備えており、ブートストラップのようにスタイルを設定する方法についての説明が付属しています-http: //datatables.net/blog/Twitter_Bootstrap。
同じ問題が発生し、独自のCSSスタイルを作成しました。チェック:https ://github.com/Soliman/jqGrid.bootstrap 。それは少し厄介ですが、それは始まりであり、私にとってはうまくいきます。
jqGridはjQueryUIベースのhtmlとクラスを使用しているため、ブートストラップをカスタマイズしていない限り、jQueryUIのブートストラップテーマでうまくいくはずです。同じカスタマイズを2回行う必要があります。
jqGridの別のブートストラップテーマ:http: //jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/extra.html#jqgrid
私は無料のjqGrid(trirand jqGridのブランチ)を使用しており、組み込みのスタイリングをサポートしています。ルックアンドフィールは、次の2つの主なオプションで調整できます。
guiStyles
(https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600):jQueryUI
、、、bootstrap
_bootstrapPrimary
bootstrap4
icons
:(https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389):jQueryUI
、、fontAwesome
glyph