Introduction to Spservices: Cascading selection for a lookup item (linkage function)

Introduction to Spservices: Cascading selection for a lookup item (linkage function)Category: Spserivces2014-09-21 04:27 251 people read Comments (0) favorite reports SharePoint 2013 cascading spservices lookup Items linkage

The basic method of invoking a SharePoint Web service using Spservices is described in the previous article, Spservices, which uses the Spcascadedropdowns method to implement the Cascade selection function (linkage function) of the drop-down menu.

Suppose you need to implement a two-level cascade relationship with products such as company------------China---Lenovo Co. First of all, there are three tables, the national country, company companies and product products, respectively, as shown in the following structure.

Country list, title column is the name of country ;

Company List, where title is company's name, country name is a lookup column, lookup to the title of the country list:

Product list, where title is the product name, and company is the lookup to country's title,company name is the title of the lookup to company:

Create a table that needs to use cascading relationships, such as a company purchase list, to indicate which company in the country has purchased which product, the structure is:

This is true when the user adds an item:

When company's data is very large, it is very inconvenient.

Now implement country, company and product cascade relationships, such as when I choose China, the From companies drop-down menu only shows Chinese firms. When Lenovo is selected in the From company drop-down menu, the Product drop-down menu displays only Lenovo products.

This can only be done in two steps:

1. Introduction of jquery and Spservices in NewForm

Using SharePoint Designer to open the newform of the information list, add the following code to the Pleaceholder of "Placeholderadditionalpagehead":

[JavaScript]View Plaincopy

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

2. Then add the following code after it:

[JavaScript]View Plaincopy

2. <script type="Text/javascript" >
4. $ (document). Ready (function () {
6. $(). Spservices.spcascadedropdowns ({
8. Relationshiplist: "Company",
10. Relationshiplistparentcolumn: "Country_x0020_name",
12. Relationshiplistchildcolumn: "Title",
14. ParentColumn: "from country",
16. Childcolumn: "from company",
18. Debug: True
20. });
24. $(). Spservices.spcascadedropdowns ({
26. Relationshiplist: "Product",
28. Relationshiplistparentcolumn: "Company_x0020_name",
30. Relationshiplistchildcolumn: "Title",
32. Relationshiplistsortcolumn: "ID",
34. ParentColumn: "from company",
36. Childcolumn: "Product"
38. });
40. });
42. </script>

The code is divided into two parts, the first part of which is:

[JavaScript]View Plaincopy

2. $(). Spservices.spcascadedropdowns ({
4. Relationshiplist: "Company",
6. Relationshiplistparentcolumn: "Country_x0020_name",
8. Relationshiplistchildcolumn: "Title",
10. <span style="White-space:pre" > </span> relationshiplistsortcolumn: "ID",
12. ParentColumn: "from country",
14. Childcolumn: "from company",
16. Debug: True
18. });

This code establishes a cascade relationship from the from country and from the company column. The columns "from country" and "from company" that need to be cascaded in the information list are specified first through ParentColumn and Childcolumn.

[JavaScript]View Plaincopy

1. ParentColumn: "from country", <pre name="code" class="javascript" ><span style=" Font-family:arial, Helvetica, Sans-serif; >childcolumn: "from company" </span>

The parent column is from country, and the child column is from company, which means that when the value from country is changed, the value from the company is changed as well, which is called by spservices the SharePoint Web Service to implement. When the from country is changed, Spservices will take a value in the company list to populate from the Company drop-down menu. For example, assuming that we chose China in from country, then spservices needed to find all of the company in the company table, which was implemented by specifying the Relationshiplist parameter.

[JavaScript]View Plaincopy

1. Relationshiplist: "Company"

That is, when the value of the parent column from country changes, the data is read to the company list. Based on the data in the company table, we need to take Lenovo and Huawei out and how to read the two parameters named Relationshiplistparentcolumn and Relationshiplistchildcolumn:

[JavaScript]View Plaincopy

1. Relationshiplistparentcolumn: "Country_x0200_name",
2. Relationshiplistchildcolumn: "Title"

The value of Relationshiplistparentcolumn is the InternalName of the column, which is "Country_x0200_name", which is the "Country Name" column in the company table, and the value of this column corresponds to the From The value in the Country column, which is China, specifies that spservices Select Country name is all company of China.

The second part of the code is:

[JavaScript]View Plaincopy

2. $(). Spservices.spcascadedropdowns ({
4. Relationshiplist: "Product",
6. Relationshiplistparentcolumn: "Company_x0020_name",
8. Relationshiplistchildcolumn: "Title",
10. Relationshiplistsortcolumn: "ID",
12. ParentColumn: "from company",
14. Childcolumn: "Product"
16. });

This code establishes a cascade relationship from the company and product columns. Similar to the first piece of code, this is no longer explained here.

After the modification, add an item to the information list, and you can see that when I select China, the From company column lists only Chinese companies; When I choose Lenovo, The Product drop-down menu has only ThinkPad and yoga:

The Spcascadeddropdowns method also provides additional parameters that make cascading more powerful, such as sortable, cross-site cascading, CAML queries, support for multiple values and callbacks, and so on, and the following is the syntax of spcascadeddropdowns. For more information, please see the official documentation: Click to open the link

[JavaScript]View Plaincopy

2. $(). Spservices.spcascadedropdowns ({
4. Relationshipweburl: " ",
6. Relationshiplist: " ",
8. Relationshiplistparentcolumn: " ",
10. Relationshiplistchildcolumn: " ",
12. Relationshiplistsortcolumn: " ",
14. ParentColumn: " ",
16. Childcolumn: " ",
18. Camlquery: " ",
20. Camlqueryoptions: "<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns> </QueryOptions> ", //Added in 2013.01
22. ListName: $ (). Spservices.splistnamefromurl (),
24. PromptText: " ",
26. Simplechild: false, //Added in v0.6.2
28. Selectsingleoption: false, //Added in v0.6.2
30. Matchonid: false, //Added in v0.7.1
32. Completefunc: null,
34. Debug: false
36. });

Introduction to Spservices: Cascading selection for a lookup item (linkage function)