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

如何解决Flutter web 中带有粘性页眉和页脚的动态表格

我正在我的 Flutter web 应用程序中使用表格。我必须粘贴表格的页眉和页脚并动态创建表格。我使用的是 syncfusion_Flutter_datagrid 库。使用这个库我可以粘贴页眉和页脚但无法创建动态表。在同步融合示例中，列和行是硬编码的。我不想对列和行进行硬编码。我想让它动态完整。任何帮助将表动态化。下面是我的示例 json提供使用哪个表必须动态创建。谢谢！！参考：df.apply

解决方法

感谢您联系 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',onPressed: () {
                  setState(() {
                    _columns.removeAt(1);
                  });
                },],Expanded(child: _buildDataGrid())
        ],);
  }

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

请提供更多详细信息，以防我们误解您的要求。

第 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",{
        "firstName": "Deva","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());
          },));
  }
}

我在代码上使用了动态类型..你可以将其作为适当的强制转换为必要的步骤