Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta

Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta

Dalam pembangunan web, carta ialah cara yang sangat biasa untuk memaparkan data. Menggunakan PHP dan Vue.js, anda boleh melaksanakan fungsi penapisan dan pengisihan data dengan mudah pada carta, membolehkan pengguna menyesuaikan paparan data pada carta, meningkatkan visualisasi data dan pengalaman pengguna.

Pertama, kita perlu menyediakan satu set data untuk kegunaan carta. Katakan kita mempunyai jadual data yang mengandungi tiga lajur: nama, umur dan gred.

李FourWang Wu22

<?php
// 连接数据库
$conn = new mysqli("localhost", "root", "password", "database");

// 查询数据
$sql = "SELECT * FROM students";
$result = $conn->query($sql);

// 将查询结果转化为JSON格式返回给前端
$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>

new Vue({
    el: "#app",
    data: {
        students: [],
        filteredStudents: []
    },
    mounted() {
        // 发送ajax请求获取数据
        axios.get("data.php").then(response => {
            this.students = response.data;
            this.filteredStudents = response.data;
        });
    },
    methods: {
        filterData() {
            // 根据选择的筛选条件，过滤数据并更新到filteredStudents
        },
        sortData(fieldName, direction) {
            // 根据指定的字段和排序方向，对数据进行排序并更新到filteredStudents
        }
    }
});

Seterusnya, kita boleh menambah elemen interaktif untuk menapis dan mengisih pada halaman. Contohnya, dalam senarai juntai bawah keadaan penapis, kita boleh menambah kod berikut:

<select v-model="ageFilter" @change="filterData">
    <option value="">全部年龄</option>
    <option value="18">18岁</option>
    <option value="19">19岁</option>
    <option value="20">20岁</option>
    <option value="21">21岁</option>
    <option value="22">22岁</option>
</select>

sortData(fieldName, direction) {
    this.filteredStudents.sort((a, b) => {
        return a[fieldName] > b[fieldName] ? 1 : -1;
    });
    if (direction === "desc") {
        this.filteredStudents.reverse();
    }
}

<table>
    <tr v-for="student in filteredStudents">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.grade }}</td>
    </tr>
</table>

20	80
85
		Zhao Liu
Seterusnya, kami menggunakan data hantaran PHP ke Vue. js, Dan melaksanakan fungsi penapisan dan pengisihan data pada bahagian hadapan. Pertama, dalam fail PHP bahagian belakang, kami boleh menanyakan data dan mengembalikannya ke bahagian hadapan menggunakan kod berikut:	Menggunakan Vue.js di bahagian hadapan, kami boleh mengambil dan mengikat data melalui permintaan ajax kepada pembolehubah data yang diperlukan untuk carta Di Atas:	Dalam kod bahagian hadapan, kami mencipta tika Vue dan menentukan dua pembolehubah dalam atribut data: pelajar dan Pelajar yang ditapis, yang masing-masing menyimpan data asal dan data yang ditapis. Hantar permintaan ajax untuk mendapatkan data dalam mounted(), dan ikat data kepada pembolehubah yang sepadan dalam kaedah then().
Dalam kaedah sortData(), kita boleh menggunakan kaedah pengisihan tatasusunan JavaScript untuk mengisih data. Sebagai contoh, kod untuk mengisih mengikut nama dalam tertib menaik adalah seperti berikut:	Akhir sekali, gunakan pengikatan data Vue dalam HTML untuk memaparkan data pada carta:	Dengan contoh kod di atas, kita boleh melaksanakan carta menggunakan PHP dan Vue.js Fungsi penapisan dan pengisihan data. Pengguna boleh memilih data tertentu melalui keadaan penapis, dan kemudian mengisih data melalui fungsi pengisihan, dengan itu meningkatkan visualisasi data carta dan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!