SharePoint 2013 弹窗效果之本地HTML打开方式(二)

　　上一篇我们主要讲述如何通过showModalDialog方法进行弹出窗体，同时弹出信息定义在新的页面(Application Page)，使用

SP.UI.$create_DialogOptions()里的url属性进行定义，在该文章中我们将介绍如何自定义弹出框中的信息（通过HTML)。

　　什么时候使用SP.UI.$create_DialogOptions()里的html属性，主编建议在以下两种情况下可以使用，如果有朋友觉得还有更好的办法，您也可以提出您宝贵的意见供大家学习及参考。第一种：当在页面中需要传递大量数据到弹出页面时，因为url有最大长度限制，第二种：详细页面里的数据简单，你也可以使用该方法。

　　接下来我们将讲解如何使用SP.UI.ModalDialog类提供了对话框框架的定义（html属性）。

Steps:

首先我们需要定义弹出框里的信息样式，这里主编放一个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 >' +
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