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

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

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

キーテイクアウト

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

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

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

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

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

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

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

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

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

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

css：

スクリプト：

グリッドのセットアップ

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

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

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

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

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

編集を有効にする

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

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

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

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

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

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

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

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

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

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

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

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

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

<span><span><span><script> src<span >="shieldui-lite-all.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="shortGridData.js"</script></span>></span><span><span></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を使用してプログラムで選択する行を使用することもできます。これは、バルク編集または削除機能の実装に役立ちます。

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

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

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

以上がjQuery、ブートストラップ、シールドUIライトを備えた編集可能なグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。