SharePoint：扩展DVWP - 第26部分：修改编辑模版

编辑列表项时通常会必简单的查看要包含更多字段。列表默认视图中并不总显示该项的所有字段。但当我们进到编辑状态时，却需要访问所有的字段...。或者，最起码是所有你需要编辑的字段。

在我们的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="" style="height: 22px">Location</th>
    <th class="ms-vh" nowrap="" style="height: 22px">Group</th>
    <th class="ms-vh" nowrap="" style="height: 22px">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