SharePoint 2013 彈窗效果之本地HTML打開方式(二)

　　上一篇咱們主要講述如何經過showModalDialog方法進行彈出窗體，同時彈出信息定義在新的頁面(Application Page)，使用

SP.UI.$create_DialogOptions()裏的url屬性進行定義，在該文章中咱們將介紹如何自定義彈出框中的信息（經過HTML)。

　　何時使用SP.UI.$create_DialogOptions()裏的html屬性，主編建議在如下兩種狀況下能夠使用，若是有朋友以爲還有更好的辦法，您也能夠提出您寶貴的意見供你們學習及參考。第一種：當在頁面中須要傳遞大量數據到彈出頁面時，由於url有最大長度限制， 第二種： 詳細頁面裏的數據簡單，你也能夠使用該方法。

　　接下來咱們將講解如何使用SP.UI.ModalDialog類提供了對話框框架的定義（html屬性）。

Steps:

1. 首先咱們須要定義彈出框裏的信息樣式，這裏主編放一個Table來存放數據，裏面的數據能夠經過拼接字符串的格式也能夠經過Json

• 拆分字符串並拼接到Table中

 1  function openProductNameDialog(obj) {
 2         var listItemInfo = '';
 3         var gridHtml = '';
 4         
 5         // 將數據信息拆分
 6         var productsList = (obj.text + "").split(',');
 7         
 8         // 將全部數據依次放在table中
 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         // 定義Table並拼接
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='typicalProductDetial'></div>";
22         $('body').append(htmlTitle);
23 
24         $("#typicalProductDetial").html(gridHtml);
25 }

View Code

• 經過Json解讀數據並拼接到Table中

 1 // 獲取SharePoint List中須要顯示的數據，該數據必須是Json格式，這裏不作任何講解
 2 var queryResult = oListItem.get_item('Result');
 3 
 4 $("body").append("<div id='result'></div>");
 5 $("#result").html(queryResult); //須要將該數據轉變成html的形式
 6 
 7 var relstring = $("#result").find("div[class^='ExternalClass']").text(); //獲取數據值
 8 
 9 
10 var resultList = $.parseJSON(relstring); // 解析json
11 
12 // 將數據拼接到Table中
13  for (var i = 0; i < resultList.length; i++) {
14             listItemInfo += '<TR class="ms-alternating ms-itmhover" 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 // 定義Table
22 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. 爲了使用對話框框架， 咱們須要先建立該對話框的選項：

1 var options = SP.UI.$create_DialogOptions();
2 options.title = "Typical Product(s)"; // 定義窗體上的標題
3 options.html = document.getElementById("typicalProductDetial"); // 在step1中定義的html
4 options.showClose = true; //是否顯示close狀態
5 options.height = 500; // 定義窗體的高度
6 options.width = 500; // 定義窗體的寬度
7 
8 SP.UI.ModalDialog.showModalDialog(options); 

View Code