日期格式在前端进行转换,后端只需要传递Date对象。写代码日志打印格式Logger。 Mybatis写sql语句使用like要使用CONCAT方法拼装字符串

前端使用Bootstrap进行表格检索数据,分页,日期格式转换

1. 页面引入需要的js、css

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
	rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

2. 表格插件的用法

$(function() {
        /*初始化表格*/
        initBootStrapTable(base_url+'/adminv2/empOpenCity/getList');
        function initBootStrapTable(url) {
            //先销毁表格
            $('#user_list').bootstrapTable("destroy");
            //加载表格
            $('#user_list').bootstrapTable({
                url: url,
                method:'get',
                toobar:'#toolbar',
                cache: false,
                striped: true,                          //是否显示行间隔色
                pagination: true,                  //是否显示分页(*)
                sidePagination: 'server',           //分页方式:client客户端分页,server服务端分页(*)
                dataField: "rows",					//后端传递的要遍历的list集合名字必须是rows
                pageNumber:1,                           //初始化加载第一页,默认第一页
                pageSize: 10,                           //每页的记录行数(*)
                pageList: [5, 10, 30, 50],            //可供选择的每页的行数(*)
                showColumns: true,                      //是否显示所有的列
                showRefresh: true,                      //是否显示刷新按钮
                // minimumCountColumns: 2,              //最少允许的列数
                clickToSelect: true,                    //是否启用点击选中行
                // height: 500,                         //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "id",                         //每一行的唯一标识,一般为主键列
                showToggle:true,                     //是否显示详细视图和列表视图的切换按钮
                cardView:false,                        //是否显示详细视图
                singleSelect:true,                    // 设置为true将禁止多选
                queryParams: function (params) { //传递给后端的参数
                    var temp = {
                        pageSize:params.limit, //每页显示数量
                        page:params.offset   //起始索引
                        // page:(params.offset / params.limit) + 1   //当前页码
                    };
                    return temp;
                },
                columns:[{
                    checkbox:true
                },
                    {
                        field:'ouCode',
                        title:'地市编码',

                    },
                    {
                        field:'ouName',
                        title:'地市名称',

                    },
                    {
                        field:'isOpen',
                        title:'是否开通',

                    },
                    {
                        field:'createTimeString',
                        title:'创建时间',
                        formatter:formatterDate
                    },
                    {
                        field:'updateTime',
                        title:'修改时间',
                        formatter:formatterDate
                    },
					 {
						title : '性别',
						field : 'sex',
						formatter : formatSex,//对返回的数据进行处理再显示
					},

                    {
                    	title:'操作',
                    	field:'productid',
                    	formatter : operation //对资源进行操作
                	}
                ]
            });
        }
});

//=================================显示1-->男,2-->女==================
 //value代表该列的值,row代表当前对象
function formatSex(value, row, index) {
	return value == 1 ? "男" : "女";
	//或者 return row.sex == 1 ? "男" : "女";
}

//======================================操作===========================
//value代表该列的值,row代表当前对象
    function operation(value, row, index) {
        var htm = "<button type=\"button\" class=\"btn btn-info\" οnclick=\"onDeleteProduct('" + row.productid + "')\">删除</button>";
        return htm;
    }

//-============================后端传递过来的Date对象,进行相应的格式化处理=======================
/*日期格式化*/
        function formatterDate(val) {
            return dateFormatter(val);
        }
        function dateFormatter(val){
            if(val==null||val==''){
                return '';
            }
            var oldTime = (new Date(val)).getTime();
            var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
            return curTime;
        }
        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        };


后端传递给前端的封装数据ResultMsg

		List<EmpOpenCity> list = empOpenCityMapper.getList(empOpenCity);
        int rowCount = empOpenCityMapper.getRowCount(empOpenCity);
        ResultMsg resultMsg = new ResultMsg();
        resultMsg.setRows(list);  //遍历的集合数据
        resultMsg.setTotal(rowCount); //总条数  ,属性名字必须要一样
        resultMsg.setResult(true);
        return resultMsg;
EmpOpenCity.java 

EmpOpenCity extends Page implements Serializable{
	//EmpOpenCity封装的是前端表格需要展示的数据
}

Page.java
public class Page {
    //每页显示的数量
    private int pageSize;  //名字要和前端属性名一致,否则传递不过来
    // // sql语句起始索引
    private int page;     //名字要和前端属性名一致,否则传递不过来

}

参考这个链接

参考这个链接。。。。。。。。。。。。。

Mybatis写sql语句使用like要使用CONCAT方法拼装字符串

LIKE CONCAT(’%’,#{name},’%’)

<select id="getUserListPage" resultType="com.debo.common.User">
	SELECT * FROM user WHERE 1 = 1
	<if test="name!=null and name !=''">
		AND name LIKE CONCAT('%',#{name},'%')
	</if>
	<if test="tel!=null and tel !=''">
		AND tel = #{tel}
	</if>
</select>

写代码日志打印格式Logger

private final Logger logger = LoggerFactory.getLogger(this.getClass);

如果你不确定的时候,就打印出来logger日志。

打印格式
logger.info("==类名==方法名==in传入的参数",param);
logger.info("==类名==方法名==info",param);

不确定的时候,一般要try-cath

logger.error("==类名==方法名==error",e);  //输出错误信息,并能够输出堆栈错误信息。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值