用Ajax查询结果初始化记录列表表单

最新推荐文章于 2019-04-18 12:27:36 发布

皆普

最新推荐文章于 2019-04-18 12:27:36 发布

阅读量1.3k

点赞数

文章标签： ajax list html javascript action function

本文链接：https://blog.csdn.net/wj800/article/details/6999200

版权

使用List<Map>数组初始化记录列表表单也很方便，这里结合Ajax查询、分页再举一例。

分页控件pageObj初始化参数{uid:"",list:""}是必须的，其余可使用默认值。

一、效果图

二、客户端网页文件newsListForm.html

<!--
用Ajax查询结果初始化记录列表表单
客户端代码
胡开明
2011-11-21
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>调用Ajax查询实现记录列表表单初始化</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="res/js/pvo.js"></script>
        <script type="text/javascript" src="res/js/jbxx.jsp"></script>
        <script type="text/javascript" src="res/js/page.js"></script>
        <script type="text/javascript" src="res/jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            var record={id:"qicity",s:"",defaultLM:"<option value='企业公告'>企业公告</option><option value='企业资讯'>企业资讯</option>"};
        
            function queryNews(){
                var action=pvo.getRoot()+ "/ExServlet?method=queryQyNews";//查询请求的action，如同form中的action;
                pvo.query(action, function(){
                    var p=new pageObj({//创建分页对象
                        uid:"browseTD",//指定一个容器，供显示结果
                        numPerPage:6,//每页显示的记录数  numPerOne:10,//每组的页数
                        list:pvo.RESULT//这是查询结果 //barType:0//2：表示在查询结果的上下方都显示索引条；0，只在查询结果的上方都显示索引条；1，只在查询结果的下方都显示索引条；
                    });
                    p.f=function(){//实现用户方法
                        var list = p.pageList;//从分页的结果中取当前页的记录
                        var uid=p.bodyid;//从分页面板中获取主体部分的DOM元素id
                        document.getElementById(uid).innerHTML="";
                        var html="";
                        var head='<tr bgcolor="gray" align="center" style="height:24px;color:#ffffff;"><td width="40px">No</td><td width="300px">标题</td> <td width="180px">日期</td><td width="100px">栏目分类</td><td width="240px" colspan="3">操作</td></tr>';
                        if(list.length>0){
                            for(var i=0;i<list.length;i++){
                                var j=i+1;
                                var m=list[i];
                                html=html+"<tr><td align='center'>"+j+"<input type='hidden' name='title' value='"+list[i].get("id")+"'></input></td><td><input type='text' style='width:240px;' name='title' value='"+list[i].get("title")+"'></input></td><td><input type='text' style='width:160px;' name='uptime' value='"+list[i].get("uptime")+"'></input></td><td><select name='groupid' style='width:80px;'><option value='"+list[i].get("groupid")+"'>"+list[i].get("groupid")+"</option>"+record.defaultLM+record.s+"</select></td><td width='120px' align='center'><a href='javascript:editQyDoc("+i+")'>编辑内容</a></td><td width='60px' align='center'><a href=javascript:updateQyDoc("+i+")>保存</a></td><td width='60px' align='center'><a href=javascript:deleteQyDoc("+list[i].get("id")+")>删除</a></td></tr>";
                            }
                        }else{
                            html="<tr><td colspan='10'>暂无记录</td></tr>"
                        }
                        html="<tbody id='browseBody'>"+html+"</tbody>";
                        document.getElementById(uid).innerHTML="<table cellpadding='4' cellspacing='1' border='0px' width='100%' align='center'>"+head+html+"</table>";
                        formatRow('browseBody');

                    }
                    p.showPage();//显示分页结果
                });
            }


            $(document).ready(function(){
                queryNews();
            });

        </script>
    </head>
    <body>
        <p>调用Ajax查询实现记录列表表单初始化</p>

        <form action="" method="POST">
            <div id="browseTD" style="width:860px;">

            </div>
        </form>

    </body>
</html>

三、Servlet中实现的方法

在ExServlet的方法processRequest()中添加一个条件判断

        if ("queryQyNews".equals(method)) {
            sql="select enterprisedoc_id as id,title,groupid,uptime from enterprisedoc";
            query(response,sql);
        }

    /**
     * 通用查询方法
     * @param response servlet response
     * @param sql
     */
    private void query(HttpServletResponse response,String sql) throws IOException, ServletException {
        response.setContentType("text/xml;charset=UTF-8");
        String returnValue = "";
        PrintWriter out = null;
        try {
            out = response.getWriter();
            ProcessVO pvo = new ProcessVO(_Con.getCon());
            try {
                List v = pvo.getSomeRecord(sql);
                if (v.size() > 0) {
                    for (int i = 0; i < v.size(); i++) {
                        Map map = (Map) v.get(i);
                        returnValue = returnValue + "<record>" + mapToXml(map) + "</record>";
                    }
                    returnValue = "<records>" + returnValue + "</records>";
                } else {
                    returnValue = "<records></records>";
                }
            } catch (SQLException ex) {
                ex.printStackTrace();
            } finally {
                pvo.closeCon();
                out.write(returnValue);
                out.close();
            }
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
    }