bootstrap Table的使用方法总结

本文为大家分享了bootstrap Table的使用方法,供大家参考,具体内容如下

官网资料

效果图:

bootstrap Table的使用方法总结_第1张图片

案例:

html



 
<%--     --%>
<%--     --%>
<%--          --%>
<%--          --%>
<%--          --%>
<%--     --%>
<%--     --%>

IDItem NameItem Price

javascript

$(document).ready(function () {
 
    //表格插件
    mytable=$('#ffServerSystemCheckListTable').bootstrapTable({
 
        //请求方法
        method: 'post',
        //类型json
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        //显示检索按钮
        //showSearch: false,
        //显示刷新按钮
        showRefresh: false,
        //显示切换手机试图按钮
        showToggle: false,
        //显示 内容列下拉框
        showColumns: false,
        //显示到处按钮
        showExport: false,
        //显示切换分页按钮
        showPaginationSwitch: false,
        //最低显示2行
        minimumCountColumns: 2,
        //是否显示行间隔色
        //striped: true,
        //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        cache: false,
        //是否显示分页(*)
        pagination: true,
        //排序方式
        sortOrder: "asc",
        //初始化加载第一页,默认第一页
        pageNumber: 1,
        //每页的记录行数(*)
        pageSize: 10,
        //可供选择的每页的行数(*)
        pageList: [10, 25, 50, 100],
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: "${ctx}/ff/server/ffServerSystemCheck/data",
        //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
        //queryParamsType:'',
        查询参数,每次调用是会带上这个参数,可自定义
        queryParams: function (params) {
            var searchParam = $("#searchForm").serializeJSON();
            searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
            searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
            searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
            return searchParam;
        },
        //分页方式:client客户端分页,server服务端分页(*)
        sidePagination: "server",
        // contextMenuTrigger:"right",//pc端 按右键弹出菜单
        // contextMenuTriggerMobile: "press",//手机端 弹出菜单,click:单击, press:长按。
        // contextMenu: '#context-menu',
        onClickRow: function (row, $el) {
            rowId = row.id;
        },
        onShowSearch: function () {
            $("#search-collapse").slideToggle();
        },
        responseHandler: function (res) {//用于接收其他参数
            return res;
        },
        onPreBody: function (res) {},
        onLoadSuccess: function() {},
        onPostHeader: function () {},
        onAll: function () {},
        columns: [
            [
                {
                    field: 'cityName',
                    title: '城市公司',
                    rowspan: 2,
                    formatter: function (value, row, index) {
                        return value;
 
                    }
                }
                , {
                field: 'projectName',
                title: '项目名称',
                rowspan: 2
            }, {
                title: '首页轮播',
                colspan: 2,
                align: 'center'
            }, {
                title: '消息',
                colspan: 2,
                align: 'center'
            }, {
                title: '海报模板',
                colspan: 2,
                align: 'center'
            }, {
                title: '楼盘动态',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目卖点',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目海报',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目视频',
                colspan: 2,
                align: 'center'
            }],
            [{
                field: 'newsCount',
                title: '更新次数',
            }
                , {
                field: 'newsState',
                title:"-",
                class:'newsTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                    // return jp.getDictLabel(${fns:toJson(fns:getDictList('cooperation_flag'))}, value, "-");
                }
 
            }
                , {
                field: 'msgCount',
                title: '更新次数'
            }
                , {
                field: 'msgState',
                title: '-',
                class:'msgTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
 
            }
                , {
                field: 'tempCount',
                title: '更新次数'
            }, {
                field: 'tempState',
                title: '-',
                class:'tempTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
 
            },
                {
                    field: 'houseCount',
                    title: '更新次数'
                }, {
                field: 'houseState',
                title: '-',
                class:'houseTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
 
            },
                {
                    field: 'sellCount',
                    title: '更新次数'
 
                }, {
                field: 'sellState',
                title: '-',
                class:'sellTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
 
            },
                {
                    field: 'postCount',
                    title: '更新次数'
 
                }, {
                field: 'postState',
                title: '-',
                class:'postTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
 
            }, {
                field: 'videoCount',
                title: '更新次数'
 
            }
                , {
                field: 'videoState',
                title: '-',
                class:'videoTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "不合格";
                    }
                    return value;
                }
            }
 
            ]
 
        ]
    });

 
    if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//如果是移动端
        $('#ffServerSystemCheckListTable').bootstrapTable("toggleView");
    }
    $('#ffServerSystemCheckListTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $('#remove').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
        $('#batchSet').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
        $('#view,#edit').prop('disabled', $('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length != 1);
    });
 
 
    // 绑定查询按扭
    $("#search").click("click", function () {
        //重新加载表格参数
        // $('#ffServerSystemCheckListTable').bootstrapTable("refreshOptions", {
        //     //url : path + "/api/peopledataInfo/getPeopleInfoList", // 获取数据的地址
        //     columns : [],
        //
        // });
        //动态表头设置
        $.ajax({
            url: "${ctx}/ff/server/ffServerSystemCheck/checkInfo",
            // type : "POST",
            data: $("#searchForm").serialize(),
            success: function (data) {
                $(".newsTitle .th-inner").html(data.newsTitle);
                $(".msgTitle .th-inner").html(data.msgTitle);
                $(".tempTitle .th-inner").html(data.tempTitle);
                $(".houseTitle .th-inner").html(data.houseTitle);
                $(".sellTitle .th-inner").html(data.sellTitle);
                $(".postTitle .th-inner").html(data.postTitle);
                $(".videoTitle .th-inner").html(data.videoTitle);
                $('#ffServerSystemCheckListTable').bootstrapTable('refresh');
            }
        });
 
 
    });
 
 
 
});

