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

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

キーテイクアウト

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

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

編集可能なグリッドは、データベースで使用でき、ローカル配列、JSONファイル、リモートサーバーなどのさまざまなソースからデータをロードし、CSV、Excel、PDFなどのさまざまな形式にデータをエクスポートできます。また、組み込みの検証機(jī)能とエラー処理もサポートしています
• シールドUI lite
について
Shield UIは、純粋なJavaScript開(kāi)発のためのUIウィジェットの設(shè)計(jì)、開(kāi)発、マーケティングを?qū)熼T(mén)とするWebコンポーネント開(kāi)発會(huì)社です。同社は、データの視覚化コンポーネントと、グリッド、バーコードなどの標(biāo)準(zhǔn)的なWeb開(kāi)発コンポーネント（1つおよび2次元の拡張入力コンポーネント）などの標(biāo)準(zhǔn)的なWeb開(kāi)発コンポーネントを提供しています。
Shield Ui Lite Suiteは、市場(chǎng)で最新のオープンソースライブラリの1つであり、具體的なのは、すべてが豊富で成熟した豊富なコンポーネントが含まれていることです。これには、すぐに重要なWebグリッド操作をサポートするjQueryグリッドが含まれます。コンポーネントは、インラインまたは標(biāo)準(zhǔn)の編集フォーム編集のいずれかで編集し、外部フォームで編集することをサポートします。セル編集もサポートされています これに加えて、シールドUIグリッドには、ローカルJSON構(gòu)造からリモートWebサービスまで、あらゆる種類(lèi)のデータへのバインディングを促進(jìn)する組み込みのデータソースコンポーネントが組み込まれています。組み込みのDataSourceは、すべての削除、更新、挿入操作も処理します。

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

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

レイアウトをセットアップする最初のステップは、標(biāo)準(zhǔn)のブートストラップコンテナを使用することです。私たちの場(chǎng)合、これは內(nèi)部にネストされたブートストラップパネルを備えたDIVです。通常、標(biāo)準(zhǔn)のWebグリッドコンポーネントは多くのデータをホストしているため、レイアウトは畫(huà)面の全幅に及びます。 このステップのコードは簡(jiǎn)単で、次のようになります。

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

例で使用されるデータは、グリッドコンポーネントに渡されるために個(gè)別にロードされる標(biāo)準(zhǔn)のJSONコレクションです。ローカルデータソースを使用すると、セットアップが簡(jiǎn)素化されます。さらに、グリッド用のスタイルシートとそれを初期化するための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つは、実際にレンダリングされる列のセットアップと、ソート、ホバーエフェクトなどの追加設(shè)定です。 ??>

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

<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>

編集を有効にする

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

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

コントロール內(nèi)のすべてのプロパティのコードを以下に示します。

<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>

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

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

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

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

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

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

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

グリッドウィジェットのオプションの詳細(xì)情報(bào)を確認(rèn)する場(chǎng)合は、ドキュメントのこのセクションを參照できます。

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

<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

で完全に作業(yè)するデモを表示します

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

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

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

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

編集可能なグリッドでユーザー入力を検証するにはどうすればよいですか？

シールドUI Liteの組み込み検証機(jī)能を使用して、編集可能なグリッドのユーザー入力を検証できます。ライブラリは、必要なフィールド、數(shù)の範(fàn)囲、電子メール形式など、さまざまな検証ルールを提供します。また、より複雑な検証シナリオを処理するカスタム検証ルールを作成することもできます。

編集可能なグリッドからデータをエクスポートできますか？ CSV、Excel、PDFなど。これは、グリッドのAPIを使用して実行でき、グリッドのデータをエクスポートする方法を提供します。特定の列を含める、または除外するなど、エクスポートされたデータをカスタマイズしたり、特定の方法でデータをフォーマットしたりすることもできます。ローカル配列、JSONファイル、リモートサーバーなどのさまざまなソースからの編集可能なグリッドへのデータ。グリッドのAPIはデータをロードするための方法を提供し、これらのメソッドをAJAXと組み合わせてサーバーからロードすることができます。 、編集可能なグリッドは応答性が高く、モバイルアプリケーションで使用できます。グリッドのレイアウトは、畫(huà)面サイズに合うように自動(dòng)的に調(diào)整され、CSSメディアクエリを使用してさまざまなデバイスでグリッドの動(dòng)作をカスタマイズすることもできます。 ??>グリッドのAPIを使用して、編集可能なグリッドでデータを並べ替えてフィルタリングできます。 APIは、1つ以上の列でデータを並べ替える方法と、さまざまな基準(zhǔn)に基づいてデータをフィルタリングする方法を提供します。これらのメソッドをAJAXと組み合わせて使用??してサーバー側(cè)のソートとフィルタリングを?qū)g裝することもできます。データベース。データベースからデータをグリッドにロードすることもできます。また、グリッドで行われた変更を受けてデータベースを更新することもできます。これは、ajaxを使用して、php、asp.net、node.jsなどのサーバー側(cè)の言語(yǔ)と組み合わせて行うことができます。 Shield Ui Liteの組み込みエラー処理機(jī)能を使用して、編集可能なグリッドのエラーを処理できます。ライブラリは、エラーメッセージを表示し、無(wú)効なフィールドを強(qiáng)調(diào)し、無(wú)効なデータが保存されないようにする方法を提供します。ニーズに合わせてエラー処理動(dòng)作をカスタマイズすることもできます。

以上がjQuery、ブートストラップ、シールドUIライトを備えた編集可能なグリッドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。