SharePoint 2013 pop-up window effect (2)

In the previous article, we mainly talked about how to use the showmodaldialog method to pop up a form. At the same time, the pop-up information is defined on the new page (Application page ).

The URL attribute in sp. UI. $ create_dialogoptions () is defined. In this article, we will introduce how to customize the information in the pop-up box (through HTML ).

When to use sp. UI. for the HTML attributes in $ create_dialogoptions (), the editor-in-chief recommends that you use them in the following two cases. If some friends think there is a better way, you can also give your valuable comments for your learning and reference. First, when a large amount of data needs to be transferred to the pop-up page in the page, because the URL has the maximum length limit, and second, the data in the detailed page is simple, you can also use this method.

Next we will explain how to use the sp. UI. modaldialog class to provide the definition of the dialog box framework (HTML attribute ).

Steps:

1. First, we need to define the information style in the pop-up box. Here, the editor puts a table to store data. The data in the table can be either in the format of Concatenated strings or JSON

• Splits the string and concatenates it into a table.

1 function openproductnamedialog (OBJ) {2 var listiteminfo = ''; 3 var gridhtml =''; 4 5 // split data information 6 var productslist = (obj. text + ""). split (','); 7 8 // place all data in the table in sequence 9 for (I = 0; I <productslist. length; I ++) {10 listiteminfo + = '<tr class = "MS-alternating MS-itmhover" setedgeborder = "true"> '+ 11' <TD class = ms-vb2>' + productslist [I] + '</TD> </tr> '; 12} 13 14 // define the table and splice 15 gridhtml = '<Table id = "typicalproductstable" class = MS-listviewtable border = 0 cellspacing = 0 summary = "operation history" cellpadding = 1 width = "100%"> '+ 16' <tbody> <tr class = "MS-viewheadertr MS-vhltr" valign = top>' + 17' <TH class = ms-vh2 Scope = Col nowrap> typical product (s) </Th> '+ listiteminfo. tostring () + 18' </tr> </tbody> </table> '; 19 20 21 var htmltitle = "<Div id = 'typicalproductdemotial '> </div>"; 22 $ ('body '). append (htmltitle); 23 24 $ ("# typicalproductdetial" ).html (gridhtml); 25}

View code

• Interpret data in JSON format and splice it into a table

1 // obtain the data to be displayed in the Sharepoint list. The data must be in JSON format and will not be explained here. 2 var queryresult = olistitem. get_item ('result'); 3 4 $ ("body "). append ("<Div id = 'result'> </div>"); 5 $ ("# result" ).html (queryresult ); // convert the data into HTML format 6 7 var relstring = $ ("# result "). find ("Div [class ^ = 'externalclass']"). text (); // get the data value 8 9 10 var resultlist = $. parsejson (relstring); // parse json11 12 // splice the data into the table 13 for (VAR I = 0; I <resultlist. length; I ++) {14 listiteminfo + = '<tr class = "MS-alternating MS-itmhovers" setedgeborder = "true">' + 15' <TD class = ms-vb2> '+ resultlist [I]. stdnum + '</TD>' + 16' <TD class = ms-vb2> '+ resultlist [I]. chinesename + '</TD>' + 17' <TD class = ms-vb2> '+ resultlist [I]. englishname + '</TD>' + 18' <TD class = ms-vb2 style = "word-wrap: Break-word; Word-break: Break-all; "> '+ resultlist [I]. producttype + '</TD> </tr> '; 19} 20 21 // define table22 gridhtml = '<Table id = "operationquerylogtable" class = MS-listviewtable border = 0 cellspacing = 0 summary = "operation history" cellpadding = 1 width = "100%"> '+ 23' <tbody> <tr class = "MS-viewheadertr MS-vhltr" valign = top>' + 24' <TH class = ms-vh2 scope = Col nowrap> STD/REG No. </Th> '+ 25' <TH class = ms-vh2 scope = Col nowrap> STD/REG title in Chinese </Th>' + 26' <TH class = ms-vh2 scope = col nowrap> STD/REG title in English </Th> '+ 27' <TH class = ms-vh2 scope = Col nowrap> impact on product type </Th> '+ listiteminfo. tostring () + 28' </tr> </tbody> </table> ';

View code

2. To use the dialog box framework, we need to first create the options for this dialog box:

1 var Options = sp. UI. $ create_dialogoptions (); 2 options. title = "typical product (s)"; // define the Title 3 options.html = document. getelementbyid ("typicalproductdetial"); // html4 options defined in step 1. showclose = true; // whether to display the close status 5 options. height = 500; // define the height of the Form 6 options. width = 500; // defines the width of the Form 7 8 sp. UI. modaldialog. showmodaldialog (options );

View code

 

　　

SharePoint 2013 pop-up window effect (2)