参考了几篇博客做的：
新增websource文件(html):
<!DOCTYPE html> <html> <head> <title>注释</title> <style type="text/css"> table { border:1px solid #666666; border-collapse:collapse; } table thead th { padding: 8px; border:1px solid #666666; background-color: #dedede; } table tbody td { border: 1px solid #666666; padding: 8px; background-color: #ffffff; } table thead tr th { font-family:Microsoft YaHei,SimSun,Tahoma,Arial; font-size:12px; font-weight:bold; color:#000000; } table tbody tr td { color:#444444; font-family:Microsoft YaHei,SimSun,Tahoma,Arial; font-size:12px; } .align_right { text-align: right; } </style> <script type="text/javascript" src="../../_static/_common/scripts/jquery1.7.2.min.js"></script> <script type="text/javascript" src="../../_static/_common/scripts/XrmServiceToolkit.min.js"></script>
//路径很重要，必须确定自己websource所在的位置，然后根据路径写js路径，要不然加载不了。 <script type="text/javascript"> Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1,//月份 "d+": this.getDate(),//日 "h+": this.getHours(),//小时 "m+": this.getMinutes(),//分 "s+": this.getSeconds()//秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } function ShowAttachmentByNoteId(NoteId) { XrmServiceToolkit.Rest.Retrieve( NoteId, "AnnotationSet", "DocumentBody,MimeType", null, function (result) { var DocumentBody = result.DocumentBody; var MimeType = result.MimeType; if (MimeType.indexOf("image") > -1) { //new method initblock(DocumentBody,MimeType); } else { alert('附件不是图片，目前无法提供查看！'); } }, function (error) { alert(error.message); }, true ); } function initblock(DocumentBody,MimeType) { if($("#overlay").length > 0) { $("#overlay").empty(); } if($("#dialogImg").length > 0) { $("#dialogImg").empty(); } var div = parent.document.createElement("div"); div.id = "overlay"; div.style.position="fixed"; div.style.top="0"; div.style.right="0"; div.style.bottom="0"; div.style.left="0"; div.style.height="100%"; div.style.width="100%"; div.style.margin="0"; div.style.padding="0"; div.style.background=" #000000"; div.style.opacity=".15"; div.style.filter=" alpha(opacity=15)"; div.style.display="none"; parent.document.body.appendChild(div); var divImg =parent.document.createElement("div"); divImg.id = "dialogImg"; divImg.style.display="none"; divImg.style.position="fixed"; divImg.style.width="250px"; divImg.style.height="280px"; divImg.style.top="20%"; divImg.style.left="20%"; divImg.style.right="20%"; divImg.style.bottom="20%"; divImg.style.marginLeft="-190px"; divImg.style.marginTop="-100px"; divImg.style.backgroundColor="#ffffff"; divImg.style.border="2px"; divImg.style.borderStyle="solid"; divImg.style.fontFamily="Verdana"; divImg.style.fontSize="10pt"; divImg.style.padding="0"; divImg.style.zIndex="102"; var table = parent.document.createElement("table"); table.style.width = "100%"; table.style.border = "0"; table.cellPadding = "2"; table.cellSpacing = "0"; var tr1 = parent.document.createElement("tr"); var td1 = parent.document.createElement("td"); td1.style.borderBottom="solid"; td1.style.border="1px"; td1.style.borderColor="#2a1d54"; td1.style.backgroundColor="#2a1d54"; td1.style.padding="4px"; td1.style.color="White"; td1.style.fontWeight="bold"; td1.innerText = "照片预览"; var td11 = parent.document.createElement("td"); td11.style.textAlign = "right" td11.style.borderBottom = "solid"; td11.style.border = "1px"; td11.style.borderColor = "#2a1d54"; td11.style.backgroundColor = "#2a1d54"; td11.style.padding = "4px"; var a1 = parent.document.createElement("a"); a1.style.color = "White"; a1.style.fontWeight = "bold"; a1.innerText = "关闭"; a1.id = "btnCloseImg"; a1.href = "#"; a1.onclick = function (e) { debugger; $("#overlay",parent.document).hide(); $("#dialogImg",parent.document).fadeOut(300); e.preventDefault(); } td11.appendChild(a1); tr1.appendChild(td1); tr1.appendChild(td11); var tr2 = parent.document.createElement("tr"); var td2 = parent.document.createElement("td"); td2.colSpan = "2"; var img = parent.document.createElement("img"); img.id = "img1"; td2.appendChild(img); tr2.appendChild(td2); table.appendChild(tr1); table.appendChild(tr2); divImg.appendChild(table); parent.document.body.appendChild(divImg); $("#overlay",parent.document).show(); $("#dialogImg",parent.document).fadeIn(300); $("#img1",parent.document).attr("alt", "Embedded Image"); $("#img1",parent.document).attr("src", "data:" + MimeType + ";base64," + DocumentBody); $("#overlay",parent.document).unbind("click"); //e.preventDefault(); dragPanelMove(); } function dragPanelMove(){ var dialogImg = $("#dialogImg",parent.document); dialogImg.mousedown(function(e){ //设置移动后的默认位置 var endx=0; var endy=0; //获取div的初始位置，要注意的是需要转整型，因为获取到值带px var left= parseInt(dialogImg.css("left")); var top = parseInt(dialogImg.css("top")); //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY var downx=e.pageX; var downy=e.pageY; //pageY的y要大写，必须大写！！ // 鼠标按下时给div挂事件 dialogImg.bind("mousemove",function(es){ //es.pageX,es.pageY:获取鼠标移动后的坐标 var endx= es.pageX-downx+left; //计算div的最终位置 var endy=es.pageY-downy+top; //带上单位 dialogImg.css("left",endx+"px").css("top",endy+"px") }); }) dialogImg.mouseup(function(){ //鼠标弹起时给div取消事件 dialogImg.unbind("mousemove") }) } $(function () { var id = window.parent.Xrm.Page.data.entity.getId(); //这种方法可以获取表单中的很多信息,包括id XrmServiceToolkit.Rest.RetrieveMultiple( "AnnotationSet", "?$select=AnnotationId,Subject,NoteText,MimeType,FileName,FileSize,IsDocument,CreatedOn,CreatedBy,ModifiedOn,ModifiedBy&$filter=ObjectId/Id eq guid'" + id + "'&$orderby=CreatedOn asc", function (results) { for (var i = 0; i < results.length; i++) { var tr = $("<tr></tr>"); tr.appendTo($("#notestable tbody")); var td = $("<td>" + (i+1) + "</td>"); td.appendTo(tr); td = $("<td>" + (results[i].Subject == null ? "" : results[i].Subject) + "</td>"); td.appendTo(tr); td = $("<td>" + results[i].CreatedBy.Name + "</td>"); td.appendTo(tr); td = $("<td>" + results[i].CreatedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>"); td.appendTo(tr); td = $("<td>" + results[i].ModifiedBy.Name + "</td>"); td.appendTo(tr); td = $("<td>" + results[i].ModifiedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>"); td.appendTo(tr); td = $("<td>" + (results[i].IsDocument ? "是" : "否") + "</td>"); td.appendTo(tr); td = $("<td>" + (results[i].FileName == null ? "" : ("<a href='#' data-annotationid='" + results[i].AnnotationId + "'>" + results[i].FileName + "</a>") + "</td>")); td.find("a").click(function() { ShowAttachmentByNoteId($(this).attr("data-annotationid")); }); td.appendTo(tr); td = $("<td>" + (results[i].FileSize == null ? "" : Math.round((results[i].FileSize)/1024)) + "</td>"); td.appendTo(tr); } }, function (error) { alert(error.message); }, function () { }, true ); $("#dialogclosebtn").click(function (e) { HideDialog(); e.preventDefault(); }); }); </script> </head> <body> <table id="notestable"> <thead> <tr> <th>序号</th> <th>注释标题</th> <th>创建人</th> <th>创建时间</th> <th>修改人</th> <th>修改时间</th> <th>是否包含附件</th> <th>附件名称</th> <th>附件大小(KB)</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>