"。"/> "。">

ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryでjtableメソッドを使用する方法

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

WBOY
WBOYオリジナル
2022-06-24 16:08:381862ブラウズ

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

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。