SharePoint 2010 级联下拉列表 (Cascading DropDownList)
Posted on 2016-05-20 15:09 空余恨 阅读(271) 评论(0) 编辑 收藏 举报一直搞不清楚为啥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" ,<span style= "color: rgb(153, 204, 0);" > //Countries就是存储Region和Country关系的列表</span> relationshipListParentColumn: "Region" ,<span style= "color: rgb(153, 204, 0);" > //Countries列表中的父字段</span> relationshipListChildColumn: "Title" ,<span style= "color: rgb(153, 204, 0);" > //Countries列表中的子字段</span> parentColumn: "Region" ,<span style= "color: rgb(153, 204, 0);" > //Demo文档库中的父字段</span> childColumn: "Country" ,<span style= "color: rgb(153, 204, 0);" > //Demo文档库中的子字段</span> debug: true } ); }); </script> |
并上传倒JsLibrary.
添加Content Editor web part 到Demo文档库的编辑页面, 本实例的编辑页面是Http://localhost/Demo/Forms/editform.aspx
编辑Content Editor web part, 添加Content Link 如下图:
这样就完成了所有的配置.
测试效果:
上传一个文档测试一下, 当选择不同的Region时,就会显示相对应不同的国家.