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

一直搞不清楚为啥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时,就会显示相对应不同的国家.