在网上很难找到一些关于扑的资料,你是我最后的机会啊
在我的示例中,我创建了一个包含一些数据的简单网格。
因此,我想在flutter中使用复选框和SFDataGrid,我的目标是:
- 选择行
- 如果选择了行,则获取数据
- 点击按钮并显示所选数据
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
class CheckboxColumn extends StatefulWidget {
const CheckboxColumn({Key? key}) : super(key: key);
@override
_CheckboxColumnState createState() => _CheckboxColumnState();
}
class _CheckboxColumnState extends State<CheckboxColumn> {
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
body: SfDataGrid(
source: _employeeDataSource,
showCheckboxColumn: true,
checkboxColumnSettings: DataGridCheckboxColumnSettings(
backgroundColor: Color.fromARGB(255, 212, 0, 0),
),
selectionMode: SelectionMode.multiple,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: const Text('ID'))),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: const Text('Name'))),
GridColumn(
columnName: 'designation',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: const Text('Designation',
overflow: TextOverflow.ellipsis))),
GridColumn(
columnName: 'salary',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: const Text('Salary')))
]),
);
}
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
DataGridCell<String>(
columnName: 'designation', value: dataGridRow.designation),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
]))
.toList();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
}
class Employee {
Employee(this.id, this.name, this.designation, this.salary);
int id;
String name;
String designation;
int salary;
}
List<Employee> getEmployeeData() {
return [
Employee(10001, 'James', 'Project Lead', 20000),
Employee(10002, 'Kathryn', 'Manager', 30000),
Employee(10003, 'Lara', 'Developer', 15000),
Employee(10004, 'Michael', 'Designer', 10000),
Employee(10005, 'Martin', 'Developer', 20000),
Employee(10006, 'Newberry', 'Manager', 25000),
Employee(10007, 'Balnc', 'Developer', 35000),
Employee(10008, 'Perry', 'Designer', 45000),
Employee(10009, 'Gable', 'Developer', 10000),
Employee(10010, 'Grimes', 'Developer', 30000),
];
}
谢谢你!
1条答案
按热度按时间uhry853o1#
可以通过DataGridController.selectedRows属性获取选中的行,请参考下面的UG链接,
https://help.syncfusion.com/flutter/datagrid/selection#getting-selected-rows