最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきました ページングを使用した複数条件クエリ (ページングにはバックエンド ページングが必要であり、ページはバックエンドに渡されてのみ実装され、フロントエンドは直接実装できません) 検索ボタンをクリックすると、入力値に関連するデータがフィルターされます。複数条件クエリはデータに基づいています。データがクエリされた後、ユーザーが入力した値が空でない場合、クエリされたデータの下の特定の値がユーザーが入力した値と等しくなるように条件が開かれます。次に、クエリされたデータがビューに返され、レンダリングされたテーブルが再ロードされます。クエリされたデータは、ユーザーが入力した値に関連するフィルターされたデータです。 複数条件クエリフォーム <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は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。
オリジナル: http://developer.yahoo.com/performance/rule...
前回のブログ投稿では、レジストリのプライベート ウェアハウスについて説明しました。今日は、Harbo...
DataframeはSpark 1.3.0で導入された新しいAPIで、Sparkで大規模な構造化デー...
Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...
目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...
CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...
CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...
最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...
序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...
Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...
この記事では、reduce()、filter()、map()、every()、some()、spre...
鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...
目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...
目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...
序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...