検索

Layui関連フォームメソッド

Jun 12, 2020 pm 05:41 PM
layui

Layui関連フォームメソッド

次に、layui フォームの関連付けを作成します。フォームの関連付けとは何ですか? たとえば、layui テーブルが 2 つあります。最初のテーブルのデータをクエリした後、特定のボタンをクリックします。データの一部について、このデータの主キー ID に基づいて 2 番目のフォームのデータをクエリし、データをバックフィルします。

最初のステップは、2 つのテーブルを準備し、データに対応するヘッダーを設計することです。

Layui関連フォームメソッド

用意したのは 2 つのテーブルです。1 つは VIP テーブル、もう 1 つは VIP ポイント調整テーブルです。しばらくして、次のデータ クエリをクリックします。 VIPフォームのデータを出力する ポイント調整フォームのデータを出力する これら2つのフォームのデータクエリメソッドをコントローラー側で記述しましたので、ページにどのようなデータを表示する必要があるかを見てみましょう。

Layui関連フォームメソッド

ページ上のフォームはこのように表示されます。調整記録テーブルにはまだデータがありません。これは、初期化時に調整フォームのリクエスト パスをログアウトしたためです。上記のフォームのように、さらに多くの条件を指定してクエリを実行する方法はあまりありませんが、クエリ パスにバーを追加し、条件が満たされたときにクエリを開始するだけです。

以下はリスニングイベントであるフォーム関連のイベントで、layuiモジュールをロードするメソッド内にこのイベントを記述する必要があります。ここでのコードの意味は、VIP テーブル内の特定の行のデータを取得し、クリック イベントで変数を宣言し、この変数に値を代入することです。値を代入する場合、通常は ID に代入されます。後で、この ID データに基づいて調整テーブルが照会されます。データをクエリできる場合は、コンソールに割り当てられた値を出力して、それが可能かどうかを確認できます。

//获取VIP表行事件
            layuiTable.on('row(tabVip)', function (obj)
             {
                  var data = obj.data;//获取点击行数据
                  //标注选中样式
           		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
           		
                    ////***单击选中单选框
                    obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();
                    
                    var vipId = data.VipID;//vip类型id
                    
                    //控制台输出看看是否能获取到VIPid
                    console.log(vipId);
                    
                    //调整记录附件,根据VIPid查询对应的调整记录信息
                    tabAdjustmentRecord.reload
                    ({
                        //查询路径
                        url: '/DailyAffairs/VIPManege/AdjustmentRecord',
                        where:
                         { //设定异步数据接口的额外参数,比如设置多条件查询的参数
                            vipId: vipId
                        },
                        //从第一页开始
                        page:
                         {
                            curr:1
                        }
                    });
                });

まず効果を見てみましょう:

Layui関連フォームメソッド

#2 番目のデータをクリックしたため、コンソールによって出力される ID は 2 です。 , これは、id が正常に取得されたことを証明します。VIP テーブルの VIPid が取得されなかった場合、調整テーブルにはデータがありません。これには、id 出力があるかどうかを確認するためにコンソール出力が必要です。 id が出力されると、id が正しく取得されていないかどうか、またはコントローラーに ID を渡し、レコードを調整したコントローラーがそれを受け取るために対応する ID を書き込んでいるかどうかを確認します。

詳細については、layui、PHP中国語ウェブサイトlayuiチュートリアルコラム

をご覧ください。

以上がLayui関連フォームメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はCSDNで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか?無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか?Mar 18, 2025 pm 01:01 PM

この記事では、無限のスクロール、セットアップ、ベストプラクティス、パフォーマンスの最適化、および強化されたユーザーエクスペリエンスのカスタマイズをカバーするためにLayUIのフローモジュールを使用して説明します。

LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか?LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか?Mar 18, 2025 pm 01:00 PM

この記事では、LayUIの要素モジュールを使用して、タブ、アコーディオン、プログレスバーなどのUI要素を作成およびカスタマイズする方法を詳しく説明します。

LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか?LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか?Mar 18, 2025 pm 12:59 PM

この記事では、LayuiのCarouselモジュールのカスタマイズについて説明し、遷移効果、自動再生設定、カスタムナビゲーションコントロールの追加など、外観と行動のためのCSSとJavaScriptの変更に焦点を当てています。

LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか?LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか?Mar 18, 2025 pm 12:58 PM

この記事では、LayuiのCarouselモジュールを画像スライダーに使用し、セットアップの手順、カスタマイズオプションの実装、自動再生とナビゲーションの実装、およびパフォーマンス最適化戦略についてガイドします。

ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?Mar 18, 2025 pm 12:57 PM

この記事では、LayUIのアップロードモジュールの設定を、受け入れ、ext、サイズのプロパティを使用してファイルの種類とサイズを制限し、違反のエラーメッセージをカスタマイズすることについて説明します。

LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか?LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか?Mar 18, 2025 pm 12:46 PM

この記事では、LayUIのレイヤーモジュールを使用してモーダルウィンドウとダイアログボックスを作成する方法、セットアップ、タイプ、カスタマイズ、および避けるべき一般的な落とし穴の詳細について説明します。

LayUIは、BootstrapやSemantic UIなどの他のCSSフレームワークと比較してどうですか?LayUIは、BootstrapやSemantic UIなどの他のCSSフレームワークと比較してどうですか?Mar 14, 2025 pm 07:29 PM

シンプルさとパフォーマンスで知られるLayUIは、設計、コンポーネント、統合の容易さに関するブートストラップおよびセマンティックUIと比較されます。 layuiはモジュール性と中国のサポートに優れています。(159文字)

典型的なWebアプリケーションを超えたLayUIのいくつかの高度なユースケースは何ですか?典型的なWebアプリケーションを超えたLayUIのいくつかの高度なユースケースは何ですか?Mar 14, 2025 pm 07:28 PM

LayUIは、基本的なWebアプリを超えてスパ、リアルタイムのダッシュボード、PWA、複雑なデータ視覚化に拡張され、モジュラーデザインとリッチUIコンポーネントを使用してエンタープライズレベルのユーザーエクスペリエンスを強化します(159文字)。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境