如何使用 FromJson 模型为 Paginateddatatable 创建 souce？

Question

我正在使用 Mysql 数据库作为 flutter Web 应用程序的后端。我已经创建了 api 和模型来从 mysql 获取数据。我能够以 Json 甲酸盐的形式获得 table 数据。我能够对从浏览器获取的 json 数据进行 ftech。我想将这些数据提取到 flutter web 应用程序上的 paginatedDataTable 中。我面临着如何将这些数据 ftech 到 paginatedDataTable 的问题。请帮助我如何做到这一点。如何在 flutter web 应用程序上获取 json 数据到 paginatedDataTable。

Below is the json data getting from Browser:

[{"empid":1,"empname":"empname","empemail":"email1"},{"empid":2,"empname":"name2","empemail":"email2"},{"empid":3,"empname":"t1","empemail":"e1"},{"empid":7,"empname":"t2","empemail":"e2"}]

Below is the API:

import 'package:http/http.dart' as http;

import 'employees_model.dart';

Future<List> fetchEmployees() async {
  Uri url = Uri.parse("http://localhost:3000/employees_router/all");
  final response = await http.get(url);
  return employeesFromJson(response.body);
}

Below is employeemodel:

import 'dart:convert';

List<Employees> employeesFromJson(String str) =>
    List<Employees>.from(json.decode(str).map((x) => Employees.fromJson(x)));

String employeesToJson(List<Employees> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Employees {
  Employees({
    required this.id,
    required this.name,
    required this.email,
  });

  int id;
  String name;
  String email;

  factory Employees.fromJson(Map<String, dynamic> json) => Employees(
        id: json["empid"],
        name: json["empname"],
        email: json["empemail"],
      );

  Map<String, dynamic> toJson() => {
        "empid": id,
        "empname": name,
        "empemail": email,
      };
}

下面是我使用 paginatedDataTable 的不完整示例代码：

import 'package:flutter/material.dart';
import 'package:webappmysql/employees_model.dart';
import 'package:webappmysql/employees_api.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Example'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: FutureBuilder(
          future: fetchEmployees(),
          builder: (BuildContext ctx, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data.length,
                //shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  Employees employee = snapshot.data[index];
                  ////return Text(user.title);
                  return PaginatedDataTable(
                    source: _dataSource,
                    
                    header: const Text('Employees'),
                    columns: const [
                      DataColumn(label: Text('ID')),
                      DataColumn(label: Text('Name')),
                      DataColumn(label: Text('Email')),
                    ],
                    columnSpacing: 100,
                    horizontalMargin: 10,
                    rowsPerPage: 8,
                    showCheckboxColumn: false,
                  );
                  // return ListTile(
                  //   title: Text(employee.id.toString()),
                  //   subtitle: Text(employee.name),
                  //   contentPadding: const EdgeInsets.only(bottom: 20.0),
                  // );
                },
              );
            } else if (snapshot.hasError) {
              return Text('${snapshot.error}');
            }

            // By default, show a loading spinner.
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Answer 1

将您的 HomePage 更改为此。

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Example'),
      ),
      body: FutureBuilder(
        future: fetchEmployees(),
        builder: (BuildContext ctx, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: PaginatedDataTable(
                source: dataSource(snapshot.data),
                header: const Text('Employees'),
                columns: const [
                  DataColumn(label: Text('ID')),
                  DataColumn(label: Text('Name')),
                  DataColumn(label: Text('Email')),
                ],
                showCheckboxColumn: false,
              ),
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }

          // By default, show a loading spinner.
          return const CircularProgressIndicator();
        },
      ),
    );
  }

  DataTableSource dataSource(List<Employees> employeesList) =>
      MyData(dataList: employeesList);
}

class MyData extends DataTableSource {
  MyData({required this.dataList});
  final List<Employees> dataList;
  // Generate some made-up data

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => dataList.length;
  @override
  int get selectedRowCount => 0;
  @override
  DataRow getRow(int index) {
    return DataRow(
      cells: [
        DataCell(
          Text(dataList[index].id.toString()),
        ),
        DataCell(
          Text(dataList[index].name),
        ),
        DataCell(
          Text(dataList[index].email),
        ),
      ],
    );
  }
}

如何使用 FromJson 模型为 Paginateddatatable 创建 souce？

How to create souce for Paginateddatatable using FromJson model?

json

flutter

paginateddatatable