SharePoint：扩展DVWP

wsxdc

　　编辑列表项时通常会必简单的查看要包含更多字段。列表默认视图中并不总显示该项的所有字段。但当我们进到编辑状态时，却需要访问所有的字段...。或者，最起码是所有你需要编辑的字段。
　　在我们的Full-time Employee（FTE）例子中，我们准备通过Location来过滤雇员，从而实现在某个特定地点对应的页面上只显示该地点的雇员。因此，在该页面上我们不需要再次显示出Location字段。在每一个页面上，我们还会通过“Group”字段实现分组显示，所以Group字段也无需显示在行视图中。

　　默认的DVWP多项目视图，打开了编辑/删除功能（并移到了右侧）
　　但是，当需要进行编辑时，我们必须能够编辑雇员的Location和Group。我们需要创建一个“编辑”视图，并包含所有用户切换到编辑状态后需要用到的字段。或者，你也可以将字段添加到默认视图中，以便其可以在编辑模版中使用。但是如果这样做，当我们没有在编辑模式时，实际上页面上会显示一下多余的或者说是无关紧要的信息。
　　此外，当你真正使用这些表单字段时，就会发现页面会被撑的很宽，不得不拖动左右滚动条（这个用户体验是很差的）。

　　包含所有字段的编辑模版，屏幕很难容得下
　　一种选择是想办法把所有的字段都摆放在页面中。

　　修改DVWP多项目视图的编辑模版
　　注意到我们摆了两行，默认情况下所有东西都是在一行里，像下面这样：



<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
<tr>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Title" ControlMode="Edit" />
</td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="Positions" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Positions" ControlMode="Edit" />
</td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="Edit" FieldName="WorkShift" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="WorkShift" ControlMode="Edit" />
</td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="Edit" FieldName="FTE" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="FTE" ControlMode="Edit" />
</td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="Edit" FieldName="EffDate" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="EffDate" ControlMode="Edit" />
</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">edit</xsl:with-param>
<xsl:with-param name="Pos" select="$Pos"/>
</xsl:call-template>
</td>
</xsl:if>
</tr>
</xsl:template>

　　例子——默认的编辑模版：“dvt_1.rowedit”的XSLT
　　在对该视图进行修改时，我们需要添加Site/Department栏和Group栏。
　　由于该模版是一个完整的行（TR），我们可以很容易的将其断成两行。过程很简单，只要考虑重什么地方结束一行并开始另一行（通过在需要断开的TD间插入</tr><tr>）即可。

　　之前

　　之后
　　如果我们刷新设计视图，可以看到显示布局很难看。因为上面一行里有四栏，而下面一行里只有两栏。表格需要进行一些整理，来为更多的栏腾一点空间。不过，首先我们需要在下面的行中添加两个TD。



<tr>
<td class="ms-vb"></td>
<td class="ms-vb"></td>
<td class="ms-vb">
<SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="Edit" FieldName="EffDate" ItemId="{@ID}" {code} />
<SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="EffDate" ControlMode="Edit" />        </td>

　　当然，由于我们操作的是编辑模版，当设计视图刷新后会回到默认值模版，需要手工切回编辑模版。
　　尽管数据被分在两行里了，但是本例中的文本框占的空间太夸张了：

　　文本框占用了太多页面空间，根本用不了那么长
　　修正这一点也很简单，在FormField标记中添加一个DisplaySize属性即可：



<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" {code} DisplaySize="35" />

　　现在，可以添加我们需要的栏了：
　　1、在表格中点击准备插入该栏的单元格
　　2、在数据源详细信息面板中找到该栏
　　3、右击该栏，然后选择“插入为列表表单域”
　　当然，栏的标题和下面的内容现在不匹配，因此你需要添加必要的标签以使得用户能够明白。
　　当进行默认内容的分割时，你可以从主标题行中进行复制，然后粘贴到所创建的行中...



<tr>
<th class="ms-vh" nowrap="">Location</th>
<th class="ms-vh" nowrap="">Group</th>
<th class="ms-vh" nowrap="">Effective Date</th>
<th class="ms-vh"> </th>
</tr>


　　两行的编辑模版
　　或者，你也可以直接添加一些简单的标签，看起来更清晰...



<strong>Site/Department: </strong> . . .
　　在SharePoint页面中显示时，看起来还是比较晕：

　　能看出我正在干什么吗？我是在插入，编辑，还是删除？我在处理哪一行数据？
　　从用户界面上考虑，上面的布局用户体验很差，所以我们准备在数据项四周加上一个线框，使其看起来更突出，以便用户可以知道他们正在处理哪一行数据。
　　这一点同时也是插入和删除模版会面临的问题，所以我们会为不同的模版设置不同的颜色，以便给用户提供另一个可视化的提示：当前进行的是什么操作？在本例中，我们将插入设为绿色，删除设为红色。而下面的操作是为了将更新设为蓝色。
　　使用CSS，为边框效果创建类，以区分不同的模版：



.ed-l {border-left:medium #0099FF ridge;}
.ed-r {border-right:medium #0099FF ridge;}
.ed-t {border-top:medium #0099FF ridge;}
.ed-b {border-bottom:medium #0099FF ridge;}
.in-l {border-left:medium lime ridge;}
.in-r {border-right:medium lime ridge;}
.in-t {border-top:medium lime ridge;}
.in-b {border-bottom:medium lime ridge;}
.dl-l {border-left:medium red ridge;}
.dl-r {border-right:medium red ridge;}
.dl-t {border-top:medium red ridge;}
.dl-b {border-bottom:medium red ridge;}

　　然后，为每一个TD添加合适的类：



<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
<tr>
<td class="ms-vb ed-l ed-t">
. . .
</td>
<td class="ms-vb ed-t">
. . .
</td>
<td class="ms-vb ed-t">
. . .
</td>
<td class="ms-vb ed-r ed-t">
. . .
</td>
</tr>
<tr>
<td class="ms-vb ed-b ed-l">
. . .
</td>
<td class="ms-vb ed-b">
. . .
</td>
<td class="ms-vb ed-b">
. . .
</td>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb ed-b ed-r" width="1%" nowrap="">
<xsl:call-template name="dvt_1.automode">
. . .
</xsl:call-template>
</td>
</xsl:if>
</tr>
</xsl:template>

　　现在的编辑模版如下图所示：

　　现在我们的操作变得一目了然：正在编辑Marcia Walsh的信息
　　在插入模版上重复上面的操作。
　　
　　下一次：将继续我们的扩展DVWP系列，为remove表单操作添加一个备用编辑模版。
　　
　　参考资料
　　SharePoint: Extending the DVWP – Part 26: Modifying the Edit Template