layui table实现多条件搜索

最新推荐文章于 2024-05-16 06:16:29 发布

mr_foxsand

最新推荐文章于 2024-05-16 06:16:29 发布

阅读量2.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/mr_foxsand/article/details/118108791

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

百度了好多文章，效果都不是很满意，最终还是需要自己动手！经过不断的测试，终于做出来了！

2021.06.30：之前的思路无法解决前端分页问题，代码做了下修改！

先展示下效果：

1.页面无条件初始化

2.搜索条件查询结果

源码：

1.前端页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <!--    <footer th:include="include/common/common :: bootstrapResource"></footer>-->
    <footer th:include="include/common/common :: blueCSSResource"></footer>

    <script>
        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'table'] , function () {
            var table = layui.table
                ,admin = layui.admin
                ,element = layui.element;

            let entityName = 'config';

            $(document).on('click' , '#' + entityName + 'SearchBtn' ,function () {
                createTable(this);
            });


            function createTable(e){
                let formId = $(e).attr("blue-form-id")
                    ,formData = $("#" + formId).serialize()
                    ,formUrl = $("#" + formId).attr("action");
                table.render({
                    elem: '#test-table-operate'
                    ,url:formUrl + '?config = ' + formData
                    // [[${pageSize}]]：thymeleaf模板引擎语法，由后端传入
                    ,limit: [[${pageSize}]]
                    ,page: true
                    ,parseData: function(res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": '', //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.records //解析数据列表
                        };
                    }
                    ,cols:[
                        [
                            {type:'checkbox', fixed: 'left'}
                            ,{field:'id', title: 'ID', sort: true, hide:true, fixed: 'left'}
                            ,{field:'userName', sort:true , title: '用户名'}
                            ,{field:'loginCode', sort:true , title: '登录名'}
                            ,{title:'操作' , align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
                        ]
                    ]
                });
            };

            $(document).ready(function () {
                let searchBtn = '#' + entityName + 'SearchBtn';
                createTable(searchBtn);
            });


            //监听工具条
            let openFormActive = {
                tabAdd:function (userId) {
                    layui.router();
                    let i = "/a/user/form?id=" + userId , t = "用户表单";
                    let l=parent===self?layui:top.layui;l.index.openTabsPage(i,t);
                }
            };

            //todo:以下测试，未完成
            //监听表格复选框选择
            table.on('checkbox(test-table-operate)', function(obj){
                console.log(obj)
            });

            table.on('tool(test-table-operate)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.alert('查看：<br>'+ JSON.stringify(data))
                    // layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    openFormActive['tabAdd'].call(this , data.id);

                }
            });

            var active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                ,getCheckLength: function(){ //获取选中数目
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                }
                ,add: function(){
                    layui.router();
                    let i = "/a/" + entityName + "/form?isNewRecord=true" , t = "参数信息";
                    let l=parent===self?layui:top.layui;l.index.openTabsPage(i,t);
                }
            };

            $('.test-table-operate-btn .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户信息</div>
                <div class="layui-card-body">
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <form class="form-horizontal" id="userSearchForm" th:object="${user}" method="post" action="/a/user/findPage">
                                <div class="layui-col-lg8">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label">登录名：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="loginCode" id="searchLoginCode" placeholder="登录名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label">用户名：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="userName" id="searchUserName" placeholder="登录名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-lg4">
                                    <button type="button" class="layui-btn" id="userSearchBtn" onsubmit="return false" blue-form-id="userSearchForm">搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </form>
                        </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" >
                    <div class="layui-btn-group test-table-operate-btn" id="tableBtn" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" data-type="add">验证是否全选</button>
                        <button class="layui-btn layui-btn-sm" data-type="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" data-type="getCheckLength">获取选中数目</button>
                    </div>
                    <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>

                    <script type="text/html" id="test-table-operate-barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

2.服务端

2.1 controller、service层代码：

// controller层findPage
@RequiresPermissions("user:view")
    @RequestMapping("/findPage")
    @ResponseBody
    public IPage<User> findPage(@RsaSecurityParameter User user){
        return userService.findPage(user);
    }


//service层findPage
public IPage<User> findPage( User entity, String... args) {
        Map<String , Object> search = null;
        if (EmptyUtil.isNoEmpty(entity.getUserName())
                || EmptyUtil.isNoEmpty(entity.getLoginCode())
        ){
            search = new HashedMap();
            if (EmptyUtil.isNoEmpty(entity.getUserName())){
                search.put("USER_NAME" , entity.getUserName());
            }
            if (EmptyUtil.isNoEmpty(entity.getLoginCode())){
                search.put("LOGIN_CODE" , entity.getLoginCode());
            }
        }else {
            long limit = entity.getLimit();
            long page = entity.getPage();
            entity = new User();
            entity.setLimit(limit);
            entity.setPage(page);
        }
        return super.findPage(entity , search , args);
    }

//service父类中的findPage
  public IPage<T> findPage(T entity , Map<String , Object> search , String... args){
        long current = 1L;
        long size = 10L;
        current =  EmptyUtil.isNoEmpty(ReflexUtil.getFieldValue(entity , "page"))?(long) ReflexUtil.getFieldValue(entity , "page") :current;
        size = EmptyUtil.isNoEmpty(ReflexUtil.getFieldValue(entity , "limit"))? (long) ReflexUtil.getFieldValue(entity , "limit") :size;
        QueryWrapper<T> queryWrapper;
        if (EmptyUtil.isNoEmpty(search)){
            queryWrapper = new QueryWrapper<>();
            for (Map.Entry<String , Object> entry:search.entrySet()
                 ) {
                queryWrapper.like(entry.getKey() , entry.getValue());
            }
        }else {
            queryWrapper = new QueryWrapper<>(entity);
        }
        queryWrapper.orderByAsc(args);
        return super.page(new Page<T>(current , size) , queryWrapper);
    }

2.2 实体类需要limit、size属性用于接收前端传入的分页信息

public class User extends PageEntity<User>  //User实体类继承一个自定义的page父类



// 自定义page父类
@ToString
@NoArgsConstructor
public class PageEntity<T> extends BaseEntity<T> {
    private static final long serialVersionUID = -8596775877393206795L;

    @TableField(exist = false)
    @Setter
    @Getter
    protected long limit;
    @TableField(exist = false)
    @Setter
    @Getter
    protected long page;


}

mr_foxsand

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
layui table实现多条件搜索

版权声明：请勿用于任何商业用途，转载请说明出处！百度了好多文章，效果都不是很满意，最终还是需要自己动手！经过不断的测试，终于做出来了！先展示下效果：1.页面无条件初始化2.搜索条件查询结果源码：1.前端页面代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
复制链接

扫一扫