Flutter Web 中带有粘性页眉和页脚的动态表格

Question

我正在使用我的 Flutter Web 应用程序中的表格。我必须粘贴表格的页眉和页脚并动态创建表格。我正在使用 syncfusion_flutter_datagrid 库。使用这个库我可以粘贴页眉和页脚但无法创建动态表。在同步融合示例中，列和行是硬编码的。我不想对列和行进行硬编码。我想让它动态完成。在使表动态化时，任何帮助都将不胜感激。下面是我的示例 json提供使用哪个表必须动态创建。 谢谢！！ 参考：https://pub.dev/packages/syncfusion_flutter_datagrid

Answer 1

感谢您联系 Syncfusion 支持。 根据提供的信息，我们怀疑您正在尝试在运行时添加列。您可以维护一个List类型的实例，将列添加到该实例中，并将该实例分配给SfDataGrid的columns属性。您可以在运行时将任何列添加到实例并调用 setState() 来重建数据网格。

   List<GridColumn> _columns;
  @override
  void initState() {
    super.initState();
    employees = getEmployeeData();
    employeeDataSource = EmployeeDataSource(employeeData: employees);
    _columns = _getColumns();
  }
SfDataGrid _buildDataGrid() {
    return SfDataGrid(
        source: employeeDataSource,
        footerFrozenRowsCount: 1,
        columnWidthMode: ColumnWidthMode.fill,
        columns: _columns);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter DataGrid Demo'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              SizedBox(
                width: 60,
              ),
         FlatButton( 
      color: Colors.red[100], 
      shape: RoundedRectangleBorder( 
        borderRadius: new BorderRadius.all(new Radius.circular(20.0)), 
      ), 
      child: Center( 
        child: Text( 
          'Add Column', 
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), 
        ), 
      ), 
      onPressed: () { 
        setState(() { 
          _columns.add( 
              GridNumericColumn(mappingName: 'salary', headerText: 'Salary')); 
        }); 
      }, 
    ),
              SizedBox(
                width: 20,
              ),
              FlatButton(
                color: Colors.red[100],
                shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                ),
                child: Center(
                  child: Text(
                    'Remove Column',
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                  ),
                ),
                onPressed: () {
                  setState(() {
                    _columns.removeAt(1);
                  });
                },
              ),
            ],
          ),
          Expanded(child: _buildDataGrid())
        ],
      ),
    );
  }

示例链接：https://www.syncfusion.com/downloads/support/directtrac/317477/ze/main424752137

如果我们误解了您的要求，请提供更多详细信息。

Answer 2

第 1 步：

我已经准备好虚拟json数据，如果实时情况不同，我们必须在getData()方法中做一些修改

[
  {
    "REPORT_DETAIL": [
      {
        "firstName": "Shiv",
        "lastName": "A",
        "docNo": "0",
        "docDate": "05-Jan-2021",
        "address": "Bangalore",
        "stateName": "35-ANDAMAN & NICOBAR ISLANDS",
        "panNumber": "AAAPZ1234C",
        "adharNumber": "678954321234"
      },
      {
        "firstName": "Bala",
        "lastName": "A",
        "docNo": "0",
        "docDate": "05-Jan-2021",
        "address": "Bangalore",
        "stateName": "35-ANDAMAN & NICOBAR ISLANDS",
        "panNumber": "AAAPZ1234C",
        "adharNumber": "678954321234"
      },
      {
        "firstName": "Deva",
        "lastName": "A",
        "docNo": "0",
        "docDate": "05-Jan-2021",
        "address": "Bangalore",
        "stateName": "35-ANDAMAN & NICOBAR ISLANDS",
        "panNumber": "AAAPZ1234C",
        "adharNumber": "678954321234"
      }
    ]
  }
]

第 2 步：

--> 填充 DataGrid 中的行所需的源。

class EmployeeDataGridSource extends DataGridSource<dynamic> {
  List<dynamic> employeeData = [];

  @override
  List<dynamic> get dataSource => employeeData.map<dynamic>((e) {
        return e.entries.toList();
      }).toList();

  @override
  dynamic getValue(dynamic data, String columnName) {
    return data.firstWhere((e) => e.key == columnName).value;
  }
}

第 3 步：

---> 我使用了本地 json 和提供的数据，所以我使用了 FutureBuilder。如果您直接从 firebase 或 azure 获取，请使用 SteamBuilder

class _EmployeesListState extends State<EmployeesList> {
  EmployeeDataGridSource _employeeDataGridSource;

  @override
  void initState() {
    super.initState();
    _employeeDataGridSource = EmployeeDataGridSource();
  }
  
  Future<List<dynamic>> getData() async {
    String responseBody = await rootBundle.loadString("assets/demo_data.json");
    var data = await json.decode(responseBody);
    data = data[0]['REPORT_DETAIL'];
    _employeeDataGridSource.employeeData = [];
    for (final val in data) {
      _employeeDataGridSource.employeeData.add(val);
    }
    return Future<List<dynamic>>.value(data);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Dynamic SfDataGrid'),
        ),
        body: FutureBuilder<List<dynamic>>(
          future: getData(),
          builder: (context, snapShot) {
            if (snapShot.hasError ||
                snapShot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            }

            dynamic headerData = snapShot.data[0];
            headerData = headerData.keys.toList();
            return SfDataGrid(
                source: _employeeDataGridSource,
                columns: headerData
                    .map<GridColumn>((e) => GridTextColumn(
                        mappingName: e,
                        overflow: TextOverflow.clip,
                        headerTextOverflow: TextOverflow.clip,
                        maxLines: 2,
                        padding: EdgeInsets.all(2),
                        headerPadding: EdgeInsets.all(2)))
                    .toList());
          },
        ));
  }
}

我在代码中使用了动态类型..您可以将其正确转换为必要的步骤