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

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

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

 

1. 显示行号

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

   1: dataGrid1.LoadingRow += new EventHandler(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作为DataGrid的数据源。一个变态的处理思路，就是给Entity增加一个Index属性(修改时引发PropertyChanged事件)，然后再DataGrid的LoadingRow/UnloadingRow中，取得DataGrid的数据源ObservableCollection，然后更新每个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，因此，只要我们向该集合中增加一个元素，就能达到增加新行的目的。

 

4. 删除行

    处理思路同增加新行：

    快捷键：KeyDown中判断按键；
    删除行：取得DataGrid的当前选择行dataGrid.SelectedItem as Entity，然后从将Entity从ObservableCollection中删除。

 

5. 复制/粘行

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

主要分三个步骤：
(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，只要改变该集合中的值，SL就会自动刷新DataGrid。因此我们可以不用去操作DataGrid中的Cell，而是直接操作ObservableCollection。拷贝的时候，对选中的一个或多个元素(Entity)执行xml序列化得到文本值；粘贴的时候，将文本值反序列化回来，然后对掉选中的元素(Entity)逐个属性赋值。

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

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

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

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

    在复制/粘贴的过程中，可能还会遇到一种情况，即选择了DataGrid中的N行，然后复制；但粘贴的时候，可能会选择M行，有三种情况需要考虑：
(1) M=N：这种情况下，正好元素可以一一匹配上；逐个元素按属性赋值就行；
(2) M>N：虽然粘贴时，选择的行数更多，但我们可以忽略多出的行(M-N)，只处理前面的N行；
(3) M中。

 

6. 类图结构

7. 使用方法

   1: dataGrid.UseExtender();

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

   1: //happyhippy.cnblogs.com

   2: //方法定义原型

   3: public static void UseExtender(this DataGrid dataGrid, string autoIncreaseField = "",

   4:     bool useXmlCopy = true, Action rowsChanged = null,

   5:     bool addable = true, bool deleteable = true)

   6:     where T : class, new()

   7:  

   8: //调用：

   9: dataGrid.UseExtender("Index", true, 

  10:                 (s, eventArg) =>

  11:                 {

  12:                     //取得刚操作(插入/删除)的元素集合，可以干一些后续的事情。。。

  13:                     IList changedEntities = eventArg.ChangedEntities as IList;

  14:                 }, true, true);

运行效果：
 

 

8. 上代码

 

 

 

 

DataGridLikeExcel.rar

转载于:https://www.cnblogs.com/happyhippy/archive/2010/12/26/1917383.html