• 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",<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时,就会显示相对应不同的国家.

  • 相关阅读:
    左侧导航太长了?
    组织结构配置文件的诡异行为
    SharePoint上无法显示Lync的在线状态
    多语言和自定义CSS
    文档库下载副本,文件名被截断
    在线menu生成网站
    FC7崩溃,安装Ubuntu,相当不错的系统
    简易下载baidu音乐排行榜音乐
    java放射调用静态方法和构造函数
    升级到Ubuntu7.10导致Eclipse中键盘无效的问题
  • 原文地址:https://www.cnblogs.com/martin-roger/p/5512160.html
Copyright © 2020-2023  润新知