最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきました ページングを使用した複数条件クエリ (ページングにはバックエンド ページングが必要であり、ページはバックエンドに渡されてのみ実装され、フロントエンドは直接実装できません) 検索ボタンをクリックすると、入力値に関連するデータがフィルターされます。複数条件クエリはデータに基づいています。データがクエリされた後、ユーザーが入力した値が空でない場合、クエリされたデータの下の特定の値がユーザーが入力した値と等しくなるように条件が開かれます。次に、クエリされたデータがビューに返され、レンダリングされたテーブルが再ロードされます。クエリされたデータは、ユーザーが入力した値に関連するフィルターされたデータです。 複数条件クエリフォーム <form class="layui-form" action=""> <div class="layui-inline"> <label class="layui-form-label">グレード</label> <div class="layui-input-inline"> <input type="text" id="grade" name="grade" placeholder="グレードを選択してください" オートコンプリート="オフ" クラス="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">プロフェッショナル</label> <div class="layui-input-inline"> <select name="majorid" id="majorid"> <option value="">選択してください</option> </選択> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" データタイプ="reload" スタイル="margin-left: 15px"> <i class="layui-icon layui-icon-search"></i> 検索 </button> <button type="reset" class="layui-btn layui-btn-primary">リセット</button> </div> </div> </フォーム> 年間カレンダーを使用して学年を選択し、専攻オプションを動的に取得します // カレンダーに表示される成績 var laydate = layui.laydate; laydate.render({ elem : '#grade', //要素タイプを指定: 'year' }); //ドロップダウンボックスプロフェッショナルを取得する $.ajax({ url: '../../MajorFindAllServlet?deptid=5', データ型: 'json', データ : { '状態' : 0 }, // 通常のステータスを持つすべての機関タイプを照会します。タイプ: 'post', 成功: 関数(データ) { $.each(データ、関数(インデックス、項目) { $('#majorid').append( new Option(item.majorname, item.majorid)); // ドロップダウン メニューに要素を追加します }); layui.form.render("選択"); } }); すべてのjsが含まれています...、tableはデータテーブル、laydataはカレンダー、formはフォームです。必要な部分を記述するだけです。詳細については、Layuiの公式Webサイトを参照してください。 layui.use(['table', 'laydate', 'form'], 関数() {...} テーブルを生成する //テーブルを生成 var table = layui.table; テーブルをレンダリング({ 要素: '#table', url: '../../ClassesFindByPageServlet', ツールバー: '#toolbarDemo', title: 'クラステーブル', //エクスポートファイル名ページ: { レイアウト:['count','prev','page','next', 'skip'] }, //ページングIDを開く: 'tableAll', どこ : { マジョリッド: ''、 学年 : '' }, リクエスト : { 'limitName' : 'pageSize' //ページあたりのエントリ数のデフォルトフィールドをpageSizeに変更します }, cellMinWidth : 80, //通常のセルの最小幅をグローバルに定義します。LayUI 2.2.1 で追加されました cols : [ [ { タイプ: 'チェックボックス'、 固定: '左' }, { フィールド: 'classid'、 タイトル: 「クラス番号」 }, { フィールド: 'クラス名', タイトル: 'クラス名' }, { フィールド: 'deptname', タイトル: 「部門名」 }, { フィールド: 'majorname', タイトル: 「職業名」 }, { フィールド: 'グレード'、 タイトル: 'グレード'、 ソート: true }, { 固定:「正しい」、 タイトル: 「作戦」 ツールバー: '#barDemo' } ] ] }); 複数の条件付きクエリのフォームを再読み込みするには、[送信] をクリックします。 //クエリボタンをクリックしてテーブルを再読み込みします $('#searchBtn').on('click', function() { テーブルを再読み込み('tableAll', { メソッド: 'post'、 どこ : { グレード: $('#grade').val(), メジャーID: $('#majorid').val() }, ページ: { 通貨: 1 } }); false を返します。 }); これで、Layui でマルチ条件クエリを実装するためのサンプルコードに関するこの記事は終了です。Layui でのマルチ条件クエリの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します
>>: CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。
目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...
私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...
目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...
目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...
1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...
k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...
マインドマップ彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js...
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...
目次序文1. セレンとは何ですか? 2. 使用手順1. ライブラリをインポートする2. テストコード...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...
デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...