上一篇我们主要讲述如何通过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

 

  

posted on 2014-11-04 15:32  琴韵之弦  阅读(907)  评论(0编辑  收藏  举报