thinkphpの複数選択の削除

WBOY
リリース: 2023-05-26 13:34:10
オリジナル
700 人が閲覧しました

thinkphp6 は、MVC アーキテクチャに基づいた非常に優れた PHP 開発フレームワークで、開発効率が高く、使いやすく、安全性と信頼性が高く、コード作成プロセスを大幅に簡素化します。今日は、thinkphp6 を使用して複数選択削除を実装する方法について説明します。

1. はじめに

複数選択の削除は、最新の Web アプリケーションの一般的な機能の 1 つです。これにより、ユーザーはデータ テーブルまたはリスト内の複数の項目を選択し、それらを削除できます。この記事では、thinkphp6 のコントローラーとモデルを使用してこの機能を実現する方法を紹介します。

2. データベースの作成

まず、MySQL データベースにサンプル テーブルを作成する必要があります。この手順を完了するには、コマンド ライン ツールまたは phpMyAdmin を使用します。

CREATE TABLE example_table (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL ,
email varchar(255) NOT NULL,
主キー (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

これにより、ID、名前、電子メールのフィールドを持つ「example_table」という新しいテーブルが作成されます。

3. モデルとコントローラーの生成

次に、上で作成したテーブル構造に基づいてモデルとコントローラーを生成する必要があります。

thinkphp6 の Artisan コマンド ライン ツールを使用して、これらのファイルをすばやく生成します:

php think make:model ExampleModel --migration

上記のコマンドを実行すると、新しいモデル ファイルが生成されます ( app /Model/ExampleModel.php ) と新しいデータベース移行ファイル (database /migrations /yyyymmddhhmmss_create_example_model.php )。

php think make:controller ExampleController

上記のコマンドを実行すると、ExampleController.php ( app /Controller/ExampleController.php ) という名前の新しいファイルが生成されます。

4. コードを作成する

これで、複数選択の削除を処理するコントローラー コードを作成する準備が整いました。コントローラーでは、index (すべてのデータの表示に使用) と delete (削除要求の処理に使用) という 2 つの主要なアクション関数を実装する必要があります。

app/Controller/ExampleController.php ファイルに、次のコードを追加します。

<?php
namespace appcontroller;

use thinkacadeView;
use thinkRequest;
use appmodelExampleModel;

class ExampleController
{
    public function index()
    {
        $list = ExampleModel::all();

        return View::fetch('index', [
            'list' => $list,
        ]);
    }

    public function delete(Request $request)
    {
        $ids = $request->param('ids');

        foreach ($ids as $id) {
            ExampleModel::destroy($id);
        }

        return ['status' => 'success', 'message' => '删除成功'];
    }
}
ログイン後にコピー

上記のコードでは、最初にクラスをインポートし、index と delete の 2 つの関数を定義しました。関数インデックスは、ExampleModel からすべてのデータを取得し、それをテンプレートに渡すために使用されます。 delete 関数は、HTTP リクエストから削除する ID のリストを取得し、ExampleModel::destroy メソッドを使用して項目を削除します。

次に、複数選択ボックスと削除ボタンをテンプレートに追加する必要があります。アプリの /View /example /index.html ファイルを開き、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <h1>Example</h1>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="check-all"></th>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        <?php foreach ($list as $item): ?>
            <tr>
                <td><input type="checkbox" name="ids[]" value="<?php echo $item->id ?>"></td>
                <td><?php echo $item->id ?></td>
                <td><?php echo $item->name ?></td>
                <td><?php echo $item->email ?></td>
            </tr>
        <?php endforeach ?>
        </tbody>
    </table>
    <button id="btn-delete">删除</button>
    <script>
        var btnDelete = document.querySelector('#btn-delete');
        btnDelete.addEventListener('click', function () {
            var ids = [];
            var checkboxes = document.querySelectorAll('input[type=checkbox][name^=ids]:checked');
            for (var i = 0; i < checkboxes.length; i++) {
                ids.push(checkboxes[i].value);
            }
            if (ids.length > 0) {
                if (confirm('确定删除?')) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/example/delete');
                    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                    xhr.onload = function () {
                        var result = JSON.parse(xhr.responseText);
                        if (result.status == 'success') {
                            alert(result.message);
                            location.reload();
                        } else {
                            console.error(result);
                            alert('删除失败');
                        }
                    };
                    xhr.onerror = function () {
                        console.error(xhr);
                        alert('网络异常,请重试');
                    };
                    xhr.send(JSON.stringify({ids: ids}));
                }
            } else {
                alert('请选择要删除的项目');
            }
        });
        var checkAll = document.querySelector('#check-all');
        checkAll.addEventListener('click', function () {
            var checkboxes = document.querySelectorAll('input[type=checkbox][name^=ids]');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = checkAll.checked;
            }
        });
    </script>
</body>
</html>
ログイン後にコピー

上記のコードでは、JavaScript を使用して、選択されたすべての複数選択ボックスを取得し、これらの ID をサーバーの /delete に渡します。ルート。

5. テスト

これで、コンソールを開いて次のコマンドを使用して Web サーバーを起動できます。

php think run

ブラウザに「localhost:8000/example」と入力してexampleのホームページを開き、複数選択ボックスをクリックして削除する項目を選択します。最後に、「削除」ボタンをクリックして、選択した項目を削除します。

6. 結論

この記事では、thinkphp6 のコントローラー、モデル、ビューを使用して、複数選択削除機能を実装します。この機能は Web アプリケーションで重要な役割を果たし、アプリケーションのユーザー エクスペリエンスを最適化します。

以上がthinkphpの複数選択の削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート