jqueryでjtableメソッドを使用する方法-フロントエンドQ&A-php.cn

jqueryでjtableメソッドを使用する方法

WBOY

リリース： 2022-06-24 16:08:38

オリジナル

1843 人が閲覧しました

jquery では、jtable メソッドを使用して Ajax に基づいた CRUD テーブルを作成します。これはテーブル拡張プラグインであり、HTML や JavaScript のコーディングは必要ありません。構文は ""。

jqueryでjtableメソッドを使用する方法

このチュートリアルの動作環境: Windows10 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jquery で jtable メソッドを使用する方法

jTable は、HTML や JavaScript コーディングを行わずに Ajax ベースの CRUD テーブルを作成するために使用される jQuery プラグインです。

ダウンロード後に追加:

次の行を HTML ドキュメントの HEAD セクションに追加します:

<!-- 包括其中一种 jTable 样式。-->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- 包含jTable脚本文件。-->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

ログイン後にコピー

テーマフォルダーでは、任意のテーマとカラーモードを選択できます。

注: jTable ファイルをインポートする前に、必要な jQuery および jQueryUI JavaScript ファイルと CSS ファイルも追加する必要があります。

コンテナの作成

jTable には、テーブルのコンテナ要素のみが必要です。

<div id="PersonTableContainer"></div>

ログイン後にコピー

jTable インスタンスの作成

これらの JavaScript コードをページに追加します:

<script type="text/javascript"> 
    $(document).ready(function () { 
        $(&#39;#PersonTableContainer&#39;).jtable({ 
            title: &#39;人员表&#39;, 
            actions: { 
                listAction: &#39;/GettingStarted/PersonList &#39;，
                createAction：&#39;/GettingStarted/CreatePerson&#39;，
                updateAction：&#39;/GettingStarted/UpdatePerson&#39;，
                deleteAction：&#39;/GettingStarted/DeletePerson&#39; 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：&#39;作者姓名&#39;，
                    宽度：&#39;40%&#39; 
                }，
                年龄：{
                    标题：&#39;年龄&#39;，
                    宽度：&#39;20%&#39; 
                }，记录日期
                ：{
                    标题：&#39;记录日期&#39;，
                    宽度：&#39;30%&#39;，
                    类型：&#39;日期&#39;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

ログイン後にコピー

ビデオチュートリアルの推奨事項: jQuery ビデオチュートリアル

以上がjqueryでjtableメソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。