在JavaScript中实现类似Java中List<Map>类型的数组

 在JavaScript中实现类似Java中List<Map>类型的数组，可以忠实的反映数据库表中的记录。利用JavaScript数组的属性、方法，可以非常方便的进行顺序、倒序、筛选等操作，在这种数据结构上，还可以实现分页、实现树形结构等操作。可以说在富客户端开发上有着广泛的用途。

一、创建List<Map>类型的数组

以下是用于创建树形菜单的数组

var menu_v=new Array();
var m=null;
m=new Map();
m.put('id', '0');
m.put('sortnum', '0');
m.put('label', 'root');
m.put('pagename', null);
m.put('parent_id', null);
menu_v.push(m);
m=new Map();
m.put('id', '1319786083515');
m.put('sortnum', '1');
m.put('label', '首页');
m.put('pagename', 'index.html');
m.put('parent_id', '0');
menu_v.push(m);
m=new Map();
m.put('id', '1319786879328');
m.put('sortnum', '2');
m.put('label', '资讯');
m.put('pagename', 'news.html');
m.put('parent_id', '0');
menu_v.push(m);

二、范例示意图

三、实现树形菜单

1、html代码

<div class='menuout'><div style='margin:0px auto;width:960px;position:relative;'><div class='menu' style='width:960px;'> <ul id='qyMenu'></ul></div></div></div>

 

  2、js代码

/**
* 菜单管理
* 胡开明
* 2010-8-1
**/

//以下是菜单管理 开始
//jscode_m.put('showdaohang',false);
function menuObject(){
    this.record={
        id:null,
        ref_id:null,
        parent_id:null,
        root_id:null,
        //qyid:null,
        label:null,
        pagename:null,
        groupid:null,
        colorset:null,
        jscode:null,
        xml:null,
        result:null
    };
    return this;
}
var menu = menuObject();

function siteMenu(){
    var s = "";
    var root = pvo.getOneRecord(menu_v, "label", "root");
    menu.record.root_id=root.get("id");
    var v = pvo.getSomeRecord(menu_v, "parent_id", root.get("id"));
    s=s+qySubPageMenu(menu_v, v, page_cs.activeMenu);
    if(document.getElementById("qyMenu")){
        document.getElementById("qyMenu").innerHTML=s;
    }
}

function qySubPageMenu(menu_v, sub_v,activeID) {
    var s = "";
    var active="";
    for (var i = 0; i < sub_v.length; i++) {
        var m = sub_v[i];
        var parent_id=m.get("parent_id");
        var menu_id = m.get("id");
        if(parent_id==menu.record.root_id){
            if(menu_id==activeID){
                active=" class='topmenu active' ";
            }else{
                active=" class='topmenu' ";
            }
            if(m.get("label")=="首页"){
                active=active+" style='margin-left:10px;'";
            }
        }else{
            active=" class='submenu' ";
        }
        var v = pvo.getSomeRecord(menu_v, "parent_id", menu_id);
        if (v.length > 0) {
            s = s + "<li"+active+"><a href='" + pvo.getRoot()+"/"+ m.get("pagename") + "'>" + m.get("label") + "<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul>" + qySubPageMenu(menu_v, v, activeID) + "</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>";
        } else {
            s = s + "<li"+active+"><a href='" + pvo.getRoot()+"/"+ m.get("pagename") + "'>" + m.get("label") + "</a></li>";
        }
        if((parent_id==menu.record.root_id)&&(i==(sub_v.length-1))){
            if(page_cs.showdaohang){
                s = s + "<li style='float:right;padding-right:10px;position: relative;' id='qyGuideLI'><a href=javascript:;>网站导航</a><div id='qyGuideDIV' style='display:none;position: absolute;right:0px;top:32px;background:#333333;width:960px;height:auto;text-align:left;'></div></li>";
            }
        }
    }
    return s;
}

 

下一篇将介绍在Java中将数据库查询结果保存为JavaScript数组文件

注：具体效果可参阅http://www.qicity.cn