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 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
优质内容筛选与推荐>>
1、【emWin】例程十五：触摸校准实例——五点校准法
2、UVA10474 Where is the Marble?【排序】
3、面向学生的美国国家教育技术标准（第二版）
4、欧拉函数简介
5、地籍信息系统介绍-转载