Mybatis-Plus和bootstrap-table集成 demo

时间 2021-05-02

标签 javascript css html 前端 java jquery json bootstrap mybatis app 栏目 MyBatis 繁體版

原文原文链接

JSP页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>用户列表</title>
    <!-- Jquery -->
    <script src="${ctx}/static/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
    
    <!-- Bootstrap -->
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${ctx}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    
    <!-- Bootstrap table -->
    <link href="${ctx}/static/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet"/>
    <script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
    
        <div class="row">
            <div class="col-lg-8">
                <br/>
                <div class="panel panel-default">
                    <!-- 展现的table列表 -->
                    <table id="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
        })
        
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#dataTable').bootstrapTable({
                    method: 'post',
                    url: dataUrl,
                    dataType: "json",
                    striped: true,     //使表格带有条纹
                    pagination: true,    //在表格底部显示分页工具栏
                    pageSize: 10,
                    pageNumber: 1,
                    pageList: [10, 20, 50, 100, 200, 500],
                    idField: "id",  //标识哪一个字段为id主键
                    showToggle: false,   //名片格式
                    cardView: false,//设置为True时显示名片（card）布局
                    showColumns: true, //显示隐藏列  
                    showRefresh: true,  //显示刷新按钮
                    singleSelect: true,//复选框只能选择一条记录
                    search: false,//是否显示右上角的搜索框
                    clickToSelect: true,//点击行便可选中单选/复选框
                    sidePagination: "server",//表格分页的位置
                    queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
                    toolbar: "#toolbar", //设置工具栏的Id或者class
                    columns: dataColumns, //列
                    silent: true,  //刷新事件必须设置
                    formatLoadingMessage: function () {
                        return "请稍等，正在加载中...";
                    },
                    formatNoMatches: function () {  //没有匹配的结果
                        return '无符合条件的记录';
                    },
                    onLoadSuccess: function () {
                        
                    },
                    onLoadError: function (data) {
                        //$('#reportTable').bootstrapTable('removeAll');
                    },
                    onClickRow: function (row) {
                        //window.location.href = "/qStock/qProInfo/" + row.ProductId;
                    },
                    responseHandler: function(res) {
                        if(res.code == 1){
                            return {
                                "total": res.data.total,//总页数
                                "rows": res.data.rows   //数据
                             };
                            
                        }
                    }
                });
                
            };
        
            //获得查询的参数
            oTableInit.queryParams = function (params) {
                return dataQueryParams(params);
            };
            return oTableInit;
        };
        
        var dataUrl = "${ctx}/sys/user/getUserList";
        var dataColumns = [{
            field: 'id',
            title: '序号'
        }, {
            field: 'loginName',
            title: '登陆名'
        },  {
            field: 'userName',
            title: '用户姓名'
        }, {
            field: 'mobile',
            title: '手机号'
        }];
        
        function dataQueryParams(params) {
            return {
                _size: params.limit,  //页面大小
                _index: params.offset, //页码
            };
        }
    
        /**
         * 日期格式化
         * @param time
         * @returns {*}
         */
        function formatDate(time) {
            if (time == '' || time == null || time == undefined) return '';
            var datetime = new Date();
            datetime.setTime(time);
            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
        }
    </script>
</body>
</html>

服务端代码

@ResponseBody
    @RequestMapping("/getUserList")
    public AjaxResult getUserList() {
        Page<User> page = getPage();
        page = userService.selectPage(page, null);
        
        Map<String, Object> resObj = new HashMap<String, Object>();
        resObj.put("total", page.getTotal());
        resObj.put("rows", page.getRecords());
        
        return json(resObj);
    }
    
    public AjaxResult json(Object data) {
        return new AjaxResult().success(data);
    }

AjaxResult对象

public class AjaxResult {

    // 返回状态码   (默认1:成功,其它:失败)
    private int code = 1;

    // 返回的中文消息
    private String message;

    // 成功时携带的数据
    private Object data;

    public int getCode() {
        return code;
    }

    public AjaxResult setCode(int code) {
        this.code = code;
        return this;
    }

    public String getMessage() {
        return message;
    }
    
    public AjaxResult setMessage(String message) {
        this.message = message;
        return this;
    }

    public Object getData() {
        return data;
    }

    public AjaxResult setData(Object data) {
        this.data = data;
        return this;
    }

    public AjaxResult addSuccess(String message) {
        this.message = message;
        this.code = 1;
        this.data = null;
        return this;
    }

    public AjaxResult addError(String message) {
        this.message = message;
        this.code = 999;
        this.data = null;
        return this;
    }

    public AjaxResult addFail(String message) {
        this.message = message;
        this.code = 999;
        this.data = null;
        return this;
    }

    public AjaxResult addWarn(String message) {
        this.message = message;
        this.code = 333;
        this.data = null;
        return this;
    }

    public AjaxResult success(Object data) {
        this.message = "success";
        this.data = data;
        this.code = 1;
        return this;
    }

    public boolean isSuccess() {
        return getCode() == 1;
    }

    @Override
    public String toString() {
        return JSON.toJSONString(this);
    }

静态资源

Maven导入

<!-- Mybatis-Plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus</artifactId>
            <version>2.0.9</version>
        </dependency>

具体配置：http://mp.baomidou.com/#/javascript

注意事项

Page<T> selectPage(Page<T> page, Wrapper<T> wrapper); 是Mybatis-Plus内置的方法css
返回的数据，必须有total和rows，先后数据不一致html

responseHandler: function(res) {
                        if(res.code == 1){
                            return {
                                "total": res.data.total,//总页数
                                "rows": res.data.rows   //数据
                             };
                            
                        }
                    }

返回的数据最好使用对象返回，若使用JSON字符串返回到前端，须要调用 JSON.parse()转换下，不然数据匹配不上，不能展现前端