参考了几篇博客做的：
新增websource文件(html):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>注释</title> 5 <style type="text/css"> 6 table { 7 border:1px solid #666666; 8 border-collapse:collapse; 9 } 10 table thead th { 11 padding: 8px; 12 border:1px solid #666666; 13 background-color: #dedede; 14 } 15 16 table tbody td { 17 border: 1px solid #666666; 18 padding: 8px; 19 background-color: #ffffff; 20 } 21 22 table thead tr th { 23 font-family:Microsoft YaHei,SimSun,Tahoma,Arial; 24 font-size:12px; 25 font-weight:bold; 26 color:#000000; 27 } 28 29 table tbody tr td { 30 color:#444444; 31 font-family:Microsoft YaHei,SimSun,Tahoma,Arial; 32 font-size:12px; 33 } 34 35 .align_right 36 { 37 text-align: right; 38 } 39 40 </style> 41 <script type="text/javascript" src="../../_static/_common/scripts/jquery1.7.2.min.js"></script> 42 <script type="text/javascript" src="../../_static/_common/scripts/XrmServiceToolkit.min.js"></script> 43 <script type="text/javascript"> 44 45 Date.prototype.format = function (fmt) { 46 var o = { 47 "M+": this.getMonth() + 1,//月份 48 "d+": this.getDate(),//日 49 "h+": this.getHours(),//小时 50 "m+": this.getMinutes(),//分 51 "s+": this.getSeconds()//秒 52 }; 53 if (/(y+)/.test(fmt)) 54 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 55 for (var k in o) 56 if (new RegExp("(" + k + ")").test(fmt)) 57 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? 58 (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 59 return fmt; 60 } 61 62 63 64 function ShowAttachmentByNoteId(NoteId) { 65 XrmServiceToolkit.Rest.Retrieve( 66 NoteId, 67 "AnnotationSet", 68 "DocumentBody,MimeType", 69 null, 70 function (result) { 71 var DocumentBody = result.DocumentBody; 72 var MimeType = result.MimeType; 73 if (MimeType.indexOf("image") > -1) { 74 75 76 //new method 77 initblock(DocumentBody,MimeType); 78 } 79 else { 80 alert('附件不是图片，目前无法提供查看！'); 81 } 82 }, 83 function (error) { 84 alert(error.message); 85 }, 86 true 87 ); 88 } 89 90 function initblock(DocumentBody,MimeType) 91 { 92 if($("#overlay").length > 0) { 93 $("#overlay").empty(); 94 } 95 96 if($("#dialogImg").length > 0) { 97 $("#dialogImg").empty(); 98 } 99 100 var div = parent.document.createElement("div"); 101 div.id = "overlay"; 102 div.style.position="fixed"; 103 div.style.top="0"; 104 div.style.right="0"; 105 div.style.bottom="0"; 106 107 div.style.left="0"; 108 109 div.style.height="100%"; 110 div.style.width="100%"; 111 div.style.margin="0"; 112 div.style.padding="0"; 113 div.style.background=" #000000"; 114 div.style.opacity=".15"; 115 div.style.filter=" alpha(opacity=15)"; 116 div.style.display="none"; 117 parent.document.body.appendChild(div); 118 119 var divImg =parent.document.createElement("div"); 120 divImg.id = "dialogImg"; 121 divImg.style.display="none"; 122 divImg.style.position="fixed"; 123 divImg.style.width="250px"; 124 divImg.style.height="280px"; 125 divImg.style.top="20%"; 126 divImg.style.left="20%"; 127 divImg.style.right="20%"; 128 divImg.style.bottom="20%"; 129 divImg.style.marginLeft="-190px"; 130 divImg.style.marginTop="-100px"; 131 divImg.style.backgroundColor="#ffffff"; 132 divImg.style.border="0px"; 133 divImg.style.borderStyle="solid"; 134 divImg.style.fontFamily="Verdana"; 135 divImg.style.fontSize="10pt"; 136 divImg.style.padding="0"; 137 divImg.style.zIndex="102"; 138 139 var table = parent.document.createElement("table"); 140 table.style.width = "100%"; 141 table.style.border = "0"; 142 table.cellPadding = "2"; 143 table.cellSpacing = "0"; 144 var tr1 = parent.document.createElement("tr"); 145 var td1 = parent.document.createElement("td"); 146 td1.style.borderBottom="solid"; 147 td1.style.border="0px"; 148 td1.style.borderColor="#2a1d54"; 149 td1.style.backgroundColor="#2a1d54"; 150 td1.style.padding="4px"; 151 td1.style.color="White"; 152 td1.style.fontWeight="bold"; 153 td1.innerText = "照片预览"; 154 var td11 = parent.document.createElement("td"); 155 td11.style.textAlign = "right" 156 td11.style.borderBottom = "solid"; 157 td11.style.border = "1px"; 158 td11.style.borderColor = "#2a1d54"; 159 td11.style.backgroundColor = "#2a1d54"; 160 td11.style.padding = "4px"; 161 var a1 = parent.document.createElement("a"); 162 a1.style.color = "White"; 163 a1.style.fontWeight = "bold"; 164 a1.innerText = "关闭"; 165 a1.id = "btnCloseImg"; 166 a1.href = "#"; 167 a1.onclick = function (e) { 168 debugger; 169 $("#overlay",parent.document).hide(); 170 $("#dialogImg",parent.document).fadeOut(300); 171 e.preventDefault(); 172 } 173 td11.appendChild(a1); 174 tr1.appendChild(td1); 175 tr1.appendChild(td11); 176 var tr2 = parent.document.createElement("tr"); 177 var td2 = parent.document.createElement("td"); 178 td2.colSpan = "2"; 179 180 var img = parent.document.createElement("img"); 181 img.id = "img1"; 182 td2.appendChild(img); 183 tr2.appendChild(td2); 184 table.appendChild(tr1); 185 table.appendChild(tr2); 186 divImg.appendChild(table); 187 parent.document.body.appendChild(divImg); 188 189 190 191 $("#overlay",parent.document).show(); 192 $("#dialogImg",parent.document).fadeIn(300); 193 $("#img1",parent.document).attr("alt", "Embedded Image"); 194 $("#img1",parent.document).attr("src", "data:" + MimeType + ";base64," + DocumentBody); 195 $("#overlay",parent.document).unbind("click"); 196 //e.preventDefault(); 197 198 199 dragPanelMove(); 200 } 201 202 203 204 function dragPanelMove(){ 205 var dialogImg = $("#dialogImg",parent.document); 206 dialogImg.mousedown(function(e){ 207 //设置移动后的默认位置 208 var endx=0; 209 var endy=0; 210 211 //获取div的初始位置，要注意的是需要转整型，因为获取到值带px 212 var left= parseInt(dialogImg.css("left")); 213 var top = parseInt(dialogImg.css("top")); 214 215 //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY 216 var downx=e.pageX; 217 var downy=e.pageY; //pageY的y要大写，必须大写！！ 218 219 // 鼠标按下时给div挂事件 220 dialogImg.bind("mousemove",function(es){ 221 222 //es.pageX,es.pageY:获取鼠标移动后的坐标 223 var endx= es.pageX-downx+left; //计算div的最终位置 224 var endy=es.pageY-downy+top; 225 226 //带上单位 227 dialogImg.css("left",endx+"px").css("top",endy+"px") 228 }); 229 }) 230 231 232 dialogImg.mouseup(function(){ 233 //鼠标弹起时给div取消事件 234 dialogImg.unbind("mousemove") 235 }) 236 237 } 238 239 240 241 $(function () { 242 243 var id = window.parent.Xrm.Page.data.entity.getId(); //这种方法可以获取表单中的很多信息,包括id 244 245 XrmServiceToolkit.Rest.RetrieveMultiple( 246 "AnnotationSet", "?$select=AnnotationId,Subject,NoteText,MimeType,FileName,FileSize,IsDocument,CreatedOn,CreatedBy,ModifiedOn,ModifiedBy&$filter=ObjectId/Id eq guid'" + id + "'&$orderby=CreatedOn asc", 247 function (results) { 248 for (var i = 0; i < results.length; i++) { 249 var tr = $("<tr></tr>"); 250 tr.appendTo($("#notestable tbody")); 251 var td = $("<td>" + (i+1) + "</td>"); 252 td.appendTo(tr); 253 td = $("<td>" + (results[i].Subject == null ? "" : results[i].Subject) + "</td>"); 254 td.appendTo(tr); 255 256 257 td = $("<td>" + results[i].CreatedBy.Name + "</td>"); 258 td.appendTo(tr); 259 td = $("<td>" + results[i].CreatedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>"); 260 td.appendTo(tr); 261 td = $("<td>" + results[i].ModifiedBy.Name + "</td>"); 262 td.appendTo(tr); 263 td = $("<td>" + results[i].ModifiedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>"); 264 td.appendTo(tr); 265 td = $("<td>" + (results[i].IsDocument ? "是" : "否") + "</td>"); 266 td.appendTo(tr); 267 td = $("<td>" + (results[i].FileName == null ? "" : ("<a href='#' data-annotationid='" + results[i].AnnotationId + "'>" + results[i].FileName + "</a>") + "</td>")); 268 td.find("a").click(function() { 269 ShowAttachmentByNoteId($(this).attr("data-annotationid")); 270 }); 271 td.appendTo(tr); 272 td = $("<td>" + (results[i].FileSize == null ? "" : Math.round((results[i].FileSize)/1024)) + "</td>"); 273 td.appendTo(tr); 274 } 275 }, 276 function (error) { 277 alert(error.message); 278 }, 279 function () { 280 }, 281 true 282 ); 283 $("#dialogclosebtn").click(function (e) { 284 HideDialog(); 285 e.preventDefault(); 286 }); 287 }); 288 </script> 289 </head> 290 <body> 291 <table id="notestable"> 292 <thead> 293 <tr> 294 <th>序号</th> 295 <th>注释标题</th> 296 <th>创建人</th> 297 <th>创建时间</th> 298 <th>修改人</th> 299 <th>修改时间</th> 300 <th>是否包含附件</th> 301 <th>附件名称</th> 302 <th>附件大小(KB)</th> 303 </tr> 304 </thead> 305 <tbody> 306 </tbody> 307 </table> 308 309 </body> 310 </html>