[SilverLight] DataGrid实现批量输入(like Excel)

简介:

  DataGrid 控件提供了一种灵活的方式来以行和列的形式显示数据集合。但却没有提供增加、删除行、即时输入等功能,若要实现类似于Winform下的DataGrid批量录入功能,还得做一些手脚:
    1. 显示行号;
    2. 即时输入;
    3. 增加新行;
    4. 删除行;
    5. 复制、粘贴行/多行。

    本文针对这几个问题,提出一些解决思路。

 

1. 显示行号

        网上也有一些显示行号的文章,但都是一个处理思路,就是在LoadingRow事件中做手脚,如这篇文章中所提供的思路《[Silverlight]奇技银巧系列-4 在DataGrid中显示行号》:

   1: dataGrid1.LoadingRow += new EventHandler<DataGridRowEventArgs>(dataGrid1_LoadingRow);
   2:  
   3: void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e) {
   4:     int index = e.Row.GetIndex();
   5:     var cell = dataGrid1.Columns[0].GetCellContent(e.Row) as TextBlock;
   6:     cell.Text = (index + 1).ToString();
   7: }

    SL帮助文档中对LoadingRow的解释是:“若要改进性能,DataGrid 控件不针对绑定数据源中的每个数据项实例化 DataGridRow 对象。而是仅当需要时才由数据网格创建 DataGridRow 对象,并尽量重复使用这些对象。例如,数据网格为当前位于视图中的每个数据项创建一个 DataGridRow 对象,并在行滚出视图之外时回收它。”

   这个处理思路的一个问题,就是当DataGrid的行比较多,超出可视区域(出现滚动条)后;然后再删除前面的行,行号就废了。因为处于可视区域中的现有没有被删除的行,不会执行LoadingRow事件,所以显示的Index不会被更新。

处理思路:  

    我们一般是将ObservableCollection<Entity>作为DataGrid的数据源。一个变态的处理思路,就是给Entity增加一个Index属性(修改时引发PropertyChanged事件),然后再DataGrid的LoadingRow/UnloadingRow中,取得DataGrid的数据源ObservableCollection<Entity>,然后更新每个Index的值,囧。。。
    不过这样也有一个问题,就是在排序后,Index不会重新计算,显得有点乱。不知道排序会引发啥事件,如果在排序事件中也来更新一次Index,就没有问题了。哪位知道排序会引发啥事件,请告诉我,谢谢。/:)

 

2. 即时输入

    默认情况下,DataGrid的Cell(TextBlock)不是出于编辑状态,要按F2或者鼠标单击,才能进入编辑状态(TextBox)。如果用鼠标点,或者每次都按F2,用起来非常不爽。

处理思路:

    参考文章《An attempt to make the Silverlight DataGrid similar to Excel》,里面提出的思路就是在KeyDown\GotFocus\CellEditEnded三个事件中进行处理:
(1) KeyDown事件中,捕捉按键,如果是字符键,则记录到DataGrid.Tag中,然后执行dataGrid.BeginEdit(),强制DataGrid进入编辑状态。
(2) GotFocus事件中,将DataGrid.Tag中记录的字符取出来,然后付给输入框(TextBox);
(3) CellEditEnded事件中,清理DataGrid.Tag。

    在该文的回复中,有人提出了一个可替代的事件组合:TextInput/PreparingCellForEdit/KeyDown。也是一个处理思路。

    天杀的M$,为啥让DataGrid可编辑,却不能即时输入呢。要用这种变态的方式去处理。。。

 

3. 增加新行

    貌似新版本的SL,可以支持增加新行了。《微软发布Silverlight 4新版并更新Silverlight Tools和SDK》,但问题是,找遍了网络,竟然没有一个例子,M$的论坛上,也是只有提问没有答案。。。所以还是得自己动手。

处理思路:

    快捷键:DataGrid的KeyDown事件中,判断按键;
    增加新行:增加新行比较简单,上面提到,DataGrid的数据源是ObservableCollection<Entity>,因此,只要我们向该集合中增加一个元素,就能达到增加新行的目的。

 

4. 删除行

    处理思路同增加新行:

    快捷键:KeyDown中判断按键;
    删除行:取得DataGrid的当前选择行dataGrid.SelectedItem as Entity,然后从将Entity从ObservableCollection<Entity>中删除。

 

5. 复制/粘行

处理思路1:
   《An attempt to make the Silverlight DataGrid similar to Excel》一文中,也提供了一个复制/粘贴的思路:

image

主要分三个步骤:
(1). 获取DataGrid选择行,然后将每个cell(TextBlock)的中的文本数据,用“\t”分割,得到文本值;(如果Cell不在可视区域内,则调用dataGrid.ScrollIntoView,让Cell显示出来,然后才能取到TextBlock/TextBox)
(2). 将数据保存到系统的粘贴板:

   1: var clipboardData = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
   2: clipboardData.Invoke("setData", "text", "格式化的自定义格式的数据");

