SharePoint：扩展DVWP

wsjz_01

　　从开始探索DVWP到现在已经有一段日子了。我们这几次的主题都是围绕构建级联下拉框展开的——也就是当选择一个下拉框时会限制下面的下拉框中出现的可选项。
　　还是用前面的Country/State为例，当选择Country=USA时，应该限制States只列出50个United States以及District of Columbia；当选择Country=Canada时，应该限制States只列出13个Canadian Provinces。我们将通过jQuery实现这样的带有级联关系的下拉框。

当前面临的问题
　　我们之前已经创建了一个例子列表，其中包含了Countries和States网站栏。问题如下：

　　这是完全合法的 ，并且可以像这样保存到数据库中。
　　不幸的是，尽管这两列都来自网站栏，其中虽然提供了“可能”数据的控制，但是组合起来却是没有意义的。Alabama并不是Canadian的省。
　　而且因为网站栏的数据会自动排序，该问题会加剧。比如我们可选的国家包括USA,Canada和India时，在选择省时states,provinces和territories会混在一起。

　　这就是为什么我们需要实现级联下拉框的原因。

解决方案
　　我们的解决方案中用到了jQuery和Marc Anderson的jQuery Library for SharePoint Web Services（即SPServices）。因此，如果你需要了解代码中更多的细节或函数的其他可选项，请参考相应语法的官方网站。下面是具体步骤：
　　1、在DVWP所在页面上添加一个内容编辑器Web部件（简称CEWP）
　　2、在WebPart属性中，点击“源编辑器...”按钮
　　3、粘贴下列jQuery脚本到弹出的“文本输入——网页对话框”中



<script src="/_layouts/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/_layouts/Scripts/jquery.SPServices-0.5.6.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipWebURL: "/", // 网站的URL, 可以是相对的也可以是绝对的；一般绝对地址更可靠
relationshipList: "Country-State Relationships", //关系列表的‘显示名称’
relationshipListParentColumn: "Countries", // 关系列表中父栏的内部名称
relationshipListChildColumn: "States", // 关系列表中子栏的内部名称
relationshipListSortColumn: "States", //  关系列表中子栏的内部名称
parentColumn: "Countries", //正在操作的列表中父栏的‘显示名称’
childColumn: "States" // 正在操作的列表中子栏的‘显示名称’
});
});
</script>

　　注意：对于中文名称的栏，创建时要使用不带空格的字母组成的名字。然后可以再修改为实际显示时使用的中文“显示名称”。这样填写内部名称时就可以直接使用创建时的字母组成的名字了。但是，也有例外情况发生。比如在这一下拉框系列的第一篇文章中，我们创建的Categories栏，其内部名称是Categories1。因为SharePoint网站中已经存在内部名为Categories的栏了。所以SharePoint会自动在后面加上一个编号。对于这种情况 ，可以在列表设置中，将鼠标移到相应的栏上，查看浏览器状态栏中的链接地址，其中field=后面跟着的值就是该栏的内部名称。
　　4、根据你的实际环境，对其中的脚本引用地址和列表名，栏名进行修改
　　5、点击保存
　　现在States下拉框完全受控于Counties的选择了：
　　Country=空

　　Country=Canada

　　Country=USA

　　下一次：继续我们的扩展DVWP之旅，我们将添加另一个级联下拉框，实现三层级联。
　　
　　参考资料
　　SharePoint:Extending the DVWP - Part 20:Cascading Dropdowns - Applying the jQuery