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は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

推薦する

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Centos7 での NFS サービス構築の紹介

目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...

jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...

Mysql系SQLクエリ文の書き順と実行順を詳しく解説

目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...

MySQL統計データテーブルの設計方法

目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

純粋な CSS3 マインドマップ スタイルの例

マインドマップ彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

Linux システムでの Selenium クローラー プログラムの導入の概要

目次序文1. セレンとは何ですか? 2. 使用手順1. ライブラリをインポートする2. テストコード...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

Linux (Ubuntu 18.04) に vim エディタをインストールする方法

デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...