(3). 从粘贴板上将数据取回来,再赋值给目标行中的Cell(TextBox):

   1: var clipboardData = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
   2: string textData = clipboardData.Invoke("getData", "text").ToString();

    但该文章中,只提供了单行复制/粘贴的功能;而且这段代码有很大局限性,只能在IE中运行

处理思路2:
    上面的复制/粘贴功能,只局限在IE中运行。另一个处理思路,可以做两点改进:

(1)  上面提到,DataGrid的数据源是ObservableCollection<T>,只要改变该集合中的值,SL就会自动刷新DataGrid。因此我们可以不用去操作DataGrid中的Cell,而是直接操作ObservableCollection<T>。拷贝的时候,对选中的一个或多个元素(Entity)执行xml序列化得到文本值;粘贴的时候,将文本值反序列化回来,然后对掉选中的元素(Entity)逐个属性赋值。

    从ObservableCollection<T>得到文本值由两个处理思路:可以按上面描述的序列化来处理;也可以按处理思路1种的文本拼接思路,按照csv格式来进行拼接:属性值之间以“\t”分隔,元素(Entity)之间以“\r\n”分隔。

    按csv格式拼接的好处,就是拷贝的数据,可以直接粘贴到Excel中。而序列化的好处,就是可以保证兼容性;譬如批量录入过程耗时可能比较长,中途可能需要跳转到其他页面、或者离开很久、或者下班关机,那前面录入的相当于白干了;因此需要在客户端提供了一个临时保存的功能:把当前数据保存到文件(SL4支持将数据保存独立存储区中),下次再从文件中把数据加载出来;但如果中途系统升级了,增加或者减少了一个字段/列,则序列化可以忽略增加/减少的列,继续正常工作。但CSV格式拼接出来的文本,缺少列描述信息,就挂了。。。

(2) 用一个TextBox做中转。将文本值赋值给中转的TextBox,然后对TextBox按Ctrl+C,从而将数据拷贝到系统的粘贴板;粘贴的过程正好反过来,先将系统粘贴板的数据,粘贴到中转用的TextBox,然后再取得TextBox中的值。

    整个处理过程如下图所示:

image

    在复制/粘贴的过程中,可能还会遇到一种情况,即选择了DataGrid中的N行,然后复制;但粘贴的时候,可能会选择M行,有三种情况需要考虑:
(1) M=N:这种情况下,正好元素可以一一匹配上;逐个元素按属性赋值就行;
(2) M>N:虽然粘贴时,选择的行数更多,但我们可以忽略多出的行(M-N),只处理前面的N行;
(3) M<N:此时,需要考虑多出的复制行(N-M)要怎么处理了;有三种处理办法:(1) 忽略多出的复制行;(2) 按照Excel的处理思路,只允许粘贴到连续的N行中;(3) 我的处理思路是,可以跨行粘贴,对于多出的行,可以插入到ObservableCollection<T>中。

 

6. 类图结构

ClassDiagram1

7. 使用方法

   1: dataGrid.UseExtender<Employee>();

    这是最简单的情况,只提供基本的即时输入、增加、删除、复制、粘贴功能等;一个稍微复杂点的调用方式如下:

   1: //happyhippy.cnblogs.com
   2: //方法定义原型
   3: public static void UseExtender<T>(this DataGrid dataGrid, string autoIncreaseField = "",
   4:     bool useXmlCopy = true, Action<DataGrid, EntityChangedEventArgs> rowsChanged = null,
   5:     bool addable = true, bool deleteable = true)
   6:     where T : class, new()
   7:  
   8: //调用:
   9: dataGrid.UseExtender<Employee>("Index", true, 
  10:                 (s, eventArg) =>
  11:                 {
  12:                     //取得刚操作(插入/删除)的元素集合,可以干一些后续的事情。。。
  13:                     IList<Employee> changedEntities = eventArg.ChangedEntities as IList<Employee>;
  14:                 }, true, true);

运行效果:
 image

 

8. 上代码

 

 

 

 

DataGridLikeExcel.rar


本文转自Silent Void博客园博客,原文链接:http://www.cnblogs.com/happyhippy/archive/2010/12/26/1917383.html,如需转载请自行联系原作者

相关文章
|
前端开发 C# 数据库
让WPF中的DataGrid像Excel一样可以筛选(上)
让WPF中的DataGrid像Excel一样可以筛选(上)
201 0
让WPF中的DataGrid像Excel一样可以筛选(上)
让WPF中的DataGrid像Excel一样可以筛选(下)
让WPF中的DataGrid像Excel一样可以筛选(下)
227 0