c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
背景
在很多的时候我们需要编辑DataGrid中每一个Cell，编辑后保存数据，原生的WPF中的DataGrid并没有提供这样的功能，今天通过一个具体的例子来实现这一个功能，在这个例子中DataGrid中的数据类型可能是多种多样的，有枚举、浮点类型、布尔类型、DateTime类型，每一种不同的类型需要双击以后呈现不同的效果，本文通过使用Xceed.Wpf.DataGrid这个动态控件库来实现这个功能，当前使用的Dll版本是2.5.0.0，不同的版本可能实现上面有差别，这个在使用的时候需要特别注意。
Demo预览
代码结构
代码还是按照常规的MVVM结构来进行编写，主要包括Views、Models、MainWindowViewModel、Converters这些常规的结构，在介绍这些之前来说一下我们的整体结构，在Demo中我们准备了一个四行三列的DataGrid，其中第一列主要是表示当前行的名称、后面的Step列是根据代码动态进行添加的，这个Step部分是我们通过代码动态调整的，调整完成后能够将数据保存到数据源中，我们还是按照MVVM的结构来进行进行代码的介绍。
1 MainWindow
<Window x:Class="DataGridCellDoubleClickDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xceed="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:models="clr-namespace:DataGridCellDoubleClickDemo.Models"
xmlns:views="clr-namespace:DataGridCellDoubleClickDemo.Views"
mc:Ignorable="d"
Title="DataGridDemo" Height="450" Width="800">
<Window.Resources>
<DataTemplate x:Key="CustomTemplate">
<Border BorderThickness="1" BorderBrush="Blue">
<TextBlock Text="{Binding Path=Display }" FontWeight="Bold"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Border>
</DataTemplate>
<DataTemplate x:Key="RowHeadTemplate" DataType="{x:Type models:RecipeControlVariable}">
<TextBlock Text="{Binding DisplayName}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="Black" FontSize="12"/>
</DataTemplate>
<xceed:DataGridCollectionViewSource x:Key="recipeData" Source="{Binding RecipeVariables}"></xceed:DataGridCollectionViewSource>
</Window.Resources>
<Grid>
<xceed:DataGridControl x:Name="DataGridControl"
AutoCreateColumns="False"
FontSize="13"
VerticalContentAlignment="Center"
BorderBrush="Gray"
BorderThickness="1"
ItemsPrimaryAxis="Horizontal"
PagingBehavior="LeftToRight"
UpdateSourceTrigger="CellContentChanged"
SelectionUnit="Cell"
SelectionMode="Single"
ItemsSource="{Binding Source={StaticResource recipeData}}">
<xceed:DataGridControl.View>
<xceed:TableflowView FixedColumnCount="1" ContainerHeight="30" x:Name="tblView"
VerticalGridLineThickness="0.5" HorizontalGridLineBrush="Gray"
HorizontalGridLineThickness="1" VerticalGridLineBrush="Black"
RowFadeInAnimationDuration="0"
ScrollingAnimationDuration="0" ColumnStretchMinWidth="10"
DetailIndicatorWidth="20" ShowRowSelectorPane="False"
ShowScrollTip="False" UseDefaultHeadersFooters="False">
<xceed:TableflowView.FixedHeaders>
<DataTemplate>
<xceed:ColumnManagerRow AllowColumnReorder="False" AllowColumnResize="True" AllowDrop="False" AllowSort="False" />
</DataTemplate>
</xceed:TableflowView.FixedHeaders>
</xceed:TableflowView>
</xceed:DataGridControl.View>
<xceed:DataGridControl.DefaultCellEditors>
<xceed:CellEditor x:Key="{x:Type models:SmartCellViewModel}">
<xceed:CellEditor.EditTemplate>
<DataTemplate>
<views:SmartCellEditor Content="{xceed:CellEditorBinding}" VerticalAlignment="Center"
Height="{Binding ActualHeight,RelativeSource={RelativeSource AncestorType={x:Type Border},AncestorLevel=1}}"></views:SmartCellEditor>
</DataTemplate>
</xceed:CellEditor.EditTemplate>
</xceed:CellEditor>
</xceed:DataGridControl.DefaultCellEditors>
</xceed:DataGridControl>
</Grid>
</Window>
在View部分主要是通过引用Xceed中的DataGridControl控件进行扩展的，这个里面主要是需要设置DataGridControl的View和DefaultCellEditor这个里面DefaultCellEditor是本文的重点，这个就是单元格Cell双击后进行编辑的主体，在这个里面我们需要指定CellEditor的EditTemplate,这里面需要匹配一个DataTemplate,这个里面是一个SmartCellEditor的子View，下面我们来看看这个SmartCellEditor里面是什么内容？
2 SmartCellEditor
<UserControl x:Class="DataGridCellDoubleClickDemo.Views.SmartCellEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:conv="clr-namespace:DataGridCellDoubleClickDemo.Converters"
xmlns:xceed="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<conv:VisibilityConverter x:Key="visConverter" />
<conv:TimeSpanConverter x:Key="timeSpanConverter" />
<conv:NumConverter x:Key="numConverter" />
<conv:BoolConverter x:Key="boolConverter" />
</UserControl.Resources>
<StackPanel Margin="0">
<!--TextBlock-->
<TextBlock x:Name="textBlock"
Background="{Binding Background}"
Foreground="{Binding Foreground}"
Text="{Binding Path=Display,Mode=OneWay}"
ToolTip="{Binding ToolTip}"
FontWeight="{Binding FontWeight}"
VerticalAlignment="Stretch"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=TextBlock}"/>
<!--Editable ComboBox-->
<ComboBox x:Name="editableComboBox" ItemsSource="{Binding SmartCellData.Selections}" IsEditable="True" VerticalAlignment="Stretch" VerticalContentAlignment="Center"
DisplayMemberPath="SelectionDisplayName" Text="{Binding CellValue,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=EditableComboBox}" />
<!--Readonly ComboBox-->
<ComboBox x:Name="readonlyComboBox" VerticalAlignment="Center" VerticalContentAlignment="Stretch" ItemsSource="{Binding SmartCellData.Selections}" IsEditable="False"
DisplayMemberPath="SelectionDisplayName" SelectedValuePath="ControlName" SelectedValue="{Binding Path=CellValue,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=ReadonlyComboBox}" />
<!--Text Input TextBox-->
<TextBox HorizontalContentAlignment="Left" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Text="{Binding CellValue}"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=TextBox}" TextAlignment="Left" />
<!--Number Input TextBox-->
<xceed:DecimalUpDown HorizontalContentAlignment="Left" VerticalAlignment="Stretch" VerticalContentAlignment="Center" FormatString="G" Value="{Binding Path=CellValue,Converter={StaticResource numConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Increment="1" Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=DecimalUpDown}" TextAlignment="Left" />
<!--CheckBox-->
<CheckBox x:Name="checkBox" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Content="{Binding Tag}" IsChecked="{Binding Path=CellValue,Converter={StaticResource boolConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=CheckBox}" />
<!--TimePicker-->
<xceed:DateTimeUpDown Format="Custom" FormatString="HH:mm:ss" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Value="{Binding Path=CellValue,Converter={StaticResource timeSpanConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding Path=., Converter={StaticResource visConverter},ConverterParameter=TimePicker}" CultureInfo="uk-UA" />
</StackPanel>
</UserControl>
在这个里面我们在一个StackPanel中放置了匹配各种数据类型的Template,并且每一个的Visibility都是由visConverter这个自定义的Converter来实现的，后面我们会分析这个Converter里面的内容，这些代码的整体思想就是每次这个StackPanel里面的Template都只有一个可以显示，其它的都是隐藏的，哪一个会显示是根据当前的数据类型决定的，每一个注释表示每一个类型的数据，比如我们如果定义的是Bool类型，那么当我们双击单元格Cell的时候会出现一个CheckBox供我们编辑，所以这个里面我们需要根据我们定义的数据类型来扩展对应的模板，当我们双击单元格的时候就会显示这个模板从而进行编辑数据。
3 MainWindowViewModel
这个里面是定义的MainWindow对应的DataContext,在这里面我们会初始化绑定到MainWindow中DataGridControl的ItemsSource,我们先来看看这个里面核心的代码并就其中的要点进行分析。
using DataGridCellDoubleClickDemo.Models;
using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace DataGridCellDoubleClickDemo
{
public class MainWindowViewModel : NotificationObject
{
public MainWindowViewModel(Xceed.Wpf.DataGrid.DataGridControl dataGridControl)
{
DataGridControl = dataGridControl;
InitRecipeVariables();
}
#region Properties
private ObservableCollection<RecipeControlVariable> _RecipeVariables = new ObservableCollection<RecipeControlVariable>();
public ObservableCollection<RecipeControlVariable> RecipeVariables
{
get { return _RecipeVariables; }
set
{
if (value != _RecipeVariables)
{
_RecipeVariables = value;
OnPropertyChanged(nameof(RecipeVariables));
}
}
}
public Xceed.Wpf.DataGrid.DataGridControl DataGridControl { get; set; }
#endregion
#region Private Methods
private void InitRecipeVariables()
{
_RecipeVariables.Add(new RecipeControlVariable
{
ControlName = "Name",
DisplayName = "Name",
StepValues = new ObservableCollection<SmartCellViewModel>
{
new SmartCellViewModel
{
CellValue="Step",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "Name",
DisplayName = "Name",
VariableEditorType=RecipeVariableEditorType.TextInput
}
},
new SmartCellViewModel
{
CellValue="Step",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "Name",
DisplayName = "Name",
VariableEditorType=RecipeVariableEditorType.TextInput
}
}
}
});
_RecipeVariables.Add(new RecipeControlVariable
{
ControlName = "Time",
DisplayName = "Process Time(Sec)",
StepValues = new ObservableCollection<SmartCellViewModel>
{
new SmartCellViewModel
{
CellValue="0",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "Time",
DisplayName = "Process Time(Sec)",
VariableEditorType=RecipeVariableEditorType.NumInput
}
},
new SmartCellViewModel
{
CellValue="0",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "Time",
DisplayName = "Process Time(Sec)",
VariableEditorType=RecipeVariableEditorType.NumInput
}
}
}
});
_RecipeVariables.Add(new RecipeControlVariable
{
ControlName = "FrontChemical",
DisplayName = "FrontChemical",
StepValues = new ObservableCollection<SmartCellViewModel>
{
new SmartCellViewModel
{
CellValue="None",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "FrontChemical",
DisplayName = "FrontChemical",
VariableEditorType=RecipeVariableEditorType.ReadOnlySelection,
Selections=new ObservableCollection<SelectionItem>
{
new SelectionItem
{
SelectionControlName="CHEM1",
SelectionDisplayName="CHEM1",
},
new SelectionItem
{
SelectionControlName="N2",
SelectionDisplayName="N2",
},
new SelectionItem
{
SelectionControlName="CDIW",
SelectionDisplayName="CDIW",
},
new SelectionItem
{
SelectionControlName="",
SelectionDisplayName="None",
}
}
}
},
new SmartCellViewModel
{
CellValue="None",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "FrontChemical",
DisplayName = "FrontChemical",
VariableEditorType=RecipeVariableEditorType.ReadOnlySelection,
Selections=new ObservableCollection<SelectionItem>
{
new SelectionItem
{
SelectionControlName="CHEM1",
SelectionDisplayName="CHEM1",
},
new SelectionItem
{
SelectionControlName="N2",
SelectionDisplayName="N2",
},
new SelectionItem
{
SelectionControlName="CDIW",
SelectionDisplayName="CDIW",
},
new SelectionItem
{
SelectionControlName="",
SelectionDisplayName="None",
}
}
}
}
}
});
_RecipeVariables.Add(new RecipeControlVariable
{
ControlName = "NozzleBindingSetting",
DisplayName = "Nozzle Scan",
StepValues = new ObservableCollection<SmartCellViewModel>
{
new SmartCellViewModel
{
CellValue="Default",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "NozzleBindingSetting",
DisplayName = "Nozzle Scan",
VariableEditorType=RecipeVariableEditorType.TextInput
}
},
new SmartCellViewModel
{
CellValue="Default",
ErrorInfo=null,
SmartCellData=new RecipeVariableItem
{
ControlName = "NozzleBindingSetting",
DisplayName = "Nozzle Scan",
VariableEditorType=RecipeVariableEditorType.TextInput
}
}
}
});
}
#endregion
/// <summary>
/// reload datagrid content
/// </summary>
public void RefreshDataGrid()
{
try
{
if (null == DataGridControl) return;
//generate columns in Grid
DataGridControl.CurrentColumn = null;
if (DataGridControl.Columns.Count > 0)
DataGridControl.Columns.Clear();
var template = (DataTemplate)this.DataGridControl.FindResource("CustomTemplate");
var rowTemplate = (DataTemplate)this.DataGridControl.FindResource("RowHeadTemplate");
DataGridControl.Columns.Add(new Xceed.Wpf.DataGrid.Column()
{
Width = 140,
Title = "Name",
FieldName = ".",
CellContentTemplate = rowTemplate
});
var cellEditor = DataGridControl.DefaultCellEditors[typeof(SmartCellViewModel)];
for (int index = 0; index < RecipeVariables[0].StepValues.Count; index++)
{
int width = 1;
for (int n = 0; n < RecipeVariables.Count; n++)
{
string display = RecipeVariables[n].StepValues[index].Display;
if (!string.IsNullOrWhiteSpace(display))
{
int temp = display.Length * 7;
width = Math.Max(temp, width);
}
}
width = (int)(width * 1.1);
width = Math.Max(width, 80);
DataGridControl.Columns.Add(new Xceed.Wpf.DataGrid.Column()
{
Title = string.Format("Step {0}", index + 1),
FieldName = string.Format("StepValues[{0}]", index),
CellContentTemplate = template,
AllowSort = false,
Width = width,
MaxWidth = width * 2,
CellEditor = cellEditor
});
}
}
catch (Exception ex)
{
}
在这个里面我们重点分析下RefreshDataGrid这个子函数，在我们的MainWindowViewModel中我们定义的RecipeVariables是最终绑定到MainWindow中定义的DataGridControl中的ItemsSource,是整个控件的数据源，由于我们这个DataGird的第一列和后面的Step列数据类型不同，所以我们的RefreshDataGrid函数中增加Column列的时候是分作两个部分，第一个部分是单独增加一列，后面的列是通过循环StepValues这个集合来动态进行增加的，代码中我们定义了多少个StepValue，那么后面就会有多少列，这个里面的重点是增加Column的时候FieldName的赋值，这个是十分关键的，这个关系到能够让每一列获取到正确的数据源，例如第一列赋值Filed= “.” 表示直接从当前绑定的数据源获取数据，另外后面的Step列的每一个FieldName是动态进行赋值的，赋值语句是：FieldName = string.Format("StepValues[{0}]", index),这个里面Index是一个动态值，这个是非常关键的一步，另外后面的Step列由于需要通过双击进行编辑所以每一个Column是需要赋值CellEditor对象的，另外这个ViewModel中的DataGridControl是通过构造函数进行赋值的，构造函数中的赋值就是MainWindow中定义的DataGridControl对象，这个在阅读代码时需要特别注意。
4 Models
Models主要是定义的数据集合，我们的代码中主要包括RecipeControlVariable和SmartViewModel这两个部分，这两个部分分别对应DataGridControl的数据源以及双击进行编辑的SmartCellEditor两个部分一一对应。
更多代码方面的细节需要仔细去分析阅读源码，需要源码请点击此处进行下载。
以上就是c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)的详细内容，更多关于c# wpf双击编辑DataGrid的资料请关注我们其它相关文章！
相关推荐
-
C# WPF 建立无边框（标题栏）的登录窗口的示例
前言:笔者最近用c#写WPF做了一个项目,此前未曾做过完整的WPF项目,算是一边学一边用,网上搜了不少资料,效率当然是不敢恭维的,有时会在一些很简单的问题上纠结很长时间,血与泪的教训可不少. 不过,正如电视剧某榜里的一句话:既然我活了下来,就不会白白活着!笔者怎么也算挣扎过了,有些经验与教训可以分享,趁着记忆深刻总结写下来.希望后来者少走弯路,提高工作效率.如果有写得不好的地方,希望读者能够指正,一起进步! --------------------------------- 今天先从登录窗口说起
-
c# WPF设置软件界面背景为MediaElement并播放视频
在我们的常见的软件界面设计中我们经常会设置软件的背景为SolidColorBrush或者LinerColorBrush.RadialGradientBrush 等一系列的颜色画刷为背景,有时我们也会使用ImageBrush添加图片来作为界面的背景,另外常用的还有DrawingBrush以及今天需要进行总结的VisualBrush,这些我们都是比较容易实现的,那么我们如果想将软件的界面设计成一个动画或者干脆播放一段视频作为背景,这个对于整个软件的效果又是一个巨大的提升. 首先我们来看看backgr
-
c# WPF实现Windows资源管理器(附源码)
今天我来写一篇关于利用WPF来实现Windows的资源管理器功能,当然只是局部实现这个功能,因为在很多时候我们需要来实现对本机资源的管理,当然我们可以使用OpenFileDialog dialog = new OpenFileDialog()这个Microsoft.Win32命名空间下的这个类来实现一些资源查找和导入的功能,但是在很多时候我们可能需要更多的功能,并且希望能够集成到我们自己的项目中,但是我们这个时候就不得不自己来写一套来集成到我们的软件中去了,因为OpenFileDialog这
-
c# WPF如何实现滚动显示的TextBlock
在我们使用TextBlock进行数据显示时,经常会遇到这样一种情况就是TextBlock的文字内容太多,如果全部显示的话会占据大量的界面,这是我们就会只让其显示一部分,另外的一部分就让其随着时间的推移去滚动进行显示,但是WPF默认提供的TextBlock是不具备这种功能的,那么怎么去实现呢? 其实个人认为思路还是比较清楚的,就是自己定义一个UserControl,然后将WPF简单的元素进行组合,最终实现一个自定义控件,所以我们顺着这个思路就很容易去实现了,我们知道Canvas这个控件可以通过设置
-
C# wpf Brush转Hex字符串的实例代码
我就废话不多说了,大家还是直接看代码吧~ //from MaterialDesignDemo.Converters public class BrushToHexConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value == null) return null; string lowerH
-
c# WPF中System.Windows.Interactivity的使用
背景 在我们进行WPF开发应用程序的时候不可避免的要使用到事件,很多时候没有严格按照MVVM模式进行开发的时候习惯直接在xaml中定义事件,然后再在对应的.cs文件中直接写事件的处理过程,这种处理方式写起来非常简单而且不用过多地处理考虑代码之间是否符合规范,但是我们在写代码的时候如果完全按照WPF规范的MVVM模式进行开发的时候就应该将相应的事件处理写在ViewModel层,这样整个代码才更加符合规范而且层次也更加清楚,更加符合MVVM规范. 常规用法 1 引入命名空间 通过在代码中引入Syst
-
在C# WPF下自定义滚动条ScrollViewer样式的操作
一.实现对ScrollViewer样式的自定义主要包括: 1.滚动条宽度设置 2.滚动条颜色 3.滚动条圆角 4.滚动条拉动时的效果mouseover 二.实现效果: 三.实现方法 1.创建资源字典( ResourceDictionary)文件 由于style代码比较多,之间在控件文件中加载style比较混乱,也不利于其它窗口复用,这里单独创建了ScrollViewDictionary.xaml文件代码如下: <ResourceDictionary xmlns="http://schema
-
c# WPF中如何自定义MarkupExtension
在介绍这一篇文章之前,我们首先来回顾一下WPF中的一些基础的概念,首先当然是XAML了,XAML全称是Extensible Application Markup Language (可扩展应用程序标记语言),是专门用于WPF技术中的UI设计语言,通过使用XAML语言,我们能够快速设计软件界面,同时能够通过绑定这种机制能够很好地实现界面和实现逻辑之间的解耦,这个就是MVVM模式的核心了,那么今天我们介绍的MarkupExtension和XAML之间又有哪些的关系呢? Markup Extensio
-
C# WPF Image控件的绑定方法
在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径,类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称,后面表示具体哪个文件夹下面的哪个图片资源,在程序中,我们甚至可以为Image控件设置X:Name属性,在后台代码中动态去改变Image的Source,但我个人认为这
-
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
背景 在很多的时候我们需要编辑DataGrid中每一个Cell,编辑后保存数据,原生的WPF中的DataGrid并没有提供这样的功能,今天通过一个具体的例子来实现这一个功能,在这个例子中DataGrid中的数据类型可能是多种多样的,有枚举.浮点类型.布尔类型.DateTime类型,每一种不同的类型需要双击以后呈现不同的效果,本文通过使用Xceed.Wpf.DataGrid这个动态控件库来实现这个功能,当前使用的Dll版本是2.5.0.0,不同的版本可能实现上面有差别,这个在使用的时候需要特别注意
-
python中pygame针对游戏窗口的显示方法实例分析(附源码)
本文实例讲述了python中pygame针对游戏窗口的显示方法.分享给大家供大家参考,具体如下: 在这篇教程中,我将给出一个demo演示: 当我们按下键盘的'f'键的时候,演示的窗口会切换到全屏显示和默认显示两种显示模式 并且在后台我们可以看到相关的信息输出: 上面给出了一个简单的例子,当然在pygame的官方文档中有对显示策略的更权威的说明: http://www.pygame.org/docs/ref/display.html#pygame.display.set_mode ''' pyga
-
Vue 中 template 有且只能一个 root的原因解析(源码分析)
引言 今年, 疫情 并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...).然后,在前段时间也看到一个这样的关于 Vue 的问题, 为什么每个组件 template 中有且只能一个 root? 可能,大家在平常开发中,用的较多就是 template 写 html 的形式.当然,不排除用 JSX 和 render() 函数的.但是,究其本质,它们最终都会转化成 render() 函数.然后,再由 render() 函数转为 Vritual DOM (以下统称 VNode ).而 rende
-
Java中的使用及连接Redis数据库(附源码)
引言: 本文主要分享了Redis如何在IDEA中部署,运行:模拟加入Redis的操作: 目录结构 1. 在IDEA中搭建Redis 1.1 创建项目 新建含有web的SpringBoot项目: 搭建项目参考:SpringBoot超详细笔记:https://blog.csdn.net/weixin_42601136/article/details/108396511 1.2 添加依赖(不够手动添加) <dependencies> <!-- 1. Jedis--> <depend
-
vue使用引用库中的方法附源码
monaco-editor-vue的官方源码如下 Index.js import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; function noop() { } export { monaco }; export default { name: 'MonacoEditor', props: { diffEditor: { type: Boolean, default: false }, //是否使用diff模式 wid
-
jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
作者: think8848(公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com) 转载请保留此信息 CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI样式版本:1.8.13:其功能为创建jQuery UI风格的Tab用于显示iframe. 本示例中符加了jQuery.contextMenu插件,我修改了其样式,使用了jQuery UI的
-
详解Android中用于线程处理的AsyncTask类的用法及源码
为什么要用AsyncTask 我们写App都有一个原则,主线程不能够运行需要占用大量CPU时间片的任务,如大量复杂的浮点运算,较大的磁盘IO操作,网络socket等,这些都会导致我们的主线程对用户的响应变得迟钝,甚至ANR,这些会使应用的用户体验变差,但是有时又的确需要执行这些耗时的任务,那么我们通常可以使用AsyncTask或者new Thread 来处理,这样把任务放入工作线程中执行,不会占用主线程的时间片,所以主线程会及时响应用户的操作,如果使用new Thread来执行任务,那么如果需要
-
浅谈Spring中@Transactional事务回滚及示例（附源码）
一.使用场景举例 在了解@Transactional怎么用之前我们必须要先知道@Transactional有什么用.下面举个栗子:比如一个部门里面有很多成员,这两者分别保存在部门表和成员表里面,在删除某个部门的时候,假设我们默认删除对应的成员.但是在执行的时候可能会出现这种情况,我们先删除部门,再删除成员,但是部门删除成功了,删除成员的时候出异常了.这时候我们希望如果成员删除失败了,之前删除的部门也取消删除.这种场景就可以使用@Transactional事物回滚. 二.checked异常和unc
-
Angular X中使用ngrx的方法详解（附源码）
前言 ngrx 是 Angular框架的状态容器,提供可预测化的状态管理.下面话不多说,来一起看看详细的介绍: 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.scss.demopet.component.ts.demopet.routes.ts.demopet.module.ts 代码如下: demopet.html <!--暂时放一个标签--> <h1>Demo</h1> demopet