SharePoint：扩展DVWP - 第31部分：在Insert模版上通过jQuery填写默认值

我们已经构建了一个解决方案，用于实现组织对员工的跟踪。 我们已经重排了DVWP的布局，重新编写了表单操作链接的程序，甚至为其传递了一些工作流变量参数，添加级联下拉列表框，还创建一个备用编辑模板，以便我们能够将编辑和删除操作记录到审计列表中。

从最近的几篇文章开始，为我们进入了扩展DVWP 系列的高潮部分 。  我们现在有多个页面（每一个对应一个位置/经理）。 每个页面都可以包含多个DVWP，可能是因为一个经理要管理多个地点和/或因为我们需要跟踪和计算“其他”类型的员工。

简化用户体验

我们已经为每个位置创建了单独的页面，现在访问每个页面的经理希望添加新的雇员时默认就属于他自己的位置，这很合理。因此，我们需要基于当前所在的页面设置Location的默认值。

当然，我们将使用jQuery：

   1. 在 DVWP 所在的页面上, 通过以下任意一种方式进入编辑模式：
         i. 点击网站操作 - > 编辑页面 ，或
         ii. 在页面的URL后面添加 ?PageView=Shared&ToolPaneView=2

   2. 如果你曾经跟着文章的步骤做并实现了级联下拉列表框，那么请打开现有的内容编辑器Web部件（CEWP），让我们考虑一下如何能够设置一些默认值。

     （注：如果你还没有添加级联下拉列表框，请跳到第3步，忽略下拉框，但请留意第2-3行的代码。）

      下面是在我的场景中样子：

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.SPServices-0.5.6.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/subsite",
            relationshipList: "LocGroup",
            relationshipListParentColumn: "Location",
            relationshipListChildColumn: "Group",
            relationshipListSortColumn: "Group",
            parentColumn: "Location",
            childColumn: "Group"
        });
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/subsite",
            relationshipList: "GroupPos",
            relationshipListParentColumn: "Group",
            relationshipListChildColumn: "Position",
            relationshipListSortColumn: "Position",
            parentColumn: "Group",
            childColumn: "Position"
        });
    });

</script>

 3.第一个SPCascadeDropdowns调用是根据Location级联Group。 让我们先设置Location，以便可以根据预设的Location来设置Group下拉框：

    $(document).ready(function() {
        $("select[title=Location]").val("ACB");
        $("input[title=Location]").val("ACB").next("img").trigger("click");
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/operations",
            relationshipList: "LocGroup",
            relationshipListParentColumn: "LocDept",
            relationshipListChildColumn: "Group12",
            relationshipListSortColumn: "Group12",
            parentColumn: "Location",
            childColumn: "Group"
        });
        .
        .
        .
    });
</script>

看起来我们设置了两次，但实际上我们的处理了两个不同的渲染控件方式：一种是在Internet Explorer（IE）里，另一种是在Firefox（FF）里。（注意：我还没有在Safari或Chrome浏览器里进行测试，但我预计这两种方式基本上可以覆盖所有的场景。）

   i. 在FF里设置默认值很简单：找到select并设置.val()即可。Firefox会自动进行后续处理。

$("select[title=Location]").val("ACB");

 ii. 在IE里，其工作方式有点不同。 如果下拉项数大于20的话，IE的渲染会变成：一个input控件和一些其他控件，通过编程方式连接在一起。

在 IE浏览器里，它会变为一个input控件，我们必须“点击”下拉箭头，才能使其真正在表单中被设置，尤其是在级联下拉列表框中进行调用时。

$("input[title=Location]").val("ACB").next("img").trigger("click");

      在这种情况下，在设置.val()后，我们定位到接下来的兄弟标记，是一个img控件(.next("img"))并触发其click事件。

4. 对于主要的Location选项卡，这就是我们为实现默认值要做所有工作。 为了确保操作的顺畅，当在IE中把下拉框渲染为input时还有一小点需要注意：

        $("input[title=Employee]").focus();
    });

</script>

 

这样就将焦点设置回Employee文本框，以避免把通过代码方式展开的下拉框选项留在页面上。

休斯敦，我们有麻烦了

 上面的脚本的在页面上只有一个DVWP时运行良好，因为这时页面上只有一个名为Location的控件。但是，我们一直承诺页面上可以放置超过一个的DVWP。

如果我们在多个DVWP的情况下运行这个脚本，它将为页面中生成的每一个INSERT模版设置"Location”为ACB。 在非正式员工的情况下，我们实际上希望Location设置为相应的雇员类型，其Group设置为相应的主站点。

（例如：一个人可能会根据需要在不同的地点工作，可以看作是兼职。他可能每天工作在不同的地点。其中一个地点（ACB）可以看作是他的主站点。对于这种情况，我们需要要将他的Location设为PRN，这样我们可以计算出总的PRN人数，并且与同一地区中的正式员工（FTE）区分开来。同时，我们使用Group来标识他的主站点为 ACB。）

但是，上面的脚本无法满足要求。

 

下一次：当我们继续扩展DVWP时 ，将寻找一个办法来区分哪些DVWP是我们要操作的，以便我们可以设置相应的默认值。

 

参考资料

SharePoint:Extending the DVWP-Part 31：Filling in Default Data on the insert Template with jQuery