SharePoint：扩展DVWP - 第1部分：布局增强 – 在默认值模板和编辑模板中重新排列栏
当我们在数据视图中启用编辑，删除模式的链接时，SPD总是将链接添加到左边。 而我本来希望添加到右侧。所以需要对其进行移动。 对于一般的数据栏调整顺序，我们可以借助数据视图本身的“编辑列”功能。但是其中并不包含编辑/删除链接的栏。注：本文中，我们只是关注于默认值模板和编辑模板。插入模板将在接下来的文章中单独讨论。我们做不到什么？首先，让我们来讨论一下哪些操作是行不通的。一些移...
当我们在数据视图中启用编辑，删除模式的链接时，SPD总是将链接添加到左边。 而我本来希望添加到右侧。所以需要对其进行移动。 对于一般的数据栏调整顺序，我们可以借助数据视图本身的“编辑列”功能。但是其中并不包含编辑/删除链接的栏。
注：本文中，我们只是关注于默认值模板和编辑模板。插入模板将在接下来的文章中单独讨论。
我们做不到什么？
首先，让我们来讨论一下哪些操作是行不通的。一些移动栏的常规操作（或者说从设计角度看起来应该可行的操作），在这里却会出现问题。
行不通的步骤
在SPD的设计视图中：
- 用鼠标右击包含链接的列，并点击“选择”>“列”。
- 再次右键单击并选择“剪切” 。
- 用鼠标右击最右侧的列，选择“插入”>“列（在右侧）”。
- 右键单击新插入的列，并选择“粘贴”。
- 用鼠标点击最右侧的列（仍然是空的）并选择“删除”>“删除列”
这些步骤看似本应没问题，可是很快你就会发现处于编辑模式时页面上的链接乱了：本应在编辑模式里由保存和取消链接取代默认模式里的 编辑和删除链接，可是没有出现，而且编辑/删除链接也并没有如我们计划的那样出现在右侧。
正确的做法是，我们需要编辑该页面的XSL(eXtensible Stylesheet Language，可扩展样式表语言 ）。
重新排列包含编辑/删除操作的栏
我们需要移动三个部分，因为整个页面分为三个功能区，所有这些部分共同构成了包含编辑和删除链接的列：
- 表格的标题行
- 默认模板中的列
- 编辑模板中的数据列
1. 首先将光标移到标题栏的单元格内。
在拆分视图的设计窗格中，点击编辑/删除链接所处单元格顶部的单元格
点击编辑/删除链接上面的单元格
此时代码窗格将显示当前光标位置在代码中的哪个位置。
灰色的框显示的就是编辑/删除链接上面的单元格
由于我们准备移动链接栏到最右侧，所以也应该把相应的标题单元格移动对应位置。
很简单地修改原来的代码...
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <th class="ms-vh" width="1%" nowrap=""></th> </xsl:if> <th class="ms-vh" nowrap="">Title</th> <th class="ms-vh" nowrap="">修改者</th> <th class="ms-vh" nowrap="">修改时间</th>
<th class="ms-vh" nowrap="">Title</th> <th class="ms-vh" nowrap="">修改者</th> <th class="ms-vh" nowrap="">修改时间</th> <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <th class="ms-vh" width="1%" nowrap=""></th> </xsl:if>
同样，在拆分视图的设计窗格中，点击 编辑 / 删除链接旁边的第一个单元格（不是该链接本身所处的单元格 ）。
在设计窗格中，单击第一个字段，并从代码视图中找到相应的代码。
请注意，我们要移动的部分其实是在一个检查块中，好像是什么模式检查(if test="$dvt_1_automode = '1′")。不要担心所有的这些细节，只知道这是该模板的一部分，用来控制编辑和删除链接的显示就够了。 将整个<xsl:if>块移动到列表的末尾，这样就可以使其显示在最后（该行的最右侧 ）。
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <td class="ms-vb" width="1%" nowrap=""> <xsl:call-template name="dvt_1.automode"> <xsl:with-param name="KeyField">ID</xsl:with-param> <xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /> <xsl:with-param name="Mode">view</xsl:with-param> </xsl:call-template> </td> </xsl:if> <td class="ms-vb"> <xsl:value-of select="@Title"/> </td> <td class="ms-vb"> <xsl:value-of select="@Editor" disable-output-escaping="yes"/> </td> <td class="ms-vb"> <xsl:value-of select="ddwrt:FormatDate(string(@Modified), 2052, 5)"/> </td>
...到...
...改为...
也是将xsl:if从顶部移到底部，这里的每个栏也都是在同一<tr>里的 <td>块。
<td class="ms-vb"> <xsl:value-of select="@Title"/> </td> <td class="ms-vb"> <xsl:value-of select="@Editor" disable-output-escaping="yes"/> </td> <td class="ms-vb"> <xsl:value-of select="ddwrt:FormatDate(string(@Modified), 2052, 5)"/> </td> <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <td class="ms-vb" width="1%" nowrap=""> <xsl:call-template name="dvt_1.automode"> <xsl:with-param name="KeyField">ID</xsl:with-param> <xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /> <xsl:with-param name="Mode">view</xsl:with-param> </xsl:call-template> </td> </xsl:if>
保存该页面并在浏览器中查看，现在它现在看起来类似下面这样：
编辑/删除链接和标题中的空白都转移到最右边了
但是等等...点编辑后呢
由于我们的DVWP打开了编辑和删除模式，所以我们还有另一个视图需要修改，以使我们的链接在这两个视图中都位于最右侧。
如果你保存该页，并在浏览器打开，点击编辑链接时就发现，并不会打开EditForm.aspx，而是刷新当前页，所有可供编辑的字段以编辑控件的形式进行渲染。
编辑模板，正如浏览器中看到的。 请注意顶部标题行中的字段并没有正确的排列
看看SPD中是什么样子：
1. 当鼠标悬停在该Web部件上时右上角会显示一个右尖括号图标，点击该图标
2. 在弹出的菜单中的数据视图预览下拉列表框中选择编辑模板。
数据视图预览=编辑模板
注意到，现在我们的页面中有一个问题：标题行没有正确排列...
标题列总是往前错一个（ 标题对链接;修改者对标题，依次类推）
这是因为每个模板都共用相同的标题行，但显示各自的数据行。但是，我们可以很容易地解决该问题，通过重复前面的步骤将保存 / 取消单元格移到最右边。
1. 在设计窗格中点击除链接字段以外的任意一个单元格，在代码窗格我们会发现，现在处于一个完全不同的模板 dvt_1.rowedit里。同样的方式，我们移动整个<xsl:if>块，将原来的：
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb" width="1%" nowrap="nowrap">
<xsl:call-template name="dvt_1.automode">
<xsl:with-param name="KeyField">ID</xsl:with-param>
<xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" />
<xsl:with-param name="Mode">edit</xsl:with-param>
</xsl:call-template>
</td>
</xsl:if>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit" />
</td>
<td class="ms-vb">
<xsl:value-of select="@Editor" disable-output-escaping="yes" />
</td>
<td class="ms-vb">
<xsl:value-of select="ddwrt:FormatDate(string(@Modified),2052, 5)" />
</td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit" />
</td>
<td class="ms-vb">
<xsl:value-of select="@Editor" disable-output-escaping="yes" />
</td>
<td class="ms-vb">
<xsl:value-of select="ddwrt:FormatDate(string(@Modified),2052, 5)" />
</td>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb" width="1%" nowrap="nowrap">
<xsl:call-template name="dvt_1.automode">
<xsl:with-param name="KeyField">ID</xsl:with-param>
<xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" />
<xsl:with-param name="Mode">edit</xsl:with-param>
</xsl:call-template>
</td>
</xsl:if>
现在所有的修改我们都是在代码窗格里做的，当单击设计窗格时 ，数据视图又会恢复到默认值模板，因此我们必须切换回编辑模板 （正如我们在上面操作的一样），这样才能看到修改后的外观。
设计视图中的保存/取消块移到了右侧
至此，我们实现了将DVWP中的操作链接编辑/删除移动到右侧 。 最终的页面布局看起来如下图所示：
默认值模板
编辑模板
在下一次的扩展DVWP系列中，我们会在插入模板中完成同样的目标。
参考资料
