利用简单的参数传递来实现单条查询的easyui-datagrid

　　前一阵子老师给出了一个题目, 说让设计个表格, 学生系统的, 可以查询学生的信息和成绩, 科目自己定, 数据库建表也自己定.

　　数据库的建表可是建的相当的简陋, 反正老师不是很满意, 后来数据表格做出来了, 老师让添加一个查询功能, 一下让我有点懵, 查询的内容还没讲, 不知道咋做, 于是当天晚上苦思冥想想出来这么一个办法, 开始的时候不是很合适, 请教了一下老师, 整理一下贴出来!

首先JSP页面这样写,

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生成绩列表</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"></link>
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<script>
<%
String sno = request.getParameter("sno");
if(sno==null) {
    sno = "";
}
%>
    $(function() {
        $("#tab").datagrid({
            title:"学生成绩列表",
            url:"GetstuList?sno=<%=sno%>",
            idField:"sno",
            singleSelect:false,      //指定是否只可以单选
            frozenColumns:[[
                //冻结某一列不随滚动条滚动
                  {field:"",title:"",checkbox:true},
                  {field:"sno",title:"学生学号",width:80}
            ]],
            columns:[[
                  {field:"sname",title:"学生姓名",width:80},
                  {field:"ssex",title:"学生性别",width:80},
                  {field:"sbirthday",title:"学生出生日期",width:120},
                  {field:"sclass",title:"学生班级",width:80}
            ]],
            toolbar: [{
                //查找工具
                text:‘查找‘,
                iconCls: ‘icon-search‘,
                handler: function(){
                    $("#addfm").form("reset");
                    $("#add").dialog({
                        title:"查找"
                    })
                    $("#add").dialog("open");
                }
            }],
            collapsible:true,      //是否折叠
            width:"100%",        //整个表宽
            fitColumns:true,       //是否适应表的宽度
            striped:true,     //斑马线
            pagination:true,     //是否出现分页工具栏
            pageNumber:1,       //打开页面首先显示哪一页
            pageSize:3,      //页面打开时显示的每页显示的数据条数
            pageList:[3,6,9,12],        //分页列表选项, 按每页显示多少内容
            sortName:"sno",      //按哪一列进行排序
            sortOrder:"desc",    //定义是顺序排列还是倒序
            remoteSort:false,    //取消从服务器排序, 如果要让数据这这里排序这个属性必须设置为false
            loadMsg:"不要着急,马上就好..."
        });
    });

</script>

<body>
<table id="tab"></table>

<!-- 对话框窗口, 显示添加或编辑 -->
<div id="add" class="easyui-dialog" style="width:300px" data-options="closed:true">

    <form id="addfm" method="post" action="Student.jsp">
        <table>
            <tr>
                <td>学生学号: </td>
                <td><input id="sno" name="sno" class="easyui-textbox"
                data-options="required:true,
                                    validType:‘length[2,10]‘,
                                    missingMessage:‘查询学生学号为必填项‘" /></td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="查询" />
                </td>
            </tr>
        </table>
    </form>

</div>

</body>
</html>

然后是Servlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");

        String sno = request.getParameter("sno");
        String pagenum = request.getParameter("page");
        String rows = request.getParameter("rows");

        int ipagenum = 0;
        int irows = 0;
        String str1 = "";
        //判断sno的值, 如果为"", 就执行下面的代码, 不为空就跳到else的代码里
        if(sno==null||sno.trim().length()<=0) {
            if(pagenum!=null&&pagenum.trim().length()>0&&rows!=null&&rows.trim().length()>0) {
                ipagenum = Integer.parseInt(pagenum);
                irows = Integer.parseInt(rows);
            }
            try {
                StuDal stu = new StuDal();
                ArrayList<Stuclass> array =  stu.getStuList(ipagenum,irows);
                if(array!=null) {
                    int x = stu.getCount();
                    str1 = "{\"total\":"+x+",\"rows\":" + JSON.toJSONString(array) + "}";
                }
            }
            catch (Exception e) {
                response.getWriter().append(e.getMessage());
            }
        }
                //sno不为空走这段
        else if(sno!=null&&sno.trim().length()>0) {
            if(sno!=null&&sno.trim().length()>0) {
                try {
                    StuDal stu = new StuDal();
                    ArrayList<Stuclass> array =  stu.getStuList(sno);
                    if(array!=null) {
                        int x = stu.getCount();
                        str1 = "{\"total\":"+x+",\"rows\":" + JSON.toJSONString(array) + "}";
                    }
                }
                catch (Exception e) {
                    response.getWriter().append(e.getMessage());
                }
            }
        }
        response.getWriter().append(str1);
    }

　　这段代码的原理就是打开一个对话框, 输入一个数字, 即学生学号, 然后将学生学号传给自己, 就是url的那个Servlet, 由Servlet进行判断, 为空就显示全部的信息, 不为空就执行另一个方法, 即单条查询, 其实按照姓名查询用这个方法也能实现, 就是在开头的地方, 在JSP页面里加上设置字符集的那三行代码, 然后转成字节码, 传送到Servlet里之后进行同样的判断, 有值的话就转成汉字, 输入到sql语句中去.

　　这样的代码比较简陋, 以当时的只是水平也就能想出这么个办法来了.

