有时候，一些数据的录入可能需要使用表格直接录入会显得更加方便快捷，这种情况有时候也是由于客户使用习惯而提出，本篇随笔介绍在WPF应用端上使用DataGrid来直接新增、编辑、保存数据的处理。
录入数据的时候，我们都采用在一个窗体界面中，根据不同内容进行录入，但是有时候涉及主从表的数据录入，从表的数据有时候为了录入方便，也会通过表格控件直接录入。在Winform开发的时候，我们很多时候可以利用表格GridControl控件来直接录入数据；在BS的Vue&Elment前端项目中，也可以利用第三方组件vxe-table直接录入表格数据。
在不同的前端处理中，对于数据直接录入的处理，我写了一些随笔，可以参考。
在Winform界面中，也可以实现基于表格数据的直接录入，如下随笔所示《在DevExpress程序中使用Winform分页控件直接录入数据并保存》、《在DevExpress程序中使用GridView直接录入数据的时候，增加列表选择的功能》、《在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较》。
如在Vue的前端录入中，也可以实现数据直接录入的，详细可以参考随笔介绍《在Vue前端界面中，几种数据表格的展示处理，以及表格编辑录入处理操作》。
在Bootstrap的Web开发中，也可以使用控件实现数据表格的直接录入处理，如随笔介绍《在Bootstrap开发框架中使用dataTable直接录入表格行数据》。
1、在DataGrid上直接编辑保存数据的界面效果
一般情况下，我们可能会利用新的窗口来承载数据表格的内容，这样展现的方式会比较灵活，也比较丰富一些，如下界面所示。
有时候，我们也会采用直接录入数据的方式，来快速直接录入一些简单的数据，如下界面所示。
对于新增或者编辑，单击某行记录的时候，会进行编辑处理，如下界面所示。
但是，往往很多数据不是简单的录入，我们可能会涉及一些下拉列表，以及一些自定义的处理，如下所示。
普通下拉列表的处理
也可能是一些特殊的自定义处理，如选择图标的操作。
当然还有一些单选框、复选框等处理，那些也是类似处理，不在赘述。
2、实现过程和思路
大致了解了一些常规的直接编辑处理，我们来看看如何具体实现上面的效果的。
一般默认的DataGrid就是可以编辑内容的，或者你把只读属性IsReadOnly设置为false即可，如下： IsReadOnly="False"
编辑情况下，我们列表就不用设置复选框来勾选，而采用序号显示的方式，如下设置代码。
<DataGrid
x:Name="grid"
hc:DataGridAttach.ShowRowNumber="True"
AddingNewItem="grid_AddingNewItem"
AutoGenerateColumns="False"
CanUserAddRows="True"
CanUserSortColumns="False"
GridLinesVisibility="Vertical"
HeadersVisibility="All"
ItemsSource="{Binding ViewModel.MenuItems, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
RowHeaderWidth="60"
SelectionMode="Extended"
VerticalGridLinesBrush="AliceBlue">
<!--<DataGrid.RowHeaderTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}" />
</DataTemplate>
</DataGrid.RowHeaderTemplate>-->
对于直接编辑的数据列表，需要采用ObservableCollection<T>的集合处理，如果采用List<T>是不可以正常处理的。
/// <summary>
/// 编辑的数据列表
/// </summary>
[ObservableProperty]
private ObservableCollection<MenuInfo>? menuItems;
定义好集合后，我们对其中任何记录的处理，都是可以反映到界面上的了。如果需要新增记录，我们添加一个新的记录到上面的集合中即可体现到界面上了。
例如我们通过按钮新增一条记录，触发一个命令处理即可。
<Button
Width="80"
Height="40"
Margin="5"
hc:IconElement.Geometry="{StaticResource AddGeometry}"
Command="{Binding AddNewCommand}"
Content="新增"
Style="{StaticResource ButtonInfo}" />
其中AddNewCommand的命令操作，就是往上面的集合中添加一个记录即可体现到界面上了。
/// <summary>
/// 新增记录
/// </summary>
[RelayCommand]
private void AddNew()
{
this.ViewModel!.MenuItems!.Add(new MenuInfo()
{
SystemType_ID = App.ViewModel.SystemType,
//初始化
});
}
界面效果如下所示。
一般的列，编辑状态下就是文本框的处理，如下代码所示。
<DataGrid.Columns>
<DataGridTextColumn
MinWidth="50"
Binding="{Binding Name}"
Header="显示名称" />
而如果要自定义常规显示和编辑状态下的不同，那么就需要自定义模板<DataGridTemplateColumn.CellTemplate>、<DataGridTemplateColumn.CellEditingTemplate>来处理，如下所示。
例如对于图标列，两个模板内容不同的。
<DataGridTemplateColumn Width="80" Header="图标">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ui:SymbolIcon
Width="32"
FontSize="32"
Symbol="{Binding Icon}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel
MinWidth="200"
Background="{DynamicResource RegionBrush}"
Orientation="Horizontal">
<ui:SymbolIcon
FontSize="24"
Foreground="red"
Symbol="{Binding Icon, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<Button
Command="{Binding Path=DataContext.SelectIconCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=SelectedItem}"
Content="选择图标"
Foreground="red"
Style="{StaticResource ButtonInfo.Small}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
编辑模板下的显示和常规的不一样，以便提供一些入口我们进行相应的处理。
这里通过按钮，触发一个选择图标的命令操作，如下代码所示。
/// <summary>
/// 选择图标
/// </summary>
[RelayCommand]
private void SelectIcon(MenuInfo info)
{
//基于 SymbolRegular 图标选择
var page = App.GetService<SymbolRegularSelectPage>();
page!.ViewModel.ResetData();//每次更新数据
if (page.ShowDialog() == true)
{
var item = page.ViewModel.SelectedItem;
info.Icon = item.Text;
}
}
而对于一些普通的下拉列表，我们通过提供数据源的方式来绑定列表即可。
根据实际情况初始化下拉列表的内容，如下所示。
/// <summary>
/// 初始化字典
/// </summary>
/// <returns></returns>
public async Task InitDictItem()
{
//初始化性别的列表
this.GenderItems = new List<CListItem>()
{
new("男"),
new("女")
};
this.IsExpandToYesNoItems = new List<CListItem>()
{
new() { Text="是", Value = "1"},
new() { Text="否", Value = "0"},
};
this.IsVisibleToYesNoItems = new List<CListItem>()
{
new() { Text="是", Value = "1"},
new() { Text="否", Value = "0"},
};
}
其中XAML中的下拉列表的处理代码如下所示。
<DataGridTemplateColumn Width="100" Header="是否可见">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Foreground="{Binding Visible, Converter={StaticResource NumberToColorReConverter}}" Text="{Binding Visible, Converter={StaticResource NumberToYesNoStrConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox
ItemsSource="{Binding DataContext.ViewModel.IsVisibleToYesNoItems, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"
SelectedValue="{Binding Visible, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedValuePath="Value"
Text="{Binding Visible, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource NumberToYesNoStrConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
注意上面的绑定和选择路径，从而可以通过修改直接反映到集合上。
其中获取记录集合的处理操作代码如下所示。
public override async Task GetData()
{
//转换下分页信息
ConvertPagingInfo();
var result = await service.GetListAsync(this.PageDto);
if (result != null)
{
//this.MenuItems.Clear();
this.MenuItems = new ObservableCollection<MenuInfo>(result.Items?.ToList());
this.PagerInfo.RecordCount = result.TotalCount;
}
}
通过获得查询数据的处理，我们可以显示具体的页面信息。
<StackPanel Orientation="Horizontal">
<hc:Pagination
Margin="0,10,0,10"
DataCountPerPage="{Binding ViewModel.PagerInfo.PageSize}"
IsJumpEnabled="True"
MaxPageCount="{Binding ViewModel.PagerInfo.MaxPageCount}"
MaxPageInterval="5"
PageIndex="{Binding ViewModel.PagerInfo.CurrentPageIndex}">
<hc:Interaction.Triggers>
<hc:EventTrigger EventName="PageUpdated">
<hc:EventToCommand Command="{Binding ViewModel.PageUpdatedCommand}" PassEventArgsToCommand="True" />
</hc:EventTrigger>
</hc:Interaction.Triggers>
</hc:Pagination>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Text="共有记录数" />
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Foreground="Blue"
Text="{Binding ViewModel.MenuItems.Count}" />
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="/" />
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Foreground="Blue"
Text="{Binding ViewModel.PagerInfo.RecordCount}" />
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="条" />
</StackPanel>
而对于父级记录的处理，我们可以在里面增加一个下列树状列表的处理即可。
<DataGridTemplateColumn Width="150" Header="上级菜单">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Foreground="{Binding PID}" Text="{Binding PID, Converter={StaticResource MenuIdToNameConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<control:MenuControl Text="" Value="{Binding PID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
这样就可以弹出下列列表的信息了，这样我们可以绑定各种不同的树状数据集合，从而达到更好的编辑处理体验了。
数据记录的删除操作，我们可以判断集合对象的Id是否为空，来判断是否是新增的，然后采用不同的方式删除处理。
/// <summary>
/// 删除操作
/// </summary>
/// <param name="info">业务对象</param>
[RelayCommand]
private async Task Delete(MenuInfo info)
{
if (info == null) return;
if (info.Id.IsNullOrEmpty())
{
this.ViewModel.MenuItems!.Remove(info);
}
else
{
if (MessageDxUtil.ShowYesNoAndWarning("您确认删除该记录？") != System.Windows.MessageBoxResult.Yes)
return;
this.ViewModel.DeleteCommand.Execute(info);
}
}
而保存的时候，我们对记录进行新增或者修改即可，统一处理。
/// <summary>
/// 用于子类重写的保存更新操作
/// </summary>
/// <returns></returns>
protected virtual async Task<bool> InsertOrUpdate()
{
bool result = false;
if (this.MenuItems != null)
{
foreach (var item in this.MenuItems)
{
await service.InsertOrUpdateAsync(item, item.Id);
}
result = true;
}
return result;
}
以上就是我们在数据编辑的处理思路和常规的做法，如果您对界面有更高的要求，也可以和我一起讨论处理。
标签：10,CommunityToolkit,Mvvm,处理,ViewModel,列表,录入,new,数据 From： https://www.cnblogs.com/wuhuacong/p/17774455.html