easyui 分页加条件查询

小扎仙森

已于 2022-06-22 10:22:55 修改

阅读量491

点赞数

文章标签： easyui javascript ecmascript

于 2021-06-11 22:50:57 首次发布

本文链接：https://blog.csdn.net/weixin_44538590/article/details/117827403

版权

easyui 分页加条件查询样式图

在这里插入图片描述

前言

提示：因为好长时间没写过了回忆一下前端和一些简单的代码
提示：以下是本篇文章正文内容，下面案例可供参考

一、写前端框架

第一步引入js文件：

<!-- 引入easyui的css样式 -->
    <link rel="stylesheet" href="../js/themes/default/easyui.css">
    <!-- 引入easyui的图标css样式 -->
    <link rel="stylesheet" href="../js/themes/icon.css">
    <!-- 引入jqury的js文件 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入easyui的js文件 -->
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <!-- 引入easyui的中文js文件 -->
    <script type="text/javascript" src="../js/locale/easyui-lang-zh_CN.js"></script>

第二步填写body部分：

<body>
<!--条件查询-->
别名:<input class="easyui-textbox" id="name" >
姓名/性别:<input class="easyui-textbox" id="xingmingexingbie">
地区:<input id="diqu" class="easyui-combobox" data-options="valueField:'diqu',textField:'diqu',url:'../user/diqu'" />
<!--搜索按钮-->
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:searchUser()">搜索</a>
<!-- 动态表格 -->
<table id="dongTable"></table>
</body>

第三步填写javascript部分：

//th:inline="none" 不加报错至于为啥自己查一下我就不说了
<script th:inline="none" type="application/javascript">
    /* 条件查询
     */
    function searchUser(){
        var name = $("#name").textbox("getValue");//别名
        var xingmingexingbie = $("#xingmingexingbie").textbox("getValue");//姓名/性别
        var diqu = $("#diqu").textbox("getValue");//地区
        //#dongTable 获取表格数据
        $('#dongTable').datagrid('load', {
            name : name ,//别名
            diqu : diqu ,//姓名/性别
            xingmingexingbie : xingmingexingbie //地区
        });
    }
    //打开页面自动加载部分
    $(function(){
         dongTablePage();//初始化分页加载
    })

    //初始化用户表格
    function dongTablePage(){
    //#dongTable 展示在table 的id当中
        $('#dongTable').datagrid({
            url:'../user/usera',
            columns:[[
                {field:'checkbox',checkbox:true,width:"100px"},
                {field:'id',title:'ID',width:"100px"},
                {field:'name',title:'别名',width:"100px"},
                {field:'shuoming',title:'签名',width:"100px"},
                {field:'xingbie',title:'性别',width:"100px",
                    formatter: function(value,row,index){
                        return row.xingbie==1?"男":"女";
                    }
                },
                {field:'xingming',title:'姓名',width:"100px"},
                {field:'nianling',title:'年龄',width:"100px"},
                {field:'diqu',title:'地区',width:"100px"},
                {field:'zhuangtai',title:'状态',width:"100px",
                    formatter: function(value,row,index){
                            return row.zhuangtai==1?"在家":"不在家";
                        }
                    },
                {field:'caozuo',title:'操作',width:"100px",
                    formatter: function(value,row,index){
                        str="<a class='easyui-linkbutton' href='javascript:deleteUser("+row.id+")'>删除</a> |"
                        str+="<a class='easyui-linkbutton' href='javascript:updateUser("+row.id+")'>修改</a> |"
                        if(row.zhuangtai==1){
                            str+="<a class='easyui-linkbutton' href='javascript:downImgUser(\""+row.id+"\")'>下架</a> "
                        }else{
                            str+="<a class='easyui-linkbutton' href='javascript:downImgUser(\""+row.id+"\")'>上架</a> "
                        }
                        return str;
                    }
                }
            ]],
            pagination:true,//如果为true，则在DataGrid控件底部显示分页工具栏。
            pageSize:10,
            pageList:[10,20,30]
        });
    }
