SharePoint:扩展DVWP - 第32部分:多DVWP情况下为Insert模版填写默认值
上一次 ,我们讨论了如何使用jQuery为控件设置一个默认值。 在这个例子中,我们为一个使用了Marc Anderson的SPCascadeDropdowns下拉框设置值 。这是一个非常简单的步骤,只需要对用户正在使用的浏览器和/或下拉列表框的项数做些处理即可。
但是,当我们在项目中使用了 Christophe Humbert的 Easy Tabs 后,一个页面可以有多个DVWP,每一个为一个选项卡。而且这些DVWP基本上是相同的,只是用了不同的筛选器。这意味着无论你在哪个选项卡里,所有的表单域都是相同的布局方式。
因此,如果我们使用上一篇文章中的脚本,页面上的每个Insert模板(对于我们的例子,有几个DVWP实际上就有几个Insert模版) 都将被设置相同的默认值。但是,对大多数多DVWP的场景,这并不是我们要的结果。
我们该如何区分它们呢?
ID-entifying 解决方案
jQuery里最简单的一个选择器是ID选择器 ("#id")。 为了限制设置默认值的范围,我们只需给每个表单指定一个唯一的ID,然后在我们赋值时获取一下即可。
1. 在 SharePoint Designer (SPD)的设计窗格中,点击标题行最左侧的栏
点击标题行中的Employee,将会在代码窗格中突出显示dvt.headerfield,这样就可以定位到该表单的最上层table
2. 在突出显示的区域上面,箭头指向的table标记包括了整个显示区域,包括编辑 ,删除和插入模板 。这就是我们将要添加ID的地方
<table border="0" width="100%" cellpadding="2" cellspacing="0" id="FTE"></table>
接下来我们可以将整个WebPart导出来,以便重用。我们需要在为每个为经理创建的页面上添加它,并设置筛选条件使其看到该经理所关心的内容。所以这里最好是给这个table一个通用性描述的ID。 如果需要把在同一页上放两个非常相似的DVWP,我们可以为每个DVWP中的table提供一个更具描述性的独特的ID,到时那个ID是和其所在的页面相关。
3. 用同样的方法处理页面上剩下的DVWP,使每一个都具有一个唯一的ID。
对于上面的选项卡集,我用了这些ID:ACB_FTE,ARC_FTE,ADC_FTE,PRN及Other 。 前三个是导入的相同的一个DVWP三次,每一次对应一个Location。对于这三个中的每一个,我设置了筛选器来指定具体位置,同时编辑其ID,以标识出其正在处理的位置。
现在,让我们返回到jQuery,开始默认值的设置。
$(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>
为了使.val()针对特定的DVWP,我们将在前面添加jQuery ID选择器:
$("#FTE select[title=Location]").val("ACB"); $("#FTE input[title=Location]").val("ACB").next("img").trigger("click");
对我而言,我还需要为页面上另外的DVWP复制这两行代码:
$("#ACB_FTE select[title=Location]").val("ACB"); $("#ACB_FTE input[title=Location]").val("ACB").next("img").trigger("click"); $("#ARC_FTE select[title=Location]").val("ARC"); $("#ARC_FTE input[title=Location]").val("ARC").next("img").trigger("click"); $("#ADC_FTE select[title=Location]").val("ADC"); $("#ADC_FTE input[title=Location]").val("ADC").next("img").trigger("click"); $("#PRN select[title=Location]").val("PRN"); $("#PRN input[title=Location]").val("PRN").next("img").trigger("click");
注意一下jQuery的运行方式:上面的脚本并不是说“找到某个特定的变量,并设置其值”。 这样如果变量没有被定义将导致错误。 相反,它是说:“为每一个匹配该选择器的对象设置其值。” 如果它没有找到任何东西,无害,无臭,代码只是移动到下一条语句而已。
同样,下面的SPServices.SPCascadeDropdowns()调用也是会在每一个通过name找到的下拉框上执行,所以也是针对给定页面上所有的DVWP。 因为其操作的控件具有相同的名称,所以我们只需要在.ready()函数中包含一次联动的调用即可。
这里需要注意的是:我们可以在多个选项卡中同时打开了多个Insert模版(或者是edit模版,同理),尽管我们在同一时间只能看到一个,但确实可以都处于打开状态。 在打开多套下拉框的情况下,级联将无法工作。虽然这种情况百年一遇,用户在没有点击保存或取消的情况下又打开其他选项卡的插入或编辑模板。但一旦遇到了这个问题,你应该知道是什么原因。
为级联下拉框的第二层设置默认值
在上面的截图中你可能已经注意到两件事情:
1.我没有给你你看Other选项卡
2.其中PRN 选项卡设置了二级下拉框的值
首先,我不预先设置顶部的Other选项卡是因为我不知道它要做成什么样。.不过我为其设置了第二层的默认值。
在第二个地方,对于PRN,我知道实际上有三个地点有PRN员工,所以我将第二层预置为其中一个地点。
那么,怎么设置第二层呢?
没什么惊奇的,同第一层的方法一样。
$("#PRN select[title=Group]").val("ACB"); $("#PRN input[title=Group]").val("ACB").next("img").trigger("click"); $("#Other select[title=Group]").val("ACB"); $("#Other input[title=Group]").val("ACB").next("img").trigger("click");
在Other选项卡中,我设置了Group,而不是Location 。当用户选择"other” 位置时,Group将不会变。 换句话说,如果用户选择的是“非其他”{够绕口的,呵呵} 的位置时,Group将被空出来。
我把第二层放在了第一层SPCascadeDropdowns调用后。但是,Other选项卡引出了一些问题:
“如果我为所有的字段都设置了默认值,还有必要再设置第二层吗?”
不用了,你可以在SPCascadeDropdowns调用前进行设置。
“如果我只设置了第二层会是什么结果?”
没有关系的。SPCascadeDropdowns级联功能绑定到下拉框的onChange()事件上,当页面加载后实际不会发生级联,之后在父下拉框发生更改后才会变。
闻到美味的甜品
我们已经接近扩展DVWP 系列的最后阶段了。下次再见时,我们会实现总数和分类汇总。
参考资料