JSON实现桌面可移动的小便签

  大多数的管理系统都会有个主程序的桌面，而且上面放置了一个常用的快捷方式或便捷的信息，比如邮件，通知，即丰富了系统内容又能够使用户在第一时间内浏览的信息。

    跟XML相比，JSON的优势在于格式简洁短小，生成后的数据大小改变不大，且易于处理。特别是在处理大量复杂数据的时候，这个优势便显得非常突出。从各浏览器的支持来看，XML需要DOM来解析，而不同浏览器厂商的支持的XMLDOM又有所不同，这给WEB开发者或多或少带来不少困难，特别是在AJAX被大家普遍使用来后，不少开发者都不是返回XML，而是返回HTML片断或是其他格式的系列化串，除非产品仅限使用IE时在必要的时候才会使用XML来传输。JSON则没有这方面的问题，它不需要另外的解释器，得到了大多数语言和浏览器的支持，应用非常广泛。这些使得JSON在WEB开发中拥有巨大的优势。Digg，Yahoo等等大型网站便是采用JSON来进行数据传输的。<摘自于百科知识>

  首先建立一个....ashx后缀的文件，ashx 文件用于写web handler的，这个文件类似于.aspx文件，可以通过它来调用HttpHandler类，从而免去了普通.aspx页面的控件解析以及页面处理的过程，我们就建立一个GetOAJournal.ashx 的文件，处理工作简报信息。一般处理程序包含了ProcessRequest()方法，

IList < FDA.OA.Model.OAInformation > list = bll.GetOAInformationByWhere(strWhere);

StringBuilder sb = new StringBuilder();
sb.Append( " [ " );
for ( int i = 0 ; i < list.Count; i ++ )
{
if (i > 0 )
sb.Append( " , " );
string ProcessUrl = string .Format( " ../OA/OAInformation/OAJournalView.aspx?OAPubId={0}&PvId={1} " , list[i].OAPubId, list[i].OAPubTypeId);
sb.AppendFormat( " {{\"Title\":\"{1}\",\"CreateDate\":\"{3}\",\"ProcessUrl\":\"{4}\"}} " , list[i].OAPubId, StringUtil.PadRight( " [ " + list[i].OAPubTypeName + " ] " + list[i].Title.Replace( " ' " , " “ " ), 25 ), list[i].Publisher.Trim(), ParameterFilter.GetDate(list[i].CreateDate, " MM-dd " ), ProcessUrl, DateTime.Now.AddDays( - 7 ) > Convert.ToDateTime(list[i].CreateDate) ? "" : " true " );

}
sb.Append( " ] " );
context.Response.ContentType = " text/json " ;
context.Response.Write(sb.ToString());

 写好了一般处理程序后，我们开始写JS了，新建立一个desktopBox.js文件，这个文件包含了所有的桌面选项，如果以后加其他的内容，都可以在这里进行拓展，

function LoadOAJournalBox(fdaId,pvId,NoticeInformationContainer, NoticeInformationLoadTooltip){
$.getJSON( " ../OA/Desktop/GetOAJournal.ashx?f= " + fdaId + " &p= " + pvId ,function(json){
// 获取显示内容
var ul = document.getElementById(NoticeInformationContainer);
var div = document.getElementById(NoticeInformationLoadTooltip);

if (json.length == 0 ){
desktopBox.setOAJournal(ul,json);
div.style.display = " none " ;
}
});
}

desktopBox.setOAJournal = function(ulContainer, json){
var li, a, span,img, em;
for (var i = 0 ; i < json.length; i ++ ) {
li = document.createElement( " li " );

// 增加链接
a = document.createElement( " a " );
a.className = ' leftpadding ' ;
a.setAttribute( " href " , json[i].ProcessUrl);
// 添加属性，通知预览重新打开窗口
a.setAttribute( " target " , ' _blank ' );

a.title = json[i].Title + " \n发布时间： " + json[i].CreateDate;
this .setInnerText(a, json[i].Title);
li.appendChild(a);

// 增加span
span = document.createElement( " span " );
span.className = ' rightpadding ' ;
this .setInnerText(span, " （ " + json[i].CreateDate + " ） " );
li.appendChild(span);



ulContainer.appendChild(li);
}

};

 

 

 相关的处理程序都写好以后，开始调用这个方法来展示数据了，由于页面上可能存在许多的可配置信息框，所有在次展现页面使用用户控件，

前台:

转载于:https://www.cnblogs.com/gaowenbin/articles/1986458.html