</script>

二、编写controller

1.查询下拉数据

代码如下（示例）：

/**
 * 类描述：查询下拉框地区数据
 * --------select diqu from 表明
 * @ClassName AdminController
 * @Description TODO  
 * @Author 10464 
 * @Date 2021/6/11 22:13 
 * @Version 1.0
 */
    @RequestMapping("/diqu")
    @ResponseBody
    public List<User> ddqu(){
        List<User> list=adminService.ddqu();
        return list;
    }

2.编写分页查询和条件查询

代码如下（示例）：

/**
 * 类描述：编写分页查询和条件查询
 *
 * @ClassName AdminController
 * @Description TODO
 * @Author 10464
 * @Date 2021/6/11 22:13
 * @Version 1.0
 */
    @RequestMapping("/usera")
    @ResponseBody
    public List<User> usera(Integer page, Integer rows, User user){
        Integer pag=page-1;//页数
        List<User> list=null;//赋值
        //判断第一次查询的时候传过来条件是空直接查询数据
        //当有条件的时候不是空进入判断
        if (user.getXingmingexingbie()!=null){
            if (user.getXingmingexingbie()=="男"||user.getXingmingexingbie().equals("男")){
                //标明：性别已int类型所以当前端传过来是男的时候我们将1赋值进行查询
                user.setXingmingexingbie("1");
                list= adminService.usera(pag,rows,user);
                return list;
            }else{
            	//标明：上面条件不是男是其他条件的直接条件查询
                list= adminService.usera(pag,rows,user);
            }
            if (user.getXingmingexingbie()=="女"||user.getXingmingexingbie().equals("女")){
             //标明：性别已int类型所以当前端传过来是男的时候我们将2赋值进行查询
                user.setXingmingexingbie("2");
                list= adminService.usera(pag,rows,user);
                return list;
            }else {
               //标明：上面条件不是女是其他条件的直接条件查询
                list= adminService.usera(pag,rows,user);
            }
        }else{
        	//第一次查询的时候条件为空null 的时候直接查询
            list= adminService.usera(pag,rows,user);
        }
        return list;
    }

3.编写DAO层

代码如下（示例）：

//查询下拉数据
List<User> ddqu();
//查询分页和条件
List<User> queryUserPage(@Param("page") Integer pag, @Param("rows")Integer rows,@Param("user")User user);

4.编写mapper.xml层

代码如下（示例）：

    <!--查询地区-->
    <select id="ddqu" resultType="com.yuna.pojo.User">
     select diqu from `user`
    </select>

<!--分页查询数据-->
    <select id="queryUserPage" resultType="com.yuna.pojo.User" >
        SELECT * FROM `user` usera where 1=1
        /*模糊查询别名*/
        <if test="user.name!=null and user.name!=''">
          and usera.name like CONCAT(CONCAT('%',#{user.name},'%'))
        </if>
        /*地区精细查询*/
        <if test="user.diqu!=null and user.diqu!=''">
            and usera.diqu = #{user.diqu}
        </if>
        /*名称或者性别查询*/
        <if test="user.xingmingexingbie!=null and user.xingmingexingbie!=''">
            and usera.xingming = #{user.xingmingexingbie} || usera.xingbie = #{user.xingmingexingbie}
        </if>
        LIMIT #{page},#{rows}
    </select>

总结

提示：这里对文章进行总结：
例如：大神勿喷，个人编写仅供参考若有不足之处请留言谢谢

小扎仙森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
easyui 分页加条件查询

easyui 分页加条件查询样式图前言提示：因为好长时间没写过了回忆一下前端和一些简单的代码提示：以下是本篇文章正文内容，下面案例可供参考一、写前端框架第一步引入js文件： <link rel="stylesheet" href="../js/themes/default/easyui.css">  <link rel="s
复制链接

扫一扫