bootstrap-table前后端完整交互（后端PageHelper处理分页）

最新推荐文章于 2022-11-25 19:00:53 发布

爱刘温柔的小猪

最新推荐文章于 2022-11-25 19:00:53 发布

阅读量2.2k

点赞数 1

分类专栏： java 文章标签： bootstrap jquery java

本文链接：https://blog.csdn.net/qq_42969135/article/details/105832093

版权

java 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1、html代码如下
关键的代码是：<table id="userTable"></table>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="shortcut icon" type="image/x-icon" href="../dist/img/favicon.ico">
	<!-- Bootstrap 3.3.6 -->
	<link rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
	<!-- Font Awesome -->
	<link rel="stylesheet" th:href="@{/dist/css/font-awesome.min.css}"/>
	<!-- 以上为公共css -->
	
	<!-- app css -->
	<link rel="stylesheet" th:href="@{/assets/bootstrap-table/bootstrap-table.css}"/>
	<link rel="stylesheet" th:href="@{/assets/toastr/toastr.min.css}"/>
	<link rel="stylesheet" th:href="@{/assets/jsTree/jstree.style.min.css}"/>

</head>
<body>
<!--  <include file="inc.html"></include> -->
<div class="panel-body" style="padding-bottom:0px;">

    <div id="toolbar" class="btn-group">
        <button shiro:hasPermission="sys:productInfo:add" id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
        </button>
        <button shiro:hasPermission="sys:productInfo:update" id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
        </button>
        <button shiro:hasPermission="sys:productInfo:delete" id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
        </button>
        <!-- <button shiro:hasPermission="sys:productInfo:delete" id="btn_select" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 查看详情
        </button> -->
    </div>
    <!-- bootstraptable表格 -->
    <table id="userTable"></table>
</div>
<!-- 点击新增按钮弹出的model层 -->
<div class="modal fade" id="addUserModal">
    <div class="modal-dialog animated" style="width: 500px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center">添加门票</h4>
            </div>
            <div class="modal-body">
                <div class="form">
                    <form id="addUserForm">
                        <div class="form-group">
                        	<div style="display:inline-block;width: 45%;">
	                            <label>门票名称:</label>
	                            <input id="name" class="form-control" type="text"  name="name">
                            </div>
                            <div style="display:inline-block;float:right;width: 45%;">
	                            <label>所属景区:</label>
	                            <select class="form-control" id="shopId" name="shopId">
	                            </select>
                             </div>
                        </div>
                        
                        <div class="form-group">
                        	<div style="display:inline-block;width: 45%;">
	                            <label>价格:</label>
	                       	    <input type="text" class="form-control" id="price" name="price" value="">
                       	    </div>
                       	    <div style="display:inline-block;float:right;width: 45%;">
	                       	    <label class="control-label">折扣价:</label>
	                        	<input type="text" class="form-control" id="discountPrice" name="discountPrice" value="">
                        	</div>
                    	</div>
                    	
                        <div class="form-group">
                       	    <div style="display:inline-block;width: 45%;">
                        		<label class="control-label">总票数:</label>
                        		<input type="number" class="form-control" oninput="if(value.length>11)value=value.slice(0,11)" id="goodsSumNumber" name="goodsSumNumber" value="">
                       	    </div>
                        	<div style="display:inline-block;float:right;width: 45%;">
	                        	<label class="control-label">单人限购票数:</label>
                        		<input type="number" class="form-control" oninput="if(value.length>11)value=value.slice(0,11)" id="limitedNum" name="limitedNum" value="">
                        	</div>
                       	</div>
                    	
                    	<div class="form-group">
                    		<div style="display:inline-block;width: 45%;">
	                        	<label>门票类型:</label>
	                        	<select class="form-control" name="productType" id="productType">
	                        		<option value="2">手动票</option>
	                            	<option value="1">自动票</option>		                            	
	                        	</select>
                        	</div>
                    		<div style="display:inline-block;float:right;width: 45%;">
	                        	<label>是否有效:</label>
	                        	<select class="form-control" name="isValid" id="isValid">
	                            	<option value="1">有效</option>
	                            	<option value="2">冻结</option>
	                        	</select>
	                        </div>
                    	</div>
        	            <div class="form-group">
        	            	<div style="display:inline-block;width: 45%;">
		                        <label class="control-label">售票开始时间:</label>
		                        <input type="text" class="form-control" id="startDate" autocomplete="off" name="startDate" value="" />
	                        </div>
	                        <div style="display:inline-block;float:right;width: 45%;">
	                        	<label class="control-label">售票结束时间:</label>
		                        <input type="text" class="form-control" id="endDate" autocomplete="off" name="endDate" value="" />
	                        </div>
                    	</div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="doAddUser">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 点击修改按钮弹出的model层略 -->
