List<Map>类型的JavaScript数组应用范例：资讯列表多样化显示

将资讯类查询结果保存为List<Map>类型的数组，可以大大方便数据在网页中的表现，比如根据需要取舍标题的长度、格式化日期、显示记录的数量，让数据可以得到充分的共享，可以减少访问服务器的次数，好处是显而易见的。

以下是一组相同的数据在网页的的不同表现效果

 

一、资讯数组

var news_v=new Array();
var m=null;
m=new Map();
m.put('id', '23');
m.put('title', '发布管理');
m.put('isshow', false);
m.put('columnsid', '社区服务');
m.put('uptime', '2011-10-19 16:43:15.0');
m.put('isreply', false);
news_v.push(m);
m=new Map();
m.put('id', '22');
m.put('title', '产品管理');
m.put('isshow', false);
m.put('columnsid', '社区服务');
m.put('uptime', '2011-10-19 16:15:25.0');
m.put('isreply', false);
news_v.push(m);

...

 

二、资讯数组多样化效果

效果1：

 

实现方法（示例代码）：

 

var loadLan=function(uid,m){

    var langs="D";//PTD|TD|T 列表的类容样式，PTD代表输出分类、标题、日期，TD代表输出标题、日期，T代表只输出标题
 
    var rows=8;//行数
    var width=270;//容器宽度
    var perline=1;//每行列数
    var sort=1;//0、1表示排序
    var size=rows*perline;
    var list=pvo.getSomeRecord(news_v, "columnsid", m.get("fl"));
    var html="";
    if(list.length>0){
        if(size>list.length)size=list.length;
        if(sort==1){
            list.reverse();
        }
        for(var a=0;a<size;a=a+perline){
            html=html+"<tr>"
            for(var b=a;b<a+perline;b++){
                var x=size%perline;
                if((a+x)<=size)m=list[b];
                var id="";
                var title="";
                var t="";
                if(m!=null){
                    id=m.get("id");
                    id=parseInt(id);
                    title=partStr(m.get("title"),14);

                    var d1=list[b].get("uptime");
                    t=pvo.parseDate(d1);
                    t=pvo.formatDate(t, "MM月dd日");

                    if(langs=="T"){
                        title=partStr(m.get("title"),parseInt((width-30)/14-1));
                        html=html+"<td class='T'><span><a href='javascript:loadColumns("+id+")'>"+title+"</a></span></td>";
                    }
                    if(langs=="TD"){
                        title=partStr(m.get("title"),parseInt((width-110)/14-1));
                        html=html+"<td class='T' style='width:"+(width-80)+"px'><span><a href='javascript:loadColumns("+id+")'>"+title+"</a></span></td><td class='D' style='width:80px'><span>"+t+"</span></td>";
                    }
                    //...
                }
            }
            html=html+"</tr>";
        }
    }else{
        html="<tr><td class='T'>暂无记录</td></tr>"
    }
    document.getElementById(uid).innerHTML="<table cellpadding='0' cellspacing='0' border='0px' width='100%'>"+html+"</table>";
}

 

 

 

 

效果2：

 

 

效果3：

 

下一篇将介绍List<Map>类型的JavaScript数组应用范例：图片多样化显示