EasyUI 数据表格（DataGrid）——第四节

使用easyui实现查询的功能

<!--
    在项目中查询时间段的sql语句(时间类型为varchar)(数据库中的时间类型)：

    <if test="beginTime!=null and beginTime!=''">
    　　AND tm.add_time&gt;=#{beginTime}
    </if>
    <if test="endTime!=null and endTime!=''">
     　　AND tm.add_time &lt;=#{endTime}
    </if>
-->

Mapper文件

<!--
    在项目中查询时间段的sql语句(时间类型为varchar)(数据库中的时间类型)：

    <if test="beginTime!=null and beginTime!=''">
    　　AND tm.add_time&gt;=#{beginTime}
    </if>
    <if test="endTime!=null and endTime!=''">
     　　AND tm.add_time &lt;=#{endTime}
    </if>
    -->
    <select id="findAllUsers" resultType="User">
        select * from tb_user
        <where>
            <if test="user != null and user.length > 0">
                user like concat('%','${user}','%')
            </if>
            <if test="from != null">
                and date &gt;= #{from}
            </if>
            <if test="to != null">
                and date &lt;= #{to}
            </if>

        </where>

        order by ${sort} ${order} limit #{start} ,#{rows};
    </select>

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataGrid数据表格</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/DataGrid4.js"></script>
    <style rel="stylesheet" type="text/css">
        .textbox{
            height:20px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
        }
    </style>
</head>
<body>
    <table id="box"></table>
    <div id="tb" style="padding: 5px; height: auto;">
        <div style="margin-bottom: 5px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" <%--plain="true"--%>>添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" <%--plain="true"--%>>修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" <%--plain="true"--%>>删除</a>
        </div>
        <div style="padding:0 0 0 7px;">
            查询账号：<input type="text" class="textbox" name = "user" style="width:130px;">
            创建时间从：<input type="text" class="easyui-datebox" name="date_from" style="width:130px;">
            到：<input type="text" class="easyui-datebox" editable="false" name="date_to" style="width:130px;">
            <a href="#" class="easyui-linkbutton" editable="false" iconCls="icon-search" onclick="obj.search();">查询</a>
        </div>
    </div>

</body>
</html>

JS文件



$(function () {

    //注意；如果定义在外面的话，可以不加var，也可以加var定义
    //但是写在这里面就不能写var将其变成隐式全局变量，否则无法访问
    obj = {
        search:function () {
            $('#box').datagrid("load",{
                user: $.trim($("input[name='user']").val()),
                dateFrom:$.trim($("input[name='date_from']").val()),
                dateTo:$.trim($("input[name='date_to']").val())
            });
        }
    };
    $("#box").datagrid({
        //设置请求路径
        url:"getDataGridList.action",
        //设置表格宽度
        width: 700,
        //设置请求方式
        type: "GET",
        //设置表头图标
        iconCls:"icon-search",
        //方式一
        toolbar:"#tb",
        //方式二
        /*toolbar:[
            {
                text:"添加",
                iconCls:"icon-add",
                handler:function () {
                    alert("添加");//进行相应的事件处理
                }
            },{
                text:"修改",
                iconCls:"icon-edit",
                handler:function () {
                    alert("修改");
                }
            },{
                text:"删除",
                iconCls:"icon-remove",
                handler:function () {
                    alert("删除");
                }
            }
        ],*/

        //设置表头标题
        title:"EasyUI数据表格",
        //设置是否显示斑马线效果
        striped:true,
        //设置列适应
        fitColumns : true,
        //设置是否显示行号
        rownumbers:true,
        //设置是否分页
        pagination:true,
        //设置分页时初始化页数
        pageNumber:1,
        //设置每页显示的条数
        pageSize:5,
        //设置显示条数的下拉列表
        pageList:[5,10,20],
        //设置是否远程加载进行排序
        remoteSort : false,
        //设置默认排序的名称
        sortName : "date",
        //设置默认排序的方式
        sortOrder : "asc",
        //设置分页导航的位置
        pagePosition:"bottom",
        //设置表格中的列
        columns: [[
            {
                //每一列的名字
                title: "用户名",
                //数据中的字段名（数据库中的字段名）
                field: "user",
                //每一列的宽度
                width: 100,
                //设置列的对齐方式
                align:"center",
            }, {
                title: "邮箱",
                field: "email",
                width: 100,
                sortable:true,
                order:"desc",
            },{
                title:"日期",
                field:"date",
                width:100,
                sortable:true,
                order:"desc",
                //进行了日期的格式化
                formatter:function (value,row,index) {
                    var time = row.date;
                    var date = new Date(time);
                    return date.getFullYear()+"年"+(date.getMonth()+1)+" 月"+date.getDate()+" 日";
                }
            }
        ]],

    });

});

效果图

------------------------------------------------

关注小编微信公众号获取更多资源

EasyUI 数据表格（DataGrid）——第四节

猜你喜欢