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

Question

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

标签： flutterdatatabledatatablesflutter-websyncfusion

Answer 1

Thanks for contacting Syncfusion support. Based on the provided information, we suspect that you are trying to add the column at runtime. You can maintain an instance in the type of List, add the columns to this instance and assign this instance to the columns property of SfDataGrid. You can add any column at run time to the instance and call setState() to rebuild the datagrid.

   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())
        ],
      ),
    );
  }

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/317477/ze/main424752137

Please provide more details in case we misunderstood your requirement.