easyUI 创建详情页dialog

使用easyui dialog先下载jQuery easyui 的压缩包  下载地址http://www.jeasyui.com/download/v155.php

解压后放在项目WebContent目录下

创建jsp文件引入easyui js和css文件

<script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/icon.css 

创建一个详情链接弹出dialog页面

<a href="javascript:detail(<%=s.getId() %>)" onclick="$('#detail').dialog('open')">详情</a>

onclick="$('#detail').dialog('open')" 弹出id=detail的div盒子

<div id="detail" class="easyui-dialog" title="详情页面" >
		<table border="1 solid" cellspacing="0" style="width:400px;height:200px;text-alig:center">
			<tr>
				<td><label>ID:</label></td><td id="ids"></td>
			</tr>
			<tr>
				<td><label>姓名:</label></td><td id="names"></td>
			</tr>
			<tr>
				<td><label>年龄:</label></td><td id="ages"></td>
			</tr>
			<tr>
				<td><label>性别:</label></td><td id="sexs"></td>
			</tr>
			<tr>
				<td><label>电话:</label></td><td id="tel"></td>
			</tr>
			<tr>
				<td><label>住址:</label></td><td id="address"></td>
			</tr>
			<tr>
				<td><label>密码:</label></td><td id="passds"></td>
			</tr>
		</table>
</div>

js文件设置弹出框的属性

$(function(){
     $("#detail").dialog({
            width:600,
            height:400,
            modal:true,
            closed:true,
            buttons:[
                {
                    text:"确定",
                    iconCls:'icon-ok',
                    handler:function(){
                        $("#detail").dialog("close")
                    }
                },
                {
                    text:"取消",
                    iconCls:'icon-ok',
                    handler:function(){
                        $("#detail").dialog("close")
                    }
                }
            ]
        })
    });

javascript:detail(<%=s.getId() %>)调用js函数请求 Servlet返回详情页数据

function detail(_id){
        debugger;
        $.ajax({
            type:"POST",
            url:"findByIdServlet",
            //dataType:"json",
            data:{id:_id},
            success:function(data){
                var objs = eval("("+data+")");
                document.getElementById("ids").innerHTML=objs.id;
                document.getElementById("names").innerHTML=objs.name;
                document.getElementById("ages").innerHTML=objs.age;
                document.getElementById("sexs").innerHTML=objs.sex;
                document.getElementById("tel").innerHTML=objs.tel;
                document.getElementById("address").innerHTML=objs.address;
                //document.getElementById("passds").innerHTML=objs.password;
                $("#passds").html(objs.password);
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert("返回数据失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(XMLHttpRequest.responseText);
                alert(errorThrown);
            }

        })
    }

Servlet将数据封装成json返回

JSONObject object = new JSONObject();

        String  key;
        String value;
        while(iterator.hasNext()){
            Map.Entry entry = (Map.Entry) iterator.next();
            if(entry.getKey().toString().equals("age")){
                 key = (String) entry.getKey();
                 value = String.valueOf((Integer) entry.getValue());
            }else{
                 key = (String) entry.getKey();
                 value = (String) entry.getValue();
            }

            object.put(key, value);
        }
        //JSONArray array = new JSONArray();

        request.setAttribute("map", map);

        //object.put("resultMap", resultMap);
        //array.add(object);
        //[{"resultMap":{"id":"1702","sex":"男","address":"罗湖区","name":"刘国华","age":"22","tel":"15636735238","password":"123456"}}]
        response.setCharacterEncoding("UTF-8");
       // response.setContentType("application/json; charset=utf-8");
        response.getWriter().write(object.toString());
        //response.getWriter().write(array.toString());
        //response.getWriter().println(array);
        //response.getWriter().println(object);
        //System.out.println(list);
        System.out.println(object);

效果图

点击详情链接效果