bootstrap-table的使用

最新推荐文章于 2023-01-09 16:21:44 发布

weixin_34268843

最新推荐文章于 2023-01-09 16:21:44 发布

阅读量68

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/kevin2kelly/blog/863628

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.下载资源：http://v3.bootcss.com/

2.创建html，在head中添加获取设备窗口宽度的配置，并定义好table标签，如下：

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container-fluid ">
    <table id="tb_departments"></table>
</div>

3.在html中引入bootstrap-table的js和css

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap.js"></script> <script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap-table.js"></script> <script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap-table-zh-CN.js"></script>

css

<link rel="stylesheet" href="../../assets/lib/bootstrap-3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="../../assets/lib/bootstrap-3.3.5/css/bootstrap-table.css">

4.主要js代码：

var queryParams = function (params) {
    var temp = {   
        //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        rows: params.limit,                       //页面大小
        page: params.offset / params.limit + 1,   //页码
        sort: params.sort,                        //排序字段
        order: params.order,                      //顺序
        "cardId": cardId
    };

$('#tb_departments').bootstrapTable({
    url: Servlets.getCardDealInfo(),  //请求后台的URL（*）
    method: 'get',                    //请求方式（*）
    toolbar: '#toolbar',              //工具按钮用哪个容器
    striped: true,                    //是否显示行间隔色
    cache: false,                     //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                 //是否显示分页（*）
    sortable: false,                  //是否启用排序
    sortName: 'createTime',
    sortOrder: "desc",                 //排序方式
    queryParams: queryParams,         //传递参数（*）
    sidePagination: "server",         //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1,                     //初始化加载第一页，默认第一页
    pageSize: 10,                     //每页的记录行数（*）
    pageList: [10, 30, 50],             //可供选择的每页的行数（*）
    search: true,                     //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
    strictSearch: true, showColumns: true, //是否显示所有的列
    showRefresh: false,                 //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                 //是否启用点击选中行
    height: 700,                         //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度
    uniqueId: "ID",                     //每一行的唯一标识，一般为主键列  
    showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图  
    detailView: false,                 //是否显示父子表
    showColumns: false,                 //不显示列数据选择列表
    onlyInfoPagination: false,         //显示分页工具条和分页条数信息，true只显示条数，不显示分页条
    showPaginationSwitch: false,         //分页条显示开关
    paginationPreText: "上一页",         //自定义上一页按钮显示内容
    paginationNextText: "下一页",         //下一页按钮显示内容  
    paginationHAlign: "left",             //分页条左对齐，默认右对齐 
    paginationDetailHAlign: "right",     //分页详细信息右对齐，默认左对齐 
     /*成功获得服务端数据后回调的函数，这里是进行了样式调整*/
    onLoadSuccess: function () {
        $("div[class='pull-left pagination-detail']").attr("class", "pull-left pagination-detail hidden-xs hidden-sm");
        $("div[class='pull-right pagination']").attr("class", "pull-right pagination");
    },
    //定义列内容
    columns: [
        /*{checkbox: true }, */         //显示选择框
        {
            field: 'orderCode',
            title: '订单号',
            valign: 'middle'           //垂直对齐
        }, {
            field: 'amount',
            title: '交易金额',
            valign: 'middle'
        }, {
            field: 'dealType',
            title: '交易类型',
            valign: 'middle'
        }, {
            field: 'createTime',
            title: '交易时间',
            formatter: timeFormater,     //格式化字段数据
            valign: 'middle'
        }]
});

/**  * 时间格式化  * @param value  * @param row  * @param index  * @returns {*}  */
var timeFormater = function (value, row, index) {
    if (index >= 0) {
        return convertTimestampToLocaleDate(value);
    }
};

var convertTimestampToLocaleDate = function (timestamp) {
    var date = new Date(timestamp);
    return date.toLocaleString('en-utf', {hour12: false});
},

5.后台代码：

view：

public class CardDealView {

    private BigInteger id;
    private Integer dealType;
    private BigDecimal amount;
    private String orderCode;
    private Date createTime;

ResponsePageView：

/**
 * Description: <br/>
 * Description: 通用分页视图
 * @author liyang
 */
public class ResponsePageView<T> {
    private Integer total = 0;
    private List<T> rows = Collections.emptyList();
    private Integer code = OperationCode.FAIL.getValue();
    private String message = OperationCode.FAIL.getReason();

    public ResponsePageView() {}

    public ResponsePageView(Integer total, List<T> rows, Integer code, String message) {
        this.total = total;
        this.rows = rows;
        this.code = code;
        this.message = message;
    }

controller：

/**
 * demo
 *
 * @return
 * @Author liyang
 * @Date 2017-2-27 14:32:11
 */
@RequestMapping(value = "/demo", method = RequestMethod.GET)
@ResponseBody
public ResponsePageView<CardDealView> demo(@RequestParam int limit, @RequestParam int offset) {
    List rows = Collections.emptyList();
    int i = 0;
    try {
        rows = new ArrayList<CardDealView>();
        for (; i < 50; i++) {
            CardDealView cardDealView = new CardDealView();
            cardDealView.setId(BigInteger.valueOf(i));
            cardDealView.setOrderCode("销售部" + i);
            cardDealView.setAmount(BigDecimal.valueOf(i + 0.85));
            cardDealView.setDealType(1);
            cardDealView.setCreateTime(new Date(2017, 1, 2, 23, i, i + 9));
            rows.add(cardDealView);
        }
    } catch (Exception e) {
        logger.error(e.getMessage());
    }
    return new ResponsePageView<CardDealView>(rows.size(), rows.subList(offset, offset + limit), 1, "success");
}