Java

controller:

@ResponseBody
@RequestMapping(value = "data")
public Map data(HttpServletRequest request, HttpServletResponse response) {
        Page page = server.findWebPage(new Page(request, response));
        Map map = new HashMap();
  map.put("rows", page.getList());
  map.put("total", page.getCount());
        return data;
    }

xml:

Page对象

/**
 * Copyright © 2015-2020 JeePlus All rights reserved.
 */
package com.jeeplus.core.persistence;
 
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Pattern;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.lang3.StringUtils;
 
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.jeeplus.common.config.Global;
import com.jeeplus.common.utils.CookieUtils;
 
/**
 * 分页类
 * @author jeeplus
 * @version 2016-7-2
 * @param 
 */
public class Page {
 
 protected int pageNo = 1; // 当前页码
 protected int pageSize = Integer.valueOf(Global.getConfig("page.pageSize")); // 页面大小,设置为“-1”表示不进行分页(分页无效)
 
 protected long count;// 总记录数,设置为“-1”表示不查询总数
 
 protected int first;// 首页索引
 protected int last;// 尾页索引
 protected int prev;// 上一页索引
 protected int next;// 下一页索引
 
 private boolean firstPage;//是否是第一页
 private boolean lastPage;//是否是最后一页
 
 protected int length = 8;// 显示页面长度
 protected int slider = 1;// 前后显示页面长度
 
 private List list = new ArrayList();
 
 private String orderBy = ""; // 标准查询有效, 实例: updatedate desc, name asc
 
 protected String funcName = "page"; // 设置点击页码调用的js函数名称,默认为page,在一页有多个分页对象时使用。
 
 protected String funcParam = ""; // 函数的附加参数,第三个参数值。
 
 private String message = ""; // 设置提示消息,显示在“共n条”之后
 
 public Page() {
  this.pageSize = -1;
 }
 
 /**
  * 构造方法
  * @param request 传递 repage 参数,来记住页码
  * @param response 用于设置 Cookie,记住页码
  */
 public Page(HttpServletRequest request, HttpServletResponse response){
  this(request, response, -2);
 }
 
