SharePoint 2013 使用查阅项实现联动下拉框

  SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法。

  这里,我们介绍如何使用JQuery+JavaScript客户端对象模型实现,下面让我简单介绍下实现的全过程。

  1、创建基础列表CityList,保存的是城市名称,使用默认字段Title;

  2、列表CityList的所有栏,我把Title字段的名称改为了City Name,如下图:

  3、创建基础列表AreaList,用于保存所有区和关联的城市,如下图:

  4、列表AreaList的所有栏,这里Title是区的名称,CityName是查阅项,关联自城市列表,如下图:

  5、栏CityName的详细属性,如下图:

  6、创建我们用来展示的列表,City一栏来自CityList,类型查阅项;Area一栏来自AreaList,类型查阅项;默认创建新项目,添加City的截图如下:

  7、默认新建项目,Area栏效果如图,会显示出栏Area所有的内容:

  8、在新建页面上,添加内容编辑器,添加如下代码:

<sharepoint:scriptlink name="SP.js" runat="server" ondemand="true" localizable="False"></sharepoint:scriptlink>
<script language="javascript" src="/_layouts/15/Jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script language="javascript" src="/_layouts/15/Jquery/jquery.SP.LinyuService.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    SPCustomServiceGetSelect("City","Area","AreaList","CityName","Title");//源父字段名,源子字段名,源列表列表,父字段名,子字段名
})
</script>

  9、再次打开新建项目页面,发现和一开始不一样了,这里Area栏只是None,如下图:

  10、在栏City里选中北京,如下图:

  11、查看Area栏的内容,只是北京的几个区,不再是所有区了,说明我们的脚本生效了,如下图:

  12、当我们选中重庆的时候,因为测试数据中没有为重庆添加区,所以显示为None,如下图:

  13、查看我写的JS脚本,这是引用的所有脚本;我的这一联动查阅项,就是基于这个脚本和JQuery库实现的,如下图:

总 结

  当我想到联动下拉框,首先想到就是JQuery实现,在SharePoint中,很多前台的应用,使用JQuery都非常方便,当然,脚本我会附加下载地址,有兴趣的可以拿去使用。

  在写脚本的时候,我尽量封装成类库,前台调用即可,有特殊需要的下载后自己修改吧。

附 脚本文件下载地址

  http://download.csdn.net/detail/linyustar/7562499

时间: 2025-01-02 20:39:54

SharePoint 2013 使用查阅项实现联动下拉框的相关文章

SharePoint 2013的查阅项功能

SharePoint 2013的查阅项功能,就是可以扩展其他列表字段为当前列表选项,但是选项太多的时候,会造成选择起来非常麻烦,所以,我们采取JS+Ajax的方式,改善一下这个展示,使操作更加方便. 展现效果 如下图,当我在Textbox里输入北京,会把北京开头的选项,加载到下拉选项中,如果什么都不输入,就是全部下拉选项,这样比较方便选项多的时候,进行筛选选择: 原理介绍 1. 使用JS隐藏原来的Select控件: 使用F12查看Select的Html代码,发现有Title是字段名,还有id属性

SharePoint 2013 扩展查阅项功能

SharePoint 2013的查阅项功能,就是可以扩展其他列表字段为当前列表选项,但是选项太多的时候,会造成选择起来非常麻烦,所以,我们采取JS+Ajax的方式,改善一下这个展示,使操作更加方便. 展现效果 如下图,当我在Textbox里输入北京,会把北京开头的选项,加载到下拉选项中,如果什么都不输入,就是全部下拉选项,这样比较方便选项多的时候,进行筛选选择: 原理介绍 1. 使用JS隐藏原来的Select控件: 使用F12查看Select的Html代码,发现有Title是字段名,还有id属性

asp.net-jquery 联动下拉框,动态添加dropdownlist option项后遇到问题

问题描述 jquery 联动下拉框,动态添加dropdownlist option项后遇到问题 这是一个联动的案例 选择一级菜单 二级菜单随之改变, 现在选择二级菜单也就是成员那个下拉框的选项之后,点击查询(服务端查询)按钮,这个下拉框动态append的option都没有了,变成了空,请问如何选择完二级下拉的选项之后,点击查询按钮在后台能获取到它的选择项呢??? 完整代码如下: $(document).ready(function() { var $ddl = $("select[name$=t

AJAX实现联动下拉框的问题(求助~~~)

问题描述 三级联动下拉框的问题.因为要求不能刷新页面,而且下拉框的内容都是在数据库,动态的,所以要求用AJAX.下拉框数据通过AJAX取得和联动方面没有问题.现在的问题是,在页面提交的时候会出错.比如:初期:DDL1有一个空项和一项Level1,DDL2有一个空项画面上,DDL1选择Level1,AJAX取得对应的Level21和Level22,通过JavaScript添加到DDL2上面.如果选择Level21或者Level22,然后点击画面上面的一个提交按钮,页面就会报错.如果不对DDL2进行

Prototype Ajax读取XML文档实现联动下拉框实例

在使用PHP进行WEB2.0网站开发时,时常需要用到Ajax技术来增加用户体验,当前比较流行的Ajax开发框架有Prototype,Jquery,Lightbox等,今天和大家分享如何利用Prototype和XML文档进行交互以实现Ajax联动下拉菜单的例子. Ajax(Asynchronous JavaScript and XML)使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用J

AjaxPro开发四级无刷新联动下拉框

问题描述 我从网上找的AjaxPro开发四级无刷新联动下拉框例子,但是不能正常运行,前两个下拉框能连动,后两个调数据库的老是出不来,提示"AreaEnum未定义"请大家帮帮忙,我弄了两天了不好,急area.aspx代码<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Area.aspx.cs"Inherits="Area"%><!DOC

javascript省市区三级联动下拉框菜单实例演示_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

地区选择-WAP地区3级联动下拉框怎么做?

问题描述 WAP地区3级联动下拉框怎么做? WAP地区3级联动下拉框怎么做?如图: 请指教~ 解决方案 http://zhidao.baidu.com/link?url=g-rBqdj52Sg9tfnVZ5SNqKEpe8W4dvMVJNSEYv3IbjTysTCtv9C_oXGIVwVOlaluWM40pn7ihXtm9plTbeUfEAL3zaGeFxeKniNTp3zB-Y_

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl