循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据

有时候,一些数据的录入可能需要使用表格直接录入会显得更加方便快捷,这种情况有时候也是由于客户使用习惯而提出,本篇随笔介绍在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:MenuControlText="" 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;
        }

以上就是我们在数据编辑的处理思路和常规的做法,如果您对界面有更高的要求,也可以和我一起讨论处理。

相关推荐
可喜~可乐3 小时前
C# WPF开发
microsoft·c#·wpf
界面开发小八哥5 小时前
DevExpress WPF中文教程:Grid - 如何移动和调整列大小?(二)
ui·.net·wpf·界面控件·devexpress·ui开发
界面开发小八哥5 小时前
「实战应用」如何用图表控件SciChart WPF实现应用程序的DPI感知?
信息可视化·wpf·数据可视化·图表·scichart wpf·scichart
明耀2 天前
WPF TabControl 设置item不能点击
wpf
军训猫猫头2 天前
20.抽卡只有金,带保底(WPF) C#
ui·c#·wpf
明耀2 天前
WPF 设置平均布局 如果隐藏的话,能够自动扩展
wpf
晚安苏州2 天前
WPF DataTemplate 数据模板
wpf
甜甜不吃芥末3 天前
WPF依赖属性详解
wpf
Hat_man_3 天前
WPF制作图片闪烁的自定义控件
wpf
晚安苏州5 天前
WPF Binding 绑定
wpf·wpf binding·wpf 绑定