 /**
  * 构造方法
  * @param request 传递 repage 参数,来记住页码
  * @param response 用于设置 Cookie,记住页码
  * @param defaultPageSize 默认分页大小,如果传递 -1 则为不分页,返回所有数据
  */
 public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize){
  // 设置页码参数(传递repage参数,来记住页码)
  String no = request.getParameter("pageNo");
  if (StringUtils.isNumeric(no)){
   CookieUtils.setCookie(response, "pageNo", no);
   this.setPageNo(Integer.parseInt(no));
  }else if (request.getParameter("repage")!=null){
   no = CookieUtils.getCookie(request, "pageNo");
   if (StringUtils.isNumeric(no)){
    this.setPageNo(Integer.parseInt(no));
   }
  }
  // 设置页面大小参数(传递repage参数,来记住页码大小)
  String size = request.getParameter("pageSize");
  if (StringUtils.isNumeric(size)){
   CookieUtils.setCookie(response, "pageSize", size);
   this.setPageSize(Integer.parseInt(size));
  }else if (request.getParameter("repage")!=null){
   no = CookieUtils.getCookie(request, "pageSize");
   if (StringUtils.isNumeric(size)){
    this.setPageSize(Integer.parseInt(size));
   }
  }else if (defaultPageSize != -2){
   this.pageSize = defaultPageSize;
  }else if ("-1".equals(size)){
   this.pageSize = -1;
  }
  // 设置排序参数
  String orderBy = request.getParameter("orderBy");
  if (StringUtils.isNotBlank(orderBy)){
   this.setOrderBy(orderBy);
  }
 }
 
 /**
  * 构造方法
  * @param pageNo 当前页码
  * @param pageSize 分页大小
  */
 public Page(int pageNo, int pageSize) {
  this(pageNo, pageSize, 0);
 }
 
 /**
  * 构造方法
  * @param pageNo 当前页码
  * @param pageSize 分页大小
  * @param count 数据条数
  */
 public Page(int pageNo, int pageSize, long count) {
  this(pageNo, pageSize, count, new ArrayList());
 }
 
 /**
  * 构造方法
  * @param pageNo 当前页码
  * @param pageSize 分页大小
  * @param count 数据条数
  * @param list 本页数据对象列表
  */
 public Page(int pageNo, int pageSize, long count, List list) {
  this.setCount(count);
  this.setPageNo(pageNo);
  this.pageSize = pageSize;
  this.list = list;
 }
 
 /**
  * 初始化参数
  */
 public void initialize(){
    
  //1
  this.first = 1;
  
  this.last = (int)(count / (this.pageSize < 1 ? 20 : this.pageSize) + first - 1);
  
  if (this.count % this.pageSize != 0 || this.last == 0) {
   this.last++;
  }
 
  if (this.last < this.first) {
   this.last = this.first;
  }
  
  if (this.pageNo <= 1) {
   this.pageNo = this.first;
   this.firstPage=true;
  }
 
  if (this.pageNo >= this.last) {
   this.pageNo = this.last;
   this.lastPage=true;
  }
 
  if (this.pageNo < this.last - 1) {
   this.next = this.pageNo + 1;
  } else {
   this.next = this.last;
  }
 
  if (this.pageNo > 1) {
   this.prev = this.pageNo - 1;
  } else {
   this.prev = this.first;
  }
  
  //2
  if (this.pageNo < this.first) {// 如果当前页小于首页
   this.pageNo = this.first;
  }
 
  if (this.pageNo > this.last) {// 如果当前页大于尾页
   this.pageNo = this.last;
  }
  
 }
 
 /**
  * 默认输出当前分页标签 
  * 
${page}
*/ @Override public String toString() { StringBuilder sb = new StringBuilder(); sb.append("
"); // sb.append(""); long startIndex = (pageNo-1)*pageSize + 1; long endIndex = pageNo*pageSize <=count? pageNo*pageSize:count; sb.append("
"); sb.append("显示第 "+startIndex+" 到第 "+ endIndex +" 条记录,总共 "+count+" 条记录"); sb.append("每页显示 "); sb.append(""); sb.append("
    "); sb.append("
  • 10
  • "); sb.append("
  • 25
  • "); sb.append("
  • 50
  • "); sb.append("
  • 100
  • "); sb.append("
"); sb.append("
条记录
"); sb.append("
"); // sb.append("

每页 条记录,显示 " +startIndex+ " 到 "+ endIndex +" 条,共 "+count+" 条

"); // sb.append("
"); // sb.append("
"); sb.append("
"); sb.append("
    "); if (pageNo == first) {// 如果是首页 sb.append("
  • \n"); sb.append("
  • \n"); } else { sb.append("
  • \n"); sb.append("
  • \n"); } int begin = pageNo - (length / 2); if (begin < first) { begin = first; } int end = begin + length - 1; if (end >= last) { end = last; begin = end - length + 1; if (begin < first) { begin = first; } } if (begin > first) { int i = 0; for (i = first; i < first + slider && i < begin; i++) { sb.append("
  • " + (i + 1 - first) + "
  • \n"); } if (i < begin) { sb.append("
  • ...
  • \n"); } } for (int i = begin; i <= end; i++) { if (i == pageNo) { sb.append("
  • " + (i + 1 - first) + "
  • \n"); } else { sb.append("
  • " + (i + 1 - first) + "
  • \n"); } } if (last - end > slider) { sb.append("
  • ...
  • \n"); end = last - slider; } for (int i = end + 1; i <= last; i++) { sb.append("
  • " + (i + 1 - first) + "
  • \n"); } if (pageNo == last) { sb.append("
  • \n"); sb.append("
  • \n"); } else { sb.append("
  • " + "
  • \n"); sb.append("
  • " + "
  • \n"); } sb.append("
"); sb.append("
"); sb.append("
"); // sb.insert(0,"
    \n").append("
\n"); // sb.append("
"); // sb.insert(0,"
\n").append("
\n"); return sb.toString(); } protected String getSelected(int pageNo, int selectedPageNo){ if(pageNo == selectedPageNo){ //return "selected"; return "active"; }else{ return ""; } } /** * 获取分页HTML代码 * @return */ public String getHtml(){ return toString(); } // public static void main(String[] args) { // Page p = new Page(3, 3); // System.out.println(p); // System.out.println("首页:"+p.getFirst()); // System.out.println("尾页:"+p.getLast()); // System.out.println("上页:"+p.getPrev()); // System.out.println("下页:"+p.getNext()); // } /** * 获取设置总数 * @return */ public long getCount() { return count; } /** * 设置数据总数 * @param count */ public void setCount(long count) { this.count = count; if (pageSize >= count){ pageNo = 1; } } /** * 获取当前页码 * @return */ public int getPageNo() { return pageNo; } /** * 设置当前页码 * @param pageNo */ public void setPageNo(int pageNo) { this.pageNo = pageNo; } /** * 获取页面大小 * @return */ public int getPageSize() { return pageSize; } /** * 设置页面大小(最大500) * @param pageSize */ public void setPageSize(int pageSize) { this.pageSize = pageSize <= 0 ? 10 : pageSize;// > 500 ? 500 : pageSize; } /** * 首页索引 * @return */ @JsonIgnore public int getFirst() { return first; } /** * 尾页索引 * @return */ @JsonIgnore public int getLast() { return last; } /** * 获取页面总数 * @return getLast(); */ @JsonIgnore public int getTotalPage() { return getLast(); } /** * 是否为第一页 * @return */ @JsonIgnore public boolean isFirstPage() { return firstPage; } /** * 是否为最后一页 * @return */ @JsonIgnore public boolean isLastPage() { return lastPage; } /** * 上一页索引值 * @return */ @JsonIgnore public int getPrev() { if (isFirstPage()) { return pageNo; } else { return pageNo - 1; } } /** * 下一页索引值 * @return */ @JsonIgnore public int getNext() { if (isLastPage()) { return pageNo; } else { return pageNo + 1; } } /** * 获取本页数据对象列表 * @return List */ public List getList() { return list; } /** * 设置本页数据对象列表 * @param list */ public Page setList(List list) { this.list = list; initialize(); return this; } /** * 获取查询排序字符串 * @return */ @JsonIgnore public String getOrderBy() { // SQL过滤,防止注入 String reg = "(?:')|(?:--)|(/\\*(?:.|[\\n\\r])*?\\*/)|" + "(\\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|into|drop|execute)\\b)"; Pattern sqlPattern = Pattern.compile(reg, Pattern.CASE_INSENSITIVE); if (sqlPattern.matcher(orderBy).find()) { return ""; } return orderBy; } /** * 设置查询排序,标准查询有效, 实例: updatedate desc, name asc */ public void setOrderBy(String orderBy) { this.orderBy = orderBy; } /** * 获取点击页码调用的js函数名称 * function ${page.funcName}(pageNo){location="${ctx}/list-${category.id}${urlSuffix}?pageNo="+i;} * @return */ @JsonIgnore public String getFuncName() { return funcName; } /** * 设置点击页码调用的js函数名称,默认为page,在一页有多个分页对象时使用。 * @param funcName 默认为page */ public void setFuncName(String funcName) { this.funcName = funcName; } /** * 获取分页函数的附加参数 * @return */ @JsonIgnore public String getFuncParam() { return funcParam; } /** * 设置分页函数的附加参数 * @return */ public void setFuncParam(String funcParam) { this.funcParam = funcParam; } /** * 设置提示消息,显示在“共n条”之后 * @param message */ public void setMessage(String message) { this.message = message; } /** * 分页是否有效 * @return this.pageSize==-1 */ @JsonIgnore public boolean isDisabled() { return this.pageSize==-1; } /** * 是否进行总数统计 * @return this.count==-1 */ @JsonIgnore public boolean isNotCount() { return this.count==-1; } /** * 获取 Hibernate FirstResult */ public int getFirstResult(){ int firstResult = (getPageNo() - 1) * getPageSize(); if (firstResult >= getCount() || firstResult<0) { firstResult = 0; } return firstResult; } /** * 获取 Hibernate MaxResults */ public int getMaxResults(){ return getPageSize(); } // /** // * 获取 Spring data JPA 分页对象 // */ // public Pageable getSpringPage(){ // List orders = new ArrayList(); // if (orderBy!=null){ // for (String order : StringUtils.split(orderBy, ",")){ // String[] o = StringUtils.split(order, " "); // if (o.length==1){ // orders.add(new Order(Direction.ASC, o[0])); // }else if (o.length==2){ // if ("DESC".equals(o[1].toUpperCase())){ // orders.add(new Order(Direction.DESC, o[0])); // }else{ // orders.add(new Order(Direction.ASC, o[0])); // } // } // } // } // return new PageRequest(this.pageNo - 1, this.pageSize, new Sort(orders)); // } // // /** // * 设置 Spring data JPA 分页对象,转换为本系统分页对象 // */ // public void setSpringPage(org.springframework.data.domain.Page page){ // this.pageNo = page.getNumber(); // this.pageSize = page.getSize(); // this.count = page.getTotalElements(); // this.list = page.getContent(); // } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(bootstrap Table的使用方法总结)