　　哦对! 还有一个需要说明的问题, 就是为什么在开始会有下面这些代码, 这句if判断代码如果不加的话, 数据表格是空的, 没有数据.

<%
String sno = request.getParameter("sno");
if(sno==null) {
    sno = "";
}
%>

　　原因是: 当在页面之间传递参数的时候, request.getParameter()传递的是一个字符串了, 如果这个参数为null, 当传递到Servlet里面的时候就变成"null", 这是一个值为null的String了, 并不是null(Object)了, 类型变了, 即使不变, 传一个对象过去, 也肯定实现不了这个功能, 所以在页面一开始的时候先处理一下, 如果参数为null, 就让它等于"", 就能解决这个问题了

上个效果图:

单条查询的getCount方法我没改, 所以单条查询的页码数还是6, 这些细节就不要在意啦...

时间： 2024-10-11 19:17:11

利用简单的参数传递来实现单条查询的easyui-datagrid的相关文章

简单模拟structs2核心控制器利用反射原理实现参数传递和物理视图跳转

在能够运用struct2框架进行简单网站开发后,对structs2的一些较原框架强大的功能希望有更深刻的理解,于是尝试从底层开始摸索,本文就在重新学习structs2后,利用简单代码对核心控制器的主要功能进行理解. 首先,介绍一下struct2的处理流程: 1.浏览器发出请求,即***.action 2.请求被核心控制器的StrutsPrepareAndExecuteFilter拦截 3.搜索structs.xml配置文件,寻找Action的属性name为***的配置信息,而后根据class属性

【Javascript】列表查询页面，简单地保存上一次查询的查询参数

开发中经常做一些查询参数 + 列表参数的功能,这些功能有时候需提供导出Excel,或带超链接到其他明细页面的功能点. 在一些交互性要求严格的系统,需求方会要求: 用户第一个输入某些查询条件进行列表查询: 然后用户修改了某些查询条件,但还没按查询按钮(即还没有进行第二次查询): 然后用户直接进行导出Excel或超链接查询相关详情. 这时候,用户导出的Excel数据应是用户第一次查询的结果(即不是将现有我们看到的修改后的查询参数传递到后台进行查询,而是需要将第一次查询的参数传递到后台进行查询). 这

【Mysql】利用group by附带having进行聚类查询

聚类查询所针对的对象是表的其中一列,譬如如下的testtable表,要查出username这一列中,各个项所出现的次数,则用到聚类查询 显然,聚类查询之后,得到的结果必须与id,number这两列半点关系都没有.因此,也就是正如上门,所说,聚类查询所针对的对象是表的其中一列. 聚类查询往往配合count(*),sum(*),avg(*)等聚类语句,用来对表进行统计.由于查询的字段往往是字符串varchar类型,因此统计该字符串的数目count(*)这个函数就是出现最多的. 比如,要查询上面的te

EasyUI datagrid简单运用

jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的网格控件,几乎要自己来写! 介绍一下的easyUI 的datagrid,感觉写法还是比较简单易懂,重用性比较强!主要实现了显示数据,查询数据(序列化传参),datagrid分页样式选用. 页面如下: 例子依赖:1.asp.net mvc2.easyui文件依赖包    下载地址:http://www

easyui Datagrid查询报错Uncaught TypeError:Cannot read property &#39;length&#39; of undefined

1.问题描述 easyui中datagrid执行loadData方法出现如下异常:Cannot read property 'length' of undefined 2.一开始怀疑是js或者页面的问题,然后从早上干到下午,网上各种方法用尽了就是不行! 最后发现规律了: 使用mybatis从数据库查询返回的List不报错,但是自己new的ArrayList总是报错! 后来发现原来mybatis返回的不是ArrayList!而是PageList! 3.解决问题 PageList中有个参数Pagin

使用Struts2和jQuery EasyUI实现简单CRUD系统（八）——Struts与EasyUI使用JSON进行交互

由于前面写了的四篇文章压缩得太厉害,还有真正的原理也没有弄通,所以重新写了使用Struts2和jQuery EasyUI实现简单CRUD系统(一).(二)和(三). 知道ajax与struts间用json交互后,那么EasyUI作为一个JQuery的UI插件集合体,JQuery为一个Javascript库,而ajax是异步的js和xml.JQuery的代码里面就是直接用了Ajax,EasyUI也是一样. 不同于<使用Struts2和jQuery EasyUI实现简单CRUD系统(五)--jsp,

[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析

 大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中

EasyUI Datagrid的简单使用

此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Datagrid上展示出来并使用分页控件进行分页. 项目.框架.数据库:创建的是Maven项目,采用Spring+SpringMVC+Mybatis框架,数据库SQL Server 2005 1.创建数据库表 表结构: 表数据: 2.通过mybatis逆向工程映射TreeTestTable(表名略丑)

在php中怎么利用js把参数传递给弹窗

1.在php页面中经常用到把参数传递给弹窗页面,在弹窗页面中操作 2.两种方式,截图为一种 3.最常见的就是利用hideen隐藏域,点击按钮的时候把要传递的参数值传递给隐藏域,需要的时候在弹窗中获取. <input type="hidden" name="win_hidden" class="win_id" value="" />