Layui は複数条件クエリのサンプルコードを実装します

Layui は複数条件クエリのサンプルコードを実装します

最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきました

ページングを使用した複数条件クエリ (ページングにはバックエンド ページングが必要であり、ページはバックエンドに渡されてのみ実装され、フロントエンドは直接実装できません)

検索ボタンをクリックすると、入力値に関連するデータがフィルターされます。複数条件クエリはデータに基づいています。データがクエリされた後、ユーザーが入力した値が空でない場合、クエリされたデータの下の特定の値がユーザーが入力した値と等しくなるように条件が開かれます。次に、クエリされたデータがビューに返され、レンダリングされたテーブルが再ロードされます。クエリされたデータは、ユーザーが入力した値に関連するフィルターされたデータです。

ここに画像の説明を挿入

複数条件クエリフォーム

<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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Layuiはクエリ条件によるページングを実装します
  • Layui テーブルデータの追加、変更、削除、クエリ、ダブルクリックして行データを取得する方法
  • layUIはリストクエリ機能を実装します

<<:  MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します

>>:  CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

推薦する

高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rule...

Docker で Harbor パブリック リポジトリを構築する方法の例

前回のブログ投稿では、レジストリのプライベート ウェアハウスについて説明しました。今日は、Harbo...

Spark RDD をデータフレームに変換し、それを MySQL に書き込む例

DataframeはSpark 1.3.0で導入された新しいAPIで、Sparkで大規模な構造化デー...

Nginx で Brotli 圧縮アルゴリズムを有効にする方法の例

Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...

MySQL の削除に基づく構文エイリアスの問題

目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...

アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。

最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...

MySQLの制限を使用して大規模なページングの問題を解決する方法

序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

element-plus でオンデマンドインポートとグローバルインポートを実装する方法

目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...