Java前台模拟后台数据

今天分享的是Java前台模拟后台数据。适用场景也就是当前台开发时候，如果遇到调用后台的数据还没写好。我们可以用这个方法先模拟一些数据。
首先是按照我们所要的数据格式写一套数据。示例如下：

// JavaScript Document  DemoData
var demoData = {
    roleList: [
        { "role.name": "档案管理员", "role.description": "管理档案"},
        { "role.name": "系统管理员", "role.description": "管理系统"},
        { "role.name": "部门经理", "role.description": ""},
        { "role.name": "副总经理", "role.description": ""},
        { "role.name": "财务经理", "role.description": ""},
        { "role.name": "总经理", "role.description": ""}
    ],
    departmentList:[
        { "department.name": "总经理室", "department.parent.name": "", "department.description": ""},
        { "department.name": "市场部", "department.parent.name": "", "department.description": ""},
        { "department.name": "OA产品部", "department.parent.name": "", "department.description": ""},
        { "department.name": "售服部", "department.parent.name": "", "department.description": ""}
    ],
    departmentList2:[
        { "department.name": "研发部", "department.parent.name": "OA产品部", "department.description": ""},
        { "department.name": "市场部", "department.parent.name": "OA产品部", "department.description": ""},
        { "department.name": "售服部", "department.parent.name": "OA产品部", "department.description": ""}
    ],
    userList:[
        { "user.loginName": "zs", "user.name": "张三", "user.department": "研发部", "user.roles": "程序员", "user.description": "" },
        { "user.loginName": "ls", "user.name": "李四", "user.department": "研发部", "user.roles": "程序员", "user.description": "" },
        { "user.loginName": "ww", "user.name": "王五", "user.department": "测试部", "user.roles": "测试员", "user.description": "" }
    ], 
    menuList:[
        { "menu.name": "系统设置", "menu.prefix": "", "menu.icon": "FUNC20082.gif", "menu.url": "", "menu.description": "" },
            { "menu.name": "部门管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DepartmentAction.do", "menu.description": "" }
        { "menu.name": "审批流转", "menu.prefix": "", "menu.icon": "FUNC20057.gif", "menu.url": "", "menu.description": "" },
            { "menu.name": "起草申请", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentAction.do?method=list", "menu.description": "" },
            { "menu.name": "待我审批", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentAction.do?method=myTaskList", "menu.description": "" },
            { "menu.name": "表单模板管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/DocumentTemplateAction.do", "menu.description": "" },
            { "menu.name": "审批流程管理", "menu.prefix": "　　", "menu.icon": "menu_arrow_single.gif", "menu.url": "/ProcessAction.do", "menu.description": "" }
    ], 
    formTemplateList:[
        { "formTemplate.name": "请假申请单" },
        { "formTemplate.name": "工程款申请单" },
        { "formTemplate.name": "费用报销单" },
        { "formTemplate.name": "差旅费报销单" },
        { "formTemplate.name": "借支单" }
    ],
    messageList:[
        { "message.priority": "！", "message.title": "<b>您发送的※派车申请单-网络中心-管理员-0115被退文</b>", "message.sender": "系统", "message.recipient": "刘东风", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "", "message.title": "2010年公司年会举办活动征集", "message.sender": "系统", "message.recipient": "周顺利", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "！", "message.title": "销售部任务安排", "message.sender": "系统", "message.recipient": "王发财", "message.postTime": "2010-04-15 18:41" }
    ],
    messageList2:[
        { "message.priority": "", "message.title": "2010年公司年会举办活动征集", "message.sender": "系统", "message.recipient": "周顺利", "message.postTime": "2010-04-15 18:41" },
        { "message.priority": "！", "message.title": "销售部任务安排", "message.sender": "系统", "message.recipient": "王发财", "message.postTime": "2010-04-15 18:41" }
    ],
    processDefList:[
         { "processDef.id": 1, "processDef.name": "员工请假", "processDef.version": 2, "processDef.description": "" },
         { "processDef.id": 2, "processDef.name": "费用报销", "processDef.version": 3, "processDef.description": "" },
         { "processDef.id": 3, "processDef.name": "工作报告", "processDef.version": 1, "processDef.description": "" }
    ],
    documentTemplateList:[
         { "documentTemplate.id": 1, "documentTemplate.name": "员工请假单", "documentTemplate.processName": "员工请假流程", "documentTemplate.description": "" },

    ],
    systemMenuList: [
        { "systemMenu.id": 1, "systemMenu.namePrefix": "", "systemMenu.name": "系统管理", "systemMenu.parent.id": ""  },
            { "systemMenu.id": 11, "systemMenu.namePrefix": "　　", "systemMenu.name": "部门管理", "systemMenu.parent.id": "1"  },
            { "systemMenu.id": 12, "systemMenu.namePrefix": "　　", "systemMenu.name": "岗位管理", "systemMenu.parent.id": "1"  },

        { "systemMenu.id": 5, "systemMenu.namePrefix": "", "systemMenu.name": "审批流转", "systemMenu.parent.id": ""  }
    ],
    processNodeList: [
        { "processNode.ordinal": 2, "processNode.name": "部门经理审批", "processNode.type": "审批", "processNode.description": "" },

    ],
    formList: [
        { "form.id": 1, "form.title": "设备采购单_管理员_2010-05-01 ", "form.applicant.name": "管理员", "form.applyTime": "2010-05-01 09:30", "form.status": "审批中" },

    ],
    approveInfoList: [
        { "approveInfo.index": 2, "approveInfo.type": "审批", "approveInfo.approveTime": "2010-05-17 09:45", "approveInfo.approver": "李四", "approveInfo.approval": "同意", "approveInfo.comment": "" },
        { "approveInfo.index": 3, "approveInfo.type": "审批", "approveInfo.approveTime": "2010-05-17 09:45", "approveInfo.approver": "王五", "approveInfo.approval": "同意", "approveInfo.comment": "" },
    ],
    dirList:[
        { "dir.name": "安装手册", "dir.creationTime": "2010-5-24 09:56:33" },
        { "dir.name": "功能列表", "dir.creationTime": "2010-5-24 09:56:33" },
        { "dir.name": "OA方案", "dir.creationTime": "2010-5-24 09:56:33" }
    ],
    fileList:[
        { "file.name": "固定岗位.doc", "file.fileType.icon": "doc.gif", "file.size": "150B", "file.creationTime": "2010-5-24 09:56:33" },

    ],
    forumList: [
        { "forum.name": "JavaSE/JavaEE", "forum.lastTopic.postTime": "2010-06-12 17:47"  },
        { "forum.name": "新功能建议", "forum.description": "把好的想法、先进思想和理念都随时提出来，供产品修改时使用", "forum.topicCount": 56, "forum.articleCount": 107, "forum.lastTopic.title": "OA是什么？ ", "forum.lastTopic.author.name": "管理员", "forum.lastTopic.postTime": "2010-06-12 17:47"  },
        { "forum.name": "灌水专区", "forum.description": "大家可以尽情的来这里灌水", "forum.topicCount": 56, "forum.articleCount": 107, "forum.lastTopic.title": "OA是什么？ ", "forum.lastTopic.author.name": "管理员", "forum.lastTopic.postTime": "2010-06-12 17:47"  }
    ],
    topicList: [
        { "topic.type": "2", "topic.title": "项目管理", "topic.replyCount": 35 },
        { "topic.type": "0", "topic.title": "审批流转是干什么用的？ ", "topic.replyCount": 33 },
        { "topic.type": "1", "topic.title": "FAQ", "topic.replyCount": 75 },
        { "topic.type": "0","topic.title": "我的邮箱为什么不能正常使用？", "topic.replyCount": 998 },
        { "topic.type": "0","topic.title": "流程类别是干什么用的？", "topic.replyCount": 17 }
    ],
    replyList: [
        { "reply.title": "回复：新手发帖", "reply.content": "欢迎，欢迎，热烈欢迎！<img src='../script/fckeditor/editor/images/smiley/wangwang/15.gif'/>", "reply.floor": "1", "reply.faceIcon": "face2.gif" },
        { "reply.title": "回复：新手发帖", "reply.content": "路过...", "reply.floor": "2", "reply.faceIcon": "face5.gif" },
        { "reply.title": "回复：新手发帖", "reply.content": "<img src='../script/fckeditor/editor/images/smiley/wangwang/11.gif'/>", "reply.floor": "3", "reply.faceIcon": "face3.gif" }
    ],
    faceIcon1_7: [
        { "faceIconIndex" : "1" },
        { "faceIconIndex" : "2" },
        { "faceIconIndex" : "3" },
        { "faceIconIndex" : "4" },
    ],
    xxList: []
};

// list的最后一个元素后不要有逗号，否则在页面中显示数据时，会多出一行模板行。是因为没有数据内容造成的。
// （是使用替换的方式完成的显示数据，如果没有替换值，就不会替换，所以会多一个模板行）

我们将它写在一个js文件中。然后在写一个js能让页面加载的时候去调用这些数据。

/*************************************
 ***  在网页加载完成后加载演示数据
 *************************************/
 $(document).ready(function() {
    // 加载演示数据
    loadDemoData();
});

/************************************************************
 *** 相关方法
 ************************************************************/

/**
 * 加载演示数据，默认是放到 "[class=dataContainer]" 元素中
 * @param demoDataContainerExpression 存放演示数据的元素（容器）
 *                                   默认为 [class=dataContainer]
 * @param templateClass 显示一条数据的模板代码
 *                                   默认为template
 */
function loadDemoData(demoDataContainerExpression, templateClass) {
    // 存放演示数据的元素（容器）
    if(demoDataContainerExpression == null){
        demoDataContainerExpression = ".dataContainer";
    }

    if(templateClass == null){
        templateClass = "template";     
    }

    // 没有存放演示数据的容器时，就不需要后面的显示演示数据了
    var jDemoDataContainerArrays = $(demoDataContainerExpression);
    if (jDemoDataContainerArrays.size() == 0) {
         return;
    }

    // 显示演示数据（可能有多处要显示）
    jDemoDataContainerArrays.each(function(){
        var jDemoDataContainer = $(this);

        // 如果没有指定要显示的数据项，则提示
        var dataKey = jDemoDataContainer.attr("dataKey");
        if(dataKey == null || $.trim(dataKey).length == 0){
            alert("请指定要显示的数据项（指定 dataKey 属性为 DemoData.js 中的一项数据的名称）！");
            return;
        }

        // 
        var items = demoData[dataKey];
        if(items == null){
            alert("请指定正确的数据项（指定 dataKey 属性为 DemoData.js 中的一项数据的名称）！");
            return;
        }

        // 进行替换
        $.each(items, function(index) {
            // 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
            // 返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')
            return addDemoRecord(jDemoDataContainer, items[index], templateClass);
        });

         // 显示完演示数据后移除当前所用的模板行
        jDemoDataContainer.find("." + templateClass).remove(); 

    });
}

/**
 * 添加一条演示数据，演示的数据行的class为“demodata_record”
 * @param jDemoDataContainer
 * @param record
 * @param templateClass
 */
function addDemoRecord(jDemoDataContainer, record, templateClass) {
    // 找出模板行
    var jTemplateRecord = jDemoDataContainer.find("." + templateClass);
    if (jTemplateRecord.size() == 0) {
        alert("没有模板行，模板的class为：" + templateClass);
        return false;
    }

    // clone后的元素要removeClass，因为模板行（class=${tempateClass}）是不显示的
    var jNewRecord = jTemplateRecord.clone(true);
    jNewRecord.removeClass(templateClass);
    jNewRecord.addClass("demodata_record");
    var newRecord = jNewRecord[0].outerHTML;

    for (var key in record) {
        //TODO 要使用 '\\$' 表示字符 '$'，为什么不是 '\$'？
        var regex = new RegExp("\\$\{" + key + "\}","g");
        newRecord = newRecord.replace(regex,record[key]);
    }

    jDemoDataContainer.append(newRecord);
    return true;
}

/*********************************************************************************
 *** outterHTML 在FireFox里就不行了，因为outerHTML不是W3C的标准属性
 *** 网上找了下使用DOM原型扩展方法解决，代码如下：
 *********************************************************************************/
if (typeof(HTMLElement) != "undefined" && !window.opera)
{
    HTMLElement.prototype.__defineGetter__("outerHTML",function()
    {
        var a = this.attributes, str = "<" + this.tagName, i = 0;
        for (; i < a.length; i++)
            if (a[i].specified)
                str += " " + a[i].name + '="' + a[i].value + '"';
        if (!this.canHaveChildren)
            return str + " />";
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";
    });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
    {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(s);
        this.parentNode.replaceChild(df,this);
        return s;
    });
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
    {
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
    });
}

这样等前台调用数据的时候，我们直接在页面上引用两个js文件。然后像这样调用就可以了。