SharePoint：扩展DVWP - 第21部分：实现可维护的三级联动下拉框-优快云博客

本文详细介绍了如何在 SharePoint 中实现三个级别的级联下拉框功能，包括创建查阅项列表、网站栏、关系列表，以及使用 jQuery 完成级联操作。通过实例展示了地质数据的级联应用，并讨论了在不同场景下的级联行为。此外，文章还预告了后续将通过 jQuery 实现列表项标题的自命名功能。

上一次，我们通过几个简单的步骤实现了级联下拉框——一个下拉框可以过滤另一个的可选项。

但是，如果我们有三个下拉框需要做级联该怎么做呢？比如，国家-省-市。或者工作地点-组-职位。

接下来的步骤相对于前面介绍的步骤来说有点重复：

1、创建一个查阅项列表并填充数据

2、创建一个网站栏，类型为查阅项，信息来源指向该列表

3、创建一个关系列表，用于存放新的第三级项和第二级项的对应关系。

4、填充关系列表数据

5、在我们工作的列表中添加新创建的网站栏

6、通过jQuery完成第二级和第三级项的级联

实例——地质数据

下面是一个在DVWP中实现的三级级联的例子：

第三级和第二级级联的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: "/",
                        relationshipList: "代纪关系", 
                        relationshipListParentColumn: "Dai",    
                        relationshipListChildColumn: "Ji", 
                        relationshipListSortColumn: "Ji", 
                        parentColumn: "代",
                        childColumn: "纪",
                        promptText: "(无)"
                                                                            });
                $().SPServices.SPCascadeDropdowns({
                        relationshipWebURL: "/",  
                        relationshipList: "纪统关系", 
                        relationshipListParentColumn: "Ji", 
                        relationshipListChildColumn: "Tong", 
                        relationshipListSortColumn: "Tong",  
                        parentColumn: "纪",
                        childColumn: "统",
                        promptText: "(无)"
                                                                            });

 })
</script>

这里需要注意的还是在创建网站栏和关系列表时，中文名称的命名一定要先起一个不含空格的字母组成的名字，然后再修改成中文的显示名称。以保证内部名称的单纯性。

代码的运行效果和设想的一样！

而且，更加人性化的地方是，对于一个子项对应多个父项的情况，如果父变了，而之前选中的子项对当前的父仍然有效的话，该子项值还会保持选中状态。不管是在二三级之间，还是在一二级之间都是如此。当然，对于上面的地层来说，不可能出现交插的情况。但如果是“工作地点-分组-职位”的话就完全有可能出现这种情况了。不同的工作地点下可能存在同一个组，或者不同的组中可能存在同一个职位。此时，父发生变化，只要子还是对于新的父项有效，则其值仍然会保持选中状态。而不是像一般情况那样被清空。

下一次：现在我们已经在查阅项字段中填充了初始数据，并且创建了关系列表，如果关系列表能够实现列表项标题的“自命名”就好了。接下来的扩展DVWP系列中我们将通过一小段jQuery来实现该功能。

参考资料

SharePoint:Extending the DVWP - Part 21:Cascading Dropdowns - Three-tier Cascade

转载于:https://www.cnblogs.com/Sunmoonfire/archive/2010/09/11/1823836.html