jQuery、ブートストラップ、シールドUIライトを備えた編集可能なグリッド-jsチュートリアル-php.cn

An Editable Grid with jQuery, Bootstrap, and Shield UI Lite

jQuery、ブートストラップ、シールドUIライトを備えた編集可能なグリッド

この短いヒントでは、ブートストラップとシールドUI Liteを使用して編集可能なグリッド（またはテーブル）を設定するためのいくつかの簡単な手順を提供します。

Shield Ui Liteは、他のコンポーネントの中でも、jQueryグリッドを含むオープンソースのjQueryライブラリです。グリッドは、すぐにボックスの編集、並べ替え、グループ化、およびさまざまな列エディターをサポートしています。

キーテイクアウト

Shield Ui Liteは、編集、ソート、グループ化、さまざまな列エディターをサポートするJQueryグリッドを含むオープンソースのjQueryライブラリです。グリッドは、ローカルJSON構造からリモートWebサービスまで、あらゆる種類のデータの拘束力もサポートしています。

編集可能なグリッドをセットアップするには、標準のブートストラップコンテナを使用し、スタイルシート、JavaScriptファイル、データなどのサンプルで使用されるすべてのリソースに参照を追加し、シールドUI Liteグリッドコンポーネントをセットアップする必要があります。。グリッドはCSSを使用してカスタマイズでき、他のJavaScriptライブラリと互換性があります。

シールドUI lite

データが多いアプリケーションの場合、シールドUI JQueryウィジェットは、何百万もの実際のデータレコードを操作する場合でも、拡張された仮想スクロール機能を提供します。コンポーネントとそのオプションのより多くの例を見るには、オンラインデモまたはドキュメントを参照できます。コードを使用して

作成する編集可能なグリッドについては、物事をシンプルに保つためにローカルデータソースを使用しています。ライブラリのソースコードはGitHubにあります。完全なサンプルコードと、使用されるすべてのサンプルデータと追加のCSSは、Codepenデモで利用できます。

レイアウトをセットアップする最初のステップは、標準のブートストラップコンテナを使用することです。私たちの場合、これは内部にネストされたブートストラップパネルを備えたDIVです。通常、標準のWebグリッドコンポーネントは多くのデータをホストしているため、レイアウトは画面の全幅に及びます。このステップのコードは簡単で、次のようになります。

これは、サンプルのセットアップに必要なすべてのHTMLです。次のステップは、StyleSheets、JavaScriptファイル、データなど、サンプルで使用されるすべてのリソースに参照を追加することです。

例で使用されるデータは、グリッドコンポーネントに渡されるために個別にロードされる標準のJSONコレクションです。ローカルデータソースを使用すると、セットアップが簡素化されます。さらに、グリッド用のスタイルシートとそれを初期化するためのJavaScriptが必要です。

これらのリソースを含めることを以下に示します：

<span><span><span><div</span> class<span>="col-md-12"</span>></span>
</span>  <span><span><span><div</span> class<span>="panel panel-default"</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-heading"</span>></span>
</span>      <span><span><span><h4</span> class<span>="text-center"</span>></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span</span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span</span>></span><span><span></h4</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-body text-center"</span>></span>
</span>      <span><span><span><div</span> id<span>="grid"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

ログイン後にコピー

css：

スクリプト：

グリッドのセットアップ

プロセスの次のステップは、シールドUI Liteグリッドコンポーネントのセットアップです。必要なリソースを含めたら、Document.Ready HandlerにJavaScriptで初期化できます。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span>

ログイン後にコピー

コンポーネントを記述する際には、2つの論理的な部分があります。 1つ目は、グリッドで視覚化されるデータのDataSourceを処理することです。もう1つは、実際にレンダリングされる列のセットアップと、ソート、ホバーエフェクトなどの追加設定です。 🎜>

Shield UI Liteグリッドには組み込みのDataSourceプロパティがあり、ウィジェットをローカルまたはリモートのデータに簡単にバインドできます。 DataSourceをJSONデータにリンクするには、データプロパティを使用して、フェッチするフィールドを説明します。これを達成するためのコードを以下に示します

<span><span><span><script</span> src<span>="shieldui-lite-all.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="shortGridData.js"</span>></span><span><span></script</span>></span></span>

ログイン後にコピー

編集を有効にする

アプリケーションを設定するプロセスの次のステップは、グリッドで使用できるプロパティを選択し、レンダリングされる列を説明することです。

各列には、ヘッダーテキストや幅などの追加のプロパティがあります。幅のプロパティ設定は義務的ではありませんが、全体的なレイアウトを配布するための追加の柔軟性を提供します。

コントロール内のすべてのプロパティのコードを以下に示します。

<span><span><span><div</span> class<span>="col-md-12"</span>></span>
</span>  <span><span><span><div</span> class<span>="panel panel-default"</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-heading"</span>></span>
</span>      <span><span><span><h4</span> class<span>="text-center"</span>></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span</span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span</span>></span><span><span></h4</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-body text-center"</span>></span>
</span>      <span><span><span><div</span> id<span>="grid"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

ログイン後にコピー

カスタムエディターのセットアップ

ウィジェットは、多くの便利な編集者を箱から出してサポートしています。セルのいずれかをクリックして、コントロールが編集モードに配置されると、セルのエディターはこのセルの値のタイプに依存します。たとえば、数値には、インクリメントおよびデクリメントボタンを備えた数値入力があります。日付列には、日付を簡単に選択するためのカレンダー入力があります。

列にカスタムエディターを提供するオプションもあります。たとえば、標準のテキストボックスを使用する代わりに、その列のすべての値をドロップダウンできます。

これは、getCustomEditorValueイベントに接続し、各セルのカスタムエディターを渡すことで実現できます。

これは、イベントの次のコードスニペットで実証されています：

およびカスタムエディター：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span>

ログイン後にコピー

グリッドウィジェットのオプションの詳細情報を確認する場合は、ドキュメントのこのセクションを参照できます。

これにより、セットアップが完了し、コントロールの使用準備が整います。

<span><span><span><script</span> src<span>="shieldui-lite-all.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="shortGridData.js"</span>></span><span><span></script</span>></span></span>

ログイン後にコピー

Codepen

で完全に作業するデモを表示します

テーブル/グリッドのコンテンツセルの内部をクリックして、編集機能の仕組みを確認してください。 Shield UI WebサイトでShield UI JQueryグリッドコンポーネントの使用に関するより多くの例を表示できます。

jqueryとbootstrapを使用した編集可能なグリッドに関するよくある質問（FAQ）

編集可能なグリッドの外観をカスタマイズするにはどうすればよいですか？

編集可能なグリッドの外観は、CSSを使用してカスタマイズできます。グリッドの色、フォント、境界、その他の視覚要素を変更して、Webサイトのデザインに合わせて変更できます。また、Bootstrapの組み込みクラスを使用して、グリッドをすばやくスタイリングすることもできます。より高度なカスタマイズには、シールドUI LiteのAPIを使用できます。これは、グリッドの外観と動作を変更するためのさまざまなオプションを提供します。はい、編集可能なグリッドは、Angularjs、React、vue.jsなどの他のJavaScriptライブラリと互換性があります。これらのライブラリを使用して、動的なデータの読み込み、ソート、フィルタリング機能の追加など、グリッドの機能を強化できます。グリッドのAPIを使用して、編集可能なグリッドに行を追加または削除できます。 APIは、新しい行を追加し、既存の行を削除し、グリッド内のデータを更新する方法を提供します。また、APIを使用してプログラムで選択する行を使用することもできます。これは、バルク編集または削除機能の実装に役立ちます。