SPServices是一个jQuery库,它提取SharePoint Web服务,并使其更容易使用。它可以使用不同的Web服务操作提供更有用且很酷的功能。它完全安装在客户端,不需要服务器。

用SPServices建立级联菜单十分简单,只需在同一个网站下建立一个级联关系库,再添加对应脚本即可。

现在,我们要创建如下图级联下拉菜单

首先我们得建一个库,来确定两级菜单间的关系,像这样:

接着,如图所示在正式的库里创建Catalogue字段(一级菜单)和SubCatalogue字段(二级菜单)

        

最后添加代码,当然在这之前你需要添加SPService库和jQuery库。

  $().SPServices.SPCascadeDropdowns({
relationshipList: "SMDSubDrop",
relationshipListParentColumn: "way",
relationshipListChildColumn: "subWay",
parentColumn: "Catalogue",
childColumn: "SubCatalogue",
debug: true
});
     relationshipList是关系列表库的名字

   relationshipListParentColumn和relationshipListChildColumn是关系列表库的列名

     parentColumn和childColumn是工作单列表库的列名。

关于SPServices中SPCascadeDropdowns详细的用法,请参考URL

在sharepoint 2010创建级联下拉菜单的更多相关文章

  1. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...

  2. 创建 CSS3 下拉菜单

    1. [图片] 菜单效果 2. [代码]menu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  3. 在Android中创建一个下拉菜单

    添加四个控件 TToolbar Alignment: alTop TSpeedButton Alignment: alRight StyleLookUp: detailstoolbutton Marg ...

  4. OAF实现下拉菜单联动

    当需要输入多个下拉菜单选项时,可能某些下拉菜单是有级联关系的.这时候就需要使用级联的下拉菜单来解决.下面的教程将介绍如何使用ppr制作级联下拉菜单 一.新建AM 在test.oracle.apps.c ...

  5. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  6. Unity3D UGUI下拉菜单/Dropdown组件用法、总结

    Unity3D中UGUI实现下拉菜单 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  7. Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用

    Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

随机推荐

  1. web开发相关概念

    什么是web通信? WEB采用B/S通信模式,通过超文本传送协议(HTTP, Hypertext transport protocol)进行通信.通过浏览器地址栏编写URL,向服务器发送一个请求,服务 ...

  2. cat快速查找文件内指定信息

    cat log.txt | grep "ERROR" | more 查找 log.txt 文件内 包含 “ERROR”  的信息,分屏显示

  3. 优化:在k8s上部署的gitlab

    gitlab组件图 gitlab在k8s上占用资源 # kubectl top pods -n default | grep git* gitlab-gitaly-0 9m 444Mi gitlab- ...

  4. ansible 2.7 API

    # coding:utf-8 # @Time : 2019-01-14 15:22 # @Author : 小贰 # @FileName: ansible_sync_hosts.py # @funct ...

  5. 「疫期集训day4」硝烟

    那真是一阵恐怖的炮击(that boomed booms),响亮的炮音(that noise),滚滚的硝烟(that smoke),熊熊的火焰在围绕着我们前进...小心前进(go and be car ...

  6. stb_image multiple definition of first defined here 多文件包含问题

    首先吐槽一下,网上的其他的一些内容都是瞎写,根本没有指出问题的根本原因,使用时出现异常情况不能自己解决也说明了C语言基础不牢固, 该头文件可以分为两种情况使用(推荐使用办法2,办法1中有解释原因)(任 ...

  7. requests接口自动化8-传递数据为xml形式的post请求:data

    传递数据为xml形式的post请求 请求体内容: <?xml version=“1.0” encoding = “UTF-8”?> <COM> <REQ name=&qu ...

  8. web 部署专题(五):nginx 安装(一) 树莓派

    1.安装Nginx sudo apt-get install nginx 2.启动Nginx sudo /etc/init.d/nginx start 3.测试安装是否成功(nginx默认是80端口) ...

  9. 深度学习论文翻译解析(十):Visualizing and Understanding Convolutional Networks

    论文标题:Visualizing and Understanding Convolutional Networks 标题翻译:可视化和理解卷积网络 论文作者:Matthew D. Zeiler  Ro ...

  10. 计算机网络期末实验考题(Pacekt Tracer搭建网络拓扑实现通信)

    期末考试的这一道实验题目具体要求如下:    搭建一个包含5个路由器.两个交换机和3个PC机的连通网络,网络拓扑结构自定,网络IP地址,子网掩码等信息自定, 最后实现3个PC机互通.要求:1)3个PC ...