SharePoint 2010 级联下拉列表 (Cascading DropDownList)

yangcctv

　　一直搞不清楚为啥SharePoint 在列表中没有提供级联列的功能.既然没有提供, 我们只能自己去写, 还好我们不需要从零去实现这个功能, 已经有很多前辈提供了很多解决方案, 我们就没有必须重复造轮子.
　　目前可行的方案很多, 比如可以通过自定义列(customized Field) 来实现.这个需要通过Object-Model去实现, 而且需要在服务端去部署, 我们暂不考虑这种方案.
　　第二种方案, 是通过客户端的方式去实现级联列, 这种方法的优点是: 不需要任何服务端的代码,不需要部署, 只需要简单的相关的配置.
　　本文用到了SPServices (http://spservices.codeplex.com/),这是个JQuery类库整合了SharePoint web service. 提供了大量操作SharePoint的功能,有兴趣的可以去CodePlex去下载玩玩.
　　实例
　　本实例简单模拟Region (区域) 和Country (国家)之间的联动, 比如我选择了”欧洲”, 就相应的显示欧洲的国家比如德国, 法国等, 如果我选择”亚洲”, 就相应显示中国,日本,韩国等.
　　准备工作:
　　创建一个Region 列表, 就包含一个字段Title,数据很简单.

　　创建一个Countries 列表,包含2字段一个Title字段,另一个是Region字段 (字段类型Lookup, 并从Region 列表或者信息)

　　
　　数据也非常简单.

　　这时我们创建另一个列表Demo, 这个列表中就会包含级联的Region 和Country字段.
　　Region 字段, 类型: Lookup, 从Regions 列表获取数据
　　Country 字段, 类型: Lookup, 从Countries 列表获取数据
　　实现方式:
　　下载需要的JQuery 类库jquery-1.6.4.min.js 和jquery.SPServices-0.6.2.min.js, 新建一个文档库JsLibrary, 并上床我们的JQuery类库.
　　创建一个简单的Txt文件, 内容如下:
　　



<script language="javascript" type="text/javascript" src=" /JsLibrary/jquery-1.6.4.min.js"></script>
<script language="javascript" type="text/javascript" src=" /JsLibrary/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$().SPServices.SPCascadeDropdowns(
{
relationshipList: "Countries",//Countries就是存储Region和Country关系的列表
relationshipListParentColumn: "Region",//Countries列表中的父字段
relationshipListChildColumn: "Title",//Countries列表中的子字段
parentColumn: "Region",//Demo文档库中的父字段
childColumn: "Country",//Demo文档库中的子字段
debug: true}
);
});
</script>

　　
　　并上传倒JsLibrary.
　　添加Content Editor web part 到Demo文档库的编辑页面, 本实例的编辑页面是Http://localhost/Demo/Forms/editform.aspx
　　编辑Content Editor web part, 添加Content Link 如下图:

　　这样就完成了所有的配置.
　　
　　测试效果:
　　上传一个文档测试一下, 当选择不同的Region时,就会显示相对应不同的国家.