<!-- 点击删除按钮弹出的model层略 -->
<!-- jQuery 2.2.3 -->
<script type="text/javascript" th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!--app js -->
<script type="text/javascript" th:src="@{/assets/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/assets/bootstrap-table/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{/assets/toastr/toastr.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/assets/ExTable.js}"></script>
<script type="text/javascript" th:src="@{/assets/productInfo.js?version=10}"></script>
<script type="text/javascript" th:src="@{/assets/jsTree/jstree.js}"></script>
<script type="text/javascript" th:src="@{/assets/dateTime/laydate.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[@{/}]]*/;
    laydate.render({
 		elem: '#startDate'
 			,type: 'datetime'//显示时间选择
 				,trigger: 'click'//多个时间选择器防止点击闪退
	});
    laydate.render({
    	elem: '#endDate'
    		,type: 'datetime'
    			,trigger: 'click'
	});
    laydate.render({
    	elem: '#startDateForUpd'
    		,type: 'datetime'
    			,trigger: 'click'
	});
    laydate.render({
    	elem: '#endDateForUpd'
    		,type: 'datetime'
    			,trigger: 'click'
	});
    loadUser();
</script>
</body>
</html>

2、js关键代码如下

function loadUser() {
    var $userTable = $('#userTable');
    var settings = {
        url: basePath + "sys/productInfo",
        singleSelect : true,
        queryParams: function (params) {
            return {
                pageSize: params.limit,
                pageNum: params.offset / params.limit + 1,
                search: params.search
             
            };
        },
        columns: [{
            checkbox: true,
            align: 'center',
            valign: 'middle'
        }, {
            field: 'name',
            title: '门票名称',
            formatter:function(value,row,index){
        		return "<a href='javascript:selectAccount("+row.id+")'>" + value + "</a>";
        	}
        },{
            field: 'shopName',
            title: '所属景区'
        }, {
            field: 'price',
            title: '价格'
        }, {
            field: 'discountPrice',
            title: '折扣价格'
        },{
            field: 'discount',
            title: '折扣'
        }, {
            field: 'startDate',
            title: '开始时间',
            formatter: 'dateFormatter'
        },{
            field: 'endDate',
            title: '结束时间',
            formatter:'dateFormatter'
        },{
            field: 'goodsSumNumber',
            title: '总票数'
        },{
            field: 'goodsSurplusNumber',
            title: '剩余票数' 
        },{
            field: 'limitedNum',
            title: '限购票数' 
        },{
            field: 'productType',
            title: '门票类型',
            formatter: function (s) {
                return s == 1 ? "<span class=\"label label-success\">自动票</span>" : "<span class=\"label label-warning\">手动票</span>"
            }
        },{
            field: 'isValid',
            title: '是否有效',
            formatter: function (s) {
                return s == 1 ? "<span class=\"label label-success\">有效</span>" : "<span class=\"label label-warning\">冻结</span>"
            }
        }, {
            title: '操作',
        	field: 'id',
        	width: '108',
            formatter:function(value,row,index){
        		return "<button class='btn-info'  id='addTicketNum'; οnclick='addTicket("+row.id+");'>重置总票数</button>"
        	}
        }/*, {
            title: '详情',
        	field: 'id',
        	width : '17%',
            formatter:function(value,row,index){
        		return "<button class='btn-info'  id='selectAccount'; οnclick='selectAccount("+row.id+");'>查看</button>"
        	}
        }*/, {
            field: 'shopId',
            visible: false
        }
        ]
    };
    $ExTable.initTable($userTable, settings);
     $(".fixed-table-toolbar").find(".search input").attr("placeholder", "搜索景区名");
     //新增
    $('#userTable').bootstrapTable({  
        uniqueId:"id"
    });
    var $remove = $("#btn_delete");
    var $edit = $("#btn_edit");
    var $add = $("#btn_add");
    var $userEditModal = $("#editUserModal");
    var $addUserModal = $("#addUserModal");
    var $goodsSumNumberModal = $("#goodsSumNumberModal");
    var $addTicket = $("#addTicketNum");
    var $selectAccount = $("#btn_select");//查看详情
    //添加
    $add.click(function () {
    	var rows = getRowSelections("#userTable");
    	var shopList = loadShopList();
        var $shopList = $addUserModal.find("#shopId");
        $shopList.empty();
        for (var i = 0; i < shopList.length; i++) {
            $shopList[0].options.add(new Option(shopList[i].name, shopList[i].id));
        }
        $addUserModal.modal("show");
    });
    //model层中的保存按钮
    $addUserModal.find("#doAddUser").click(function () {
    	//提交前判断开始时间和结束时间
    	var startDate = $("#startDate").val();
    	var endDate = $("#endDate").val();
    	var priceForUpd = $("#price").val();
    	var discountPriceForUpd = $("#discountPrice").val();
    	var goodsSumNumber = $("#goodsSumNumber").val();
    	var date = new Date();
    	if(priceForUpd == ''){
    		toastr.warning('价格不能为空!');
            return;
    	}
    	if(discountPriceForUpd == ''){
    		toastr.warning('折扣价格不能为空!');
            return;
    	}if(goodsSumNumber == ''){
    		toastr.warning('总票数不能为空!');
            return;
    	}
    	if(startDate == '' && endDate != ''){
    		toastr.warning('开始时间不能为空!');
            return;
    	}
    	if(startDate != '' && endDate == ''){
    		toastr.warning('结束时间不能为空!');
            return;
    	}
    	if(startDate > endDate){
    		toastr.warning('开始时间不能大于结束时间!');
            return;
    	}
        $.ajax({
            url: basePath + "sys/productInfo/add",
            data: $("#addUserForm").serialize(),
            type: "post",
            success: function (da) {
                $addUserModal.modal("hide");
                $userTable.bootstrapTable("refresh");
            }
        });
       function selectAccount(id){
	 var rs=$('#userTable').bootstrapTable('getRowByUniqueId',id);
	 //alert(JSON.stringify(rs));
	//var rows = getRowSelections("#userTable");
    $("#selectAccountModal").find("#exampleModalLabel").text("查看门票信息详情");
    $("#selectAccountModal").find("#id").val(rs.id);
    $("#selectAccountModal").find("#name").val(rs.name);
    $("#selectAccountModal").find("#priceForUpd").val(rs.price);
    $("#selectAccountModal").find("#discountPriceForUpd").val(rs.discountPrice);
    $("#selectAccountModal").find("#goodsSumNumber").val(rs.goodsSumNumber);
    $("#selectAccountModal").find("#startDateForUpd").val(dateFormatter(rs.startDate));
    $("#selectAccountModal").find("#endDateForUpd").val(dateFormatter(rs.endDate));
    $("#selectAccountModal").find("#isValid").val(rs.isValid);
    $("#selectAccountModal").find("#goodsSurplusNumber").val(rs.goodsSurplusNumber);
    $("#selectAccountModal").find("#goodsSumNumber").val(rs.goodsSumNumber);
    if(rs.productType == '1'){
    	$("#selectAccountModal").find("#productType").val("自动票");
    }else{
    	$("#selectAccountModal").find("#productType").val("手动票");
    }
    if(rs.isValid == '1'){
    	$("#selectAccountModal").find("#isValid").val("有效");
    }else{
    	$("#selectAccountModal").find("#isValid").val("无效");
    }
    // 获取景点列表
    var rows = getRowSelections("#userTable");
	var shopList = loadShopList();
    var $shopList = $("#selectAccountModal").find("#shopId");
    $shopList.empty();
    $("#selectAccountModal").find("#shopId").val(rs.shopName);
    $("#selectAccountModal").modal("show");
} 
    })

3、Controller中代码如下

@RequiresPermissions("sys:productInfo:list")
    @Log("获取用户列表")
    @ApiLimit("3,1") //每个用户，5秒，只能调用6次
    @GetMapping("sys/productInfo")
    @ResponseBody
    public PageListVO getShopInfoList(TableRequest tableRequest) {
        PageListVO pageListVO = productInfoService.findProductInfoList(tableRequest);
		return pageListVO;
        
    }

4、为了分页和模糊查询，封装的TableRequest如下

package cn.it.ssm.common.vo;

import java.io.Serializable;

public class TableRequest implements Serializable {

    /**
	 * 
	 */
	private static final long serialVersionUID = 4840650793454360882L;
	private Integer pageSize;
    private Integer pageNum;
    private String search;
    private String orderCodeForSearch;


    public TableRequest() {
    }

    public TableRequest(Integer pageSize, Integer pageNum, String search) {
        this.pageSize = pageSize;
        this.pageNum = pageNum;
        this.search = search;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getPageNum() {
        return pageNum;
    }

    public void setPageNum(Integer pageNum) {
        this.pageNum = pageNum;
    }

    public String getSearch() {
        return search;
    }

    public void setSearch(String search) {
        this.search = search;
    }

	public String getOrderCodeForSearch() {
		return orderCodeForSearch;
	}

	public void setOrderCodeForSearch(String orderCodeForSearch) {
		this.orderCodeForSearch = orderCodeForSearch;
	}
}

5、封装的PageListVO如下

package cn.it.ssm.common.vo;

import java.io.Serializable;
import java.util.List;

public class PageListVO implements Serializable {

    private Long total;
    private List rows;

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }
}

6、service层关键代码如下

@Override
	public PageListVO findProductInfoList(TableRequest tableRequest) {
		if (tableRequest == null) {
            tableRequest = new TableRequest(5, 1, null);
        } else {
            if (tableRequest.getPageNum() == null) tableRequest.setPageNum(1);
            if (tableRequest.getPageSize() == null) tableRequest.setPageSize(5);
        }
        PageHelper.startPage(tableRequest.getPageNum(), tableRequest.getPageSize());
        List<ShopProductInfo> ShopProductInfoList = productInfoMapper.findProductInfoList(tableRequest.getSearch());      
        PageInfo<ShopProductInfo> pageInfo = new PageInfo<>(ShopProductInfoList);
        PageListVO pageListVO = new PageListVO();
        pageListVO.setRows(pageInfo.getList());
        pageListVO.setTotal(pageInfo.getTotal());
        return pageListVO;
	}

7、mapper层关键代码如下

List<ShopProductInfo> findProductInfoList(@Param("search") String search);

8、sql如下

<select id="findProductInfoList" resultType="cn.it.ssm.domain.auto.ShopProductInfo">
  SELECT
     product_info.id,
     product_info.name,
     shop_info.name as shopName,
     product_info.shopId,
     product_info.price,
     product_info.discountPrice,
     product_info.discount,
     product_info.isValid,
     product_info.productType,
     product_info.createDate,
     product_info.createBy,
     product_info.lastModifyDate,
     product_info.lastModifyBy,
     product_info.startDate,
     product_info.endDate,
     product_info.goodsSumNumber,
     product_info.goodsSurplusNumber,
     product_info.limitedNum
    FROM
   		product_info  left join shop_info  on  product_info.shopId = shop_info.id
	<where>
		<if test="search !=null and search !='' ">
			product_info.name LIKE '%${search}%' or shop_info.name LIKE '%${search}%'
		</if>
	</where>
   ORDER BY id
  </select>

爱刘温柔的小猪

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table前后端完整交互（后端PageHelper处理分页）

1、html代码如下关键的代码是：<table id="userTable"></table><!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><head> ...
复制链接

扫一扫