SPServices介绍之四：实现查阅项的级联选择功能（联动功能）

在上一篇文章SPServices介绍之三中介绍了使用SPServices调用SharePoint Web Service的基本方法，这篇文章利用SPCascadeDropdowns方法实现下拉菜单的级联选择功能（联动功能）。

假设需要实现 国家->公司->产品 这样一个两级的级联关系，例如中国->联想公司->Thinkpad。首先需要有三张表，分别是国家Country, 公司Company和产品Product，结构分别如下所示。

Country列表，Title列是Country的名字；

Company列表，其中的Title是Company的名字，Country Name是一个lookup列，lookup到Country列表的Title：

Product列表，其中Title是product名字，Company是lookup到Country的Title，Company Name是lookup到Company的Title：

再建立一个需要使用级联关系的表，例如公司购买清单，需要注明在哪个国家的哪个公司购买了哪个产品，结构是：

当用户添加一条item的时候是这样的：

当Company的数据很多时，非常不方便。

现在实现Country, Company和Product的级联关系，比如当我选择China的时候，From Company的下拉菜单只显示中国的公司。当在From Company的下拉菜单中选择了Lenovo的时候，Product下拉菜单中只显示联想的产品。

只需要通过以下两个步骤就可以完成：

1. 在newform中引入JQuery和SPServices

使用SharePoint designer打开Information列表的newform，将下面的代码添加到“PlaceHolderAdditionalPageHead”这个pleaceholder中去：

<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js" type="text/javascript"></script>

2. 然后在其后添加以下代码：

<script type="text/javascript">        $(document).ready(function() {  $().SPServices.SPCascadeDropdowns({    relationshipList: "Company",    relationshipListParentColumn: "Country_x0020_Name",    relationshipListChildColumn: "Title",    parentColumn: "From Country",    childColumn: "From Company",    debug: true  });    $().SPServices.SPCascadeDropdowns({    relationshipList: "Product",    relationshipListParentColumn: "Company_x0020_Name",    relationshipListChildColumn: "Title",    relationshipListSortColumn: "ID",    parentColumn: "From Company",    childColumn: "Product"  });});    </script>

代码分为两个部分，其中的第一部分代码是：

$().SPServices.SPCascadeDropdowns({    relationshipList: "Company",    relationshipListParentColumn: "Country_x0020_Name",    relationshipListChildColumn: "Title",<span style="white-space:pre"></span>    relationshipListSortColumn: "ID",    parentColumn: "From Country",    childColumn: "From Company",    debug: true  });

这段代码建立了From Country和From Company列的级联关系。首先通过parentColumn和childColumn指定了Information列表中需要级联的列“From Country”和“From Company”

parentColumn: "From Country",<pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">childColumn: "From Company"</span>

父列是From Country，子列是From Company，也就是说当改变From Country的值的时候，From Company的值也会跟着改变，这是通过SPServices调用SharePoint web service来实现的。当From Country改变时，SPServices会到Company列表中取值，来填充From Company下拉菜单。举个例子，假设我们在From Country中选择了China，那么SPServices就需要到Company表中查找所有属于China的Company，这是通过指定relationshipList这个参数实现的，

relationshipList： "Company"

即当From Country这个父列的值改变时，到”Company“列表中读取数据。根据Company表中的数据，我们需要将Lenovo和Huawei取出来，如何读取由relationshipListParentColumn和relationshipListChildColumn这两个参数来指定：

relationshipListParentColumn: "Country_x0200_Name",relationshipListChildColumn: "Title"

relationshipListParentColumn的值是列的internalname，这里是“Country_x0200_Name"，也就是Company表中的“Country Name”列，这一列的值对应From Country列中的值，也就是China，这两个参数指定SPServices选择Country Name是China的所有Company。

第二部分代码是：

$().SPServices.SPCascadeDropdowns({    relationshipList: "Product",    relationshipListParentColumn: "Company_x0020_Name",    relationshipListChildColumn: "Title",    relationshipListSortColumn: "ID",    parentColumn: "From Company",    childColumn: "Product"  });

这段代码建立了From Company和Product列的级联关系。与第一段代码是类似的，这里就不再解释了。

修改完毕之后到Information列表中添加一个item，可以看到，当我选择China的时候，From Company列只列出了中国的公司；当我选择Lenovo的时候，Product下拉菜单中只有Thinkpad和Yoga：

SPCascadedDropDowns方法还提供了其他的参数，使级联的功能更加强大，例如可以排序，跨站点级联，还可以使用CAML查询，还支持支持多值和回调等等，以下是SPCascadedDropDowns的语法，详细介绍请查看官方文档：点击打开链接

$().SPServices.SPCascadeDropdowns({  relationshipWebURL: "",  relationshipList: "",  relationshipListParentColumn: "",  relationshipListChildColumn: "",  relationshipListSortColumn: "",  parentColumn: "",  childColumn: "",  CAMLQuery: "",  CAMLQueryOptions: "<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>", // Added in 2013.01  listName: $().SPServices.SPListNameFromUrl(),   promptText: "",  simpleChild: false,// Added in v0.6.2  selectSingleOption: false,// Added in v0.6.2  matchOnId: false,// Added in v0.7.1  completefunc: null,  debug: false});