BootStrap-table的简单使用

最新推荐文章于 2021-09-08 15:26:52 发布

辉~情

最新推荐文章于 2021-09-08 15:26:52 发布

阅读量131

点赞数 1

本文链接：https://blog.csdn.net/bigtree_/article/details/98751916

版权

BootStrap-table的简单使用

相关内容
简述
前台HTML
js文件
pojo
Controller
页面效果

简述

无数据库，手动构造数据
没有查询条件
可以分页

前台HTML

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>BootStrap Table使用</title>
  <!--[if lt IE 9]>
  <meta http-equiv="refresh" content="0;ie.html"/>
  <![endif]-->
  <link th:href="@{/common/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/bootstrap-combined.min.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/layoutit.css}" rel="stylesheet"/>
  <!--引入bootstrap-table  css样式-->
  <link th:href="@{/common/bootstrap-table/bootstrap-table.css}" rel="stylesheet"/>
  <style type="text/css">  </style>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
  <!--查询框这里没有使用-->
  <div class="panel panel-default">
    <div class="panel-heading">查询条件</div>
    <div class="panel-body">
      <form id="formSearch" class="form-horizontal">
        <div class="form-group" style="margin-top:15px">
          <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="txt_search_departmentname">
          </div>
          <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="txt_search_statu">
          </div>
          <div class="col-sm-1" style="text-align:left;">
            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!--按钮 -->
  <div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
    <button id="btn_edit" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    </button>
    <button id="btn_delete" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
  </div>
  <!--列表主题-->
  <table id="tb_departments"></table>
</div>
<!-- 全局js -->
<script th:src="@{/common/jquery/jquery.min.js}"></script>
<script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>
<!--引入bootstrap-table  js文件-->
<script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>
<script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<!--本页面js-->
<script th:src="@{/js/testBootStrap.js}"></script>
</body>
</html>

js文件

$(function () {

  //1.初始化Table
  var oTable = new TableInit();
  oTable.Init();

  // //2.初始化Button的点击事件
  // var oButtonInit = new ButtonInit();
  // oButtonInit.Init();

});

var TableInit = function () {
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $('#tb_departments').bootstrapTable({
      //---------简版----------
      // url: '/testBootStrap/getData',
      // method: 'get',
      // striped: true,
      // toolbar: "#toolbar",
      // sidePagination: "true",
      // striped: true, // 是否显示行间隔色
      // //search : "true",
      // uniqueId: "ID",
      // pageSize: "5",
      // pagination: true, // 是否分页
      // sortable: true, // 是否启用排序
      //------------------------------
      url: '/testBootStrap/getData2',         //请求后台的URL（*）
      method: 'get',                      //请求方式（*）
      toolbar: '#toolbar',                //工具按钮用哪个容器
      striped: true,                      //是否显示行间隔色
      cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
      pagination: true,                   //是否显示分页（*）
      sortable: false,                     //是否启用排序
      sortOrder: "desc",                   //排序方式
      // queryParams: oTableInit.queryParams,//传递参数（*）
      sidePagination: "true"/*"server"*/,           //分页方式：client客户端分页，server服务端分页（*）
      // pageNumber: 1,                       //初始化加载第一页，默认第一页
      pageSize: 10,                       //每页的记录行数（*）
      pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
      // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
      strictSearch: true,
      showColumns: true,                  //是否显示所有的列
      showRefresh: true,                  //是否显示刷新按钮
      minimumCountColumns: 2,             //最少允许的列数
      clickToSelect: true,                //是否启用点击选中行
      height: 592,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
      uniqueId: "id",                     //每一行的唯一标识，一般为主键列
      // showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
      // cardView: false,                    //是否显示详细视图
      // detailView: false,                   //是否显示父子表
      columns: [{
        checkbox: true
      }, {
        //field: 'Number',//可不加
        title: 'Number',//标题  可不加
        formatter: function (value, row, index) {
          return index+1;
        }
      },{
        field: 'id',
        title: 'ID'
      }, {
        field: 'name',
        title: '名称'
      }, {
        field: 'parentName',
        title: '上级'
      }, {
        field: 'level',
        title: '级别'
      },{
        title: '操作',
        field: 'id',
        align: 'center',
        formatter:function(value,row,index){
          var e = '<a href="#" mce_href="#" οnclick="edit(\''+ row.id + '\')">编辑</a> ';
          var d = '<a href="#" mce_href="#" οnclick="del(\''+ row.id +'\')">删除</a> ';
          return e+d;
        }
      }]
    });
  };

  //得到查询的参数
  oTableInit.queryParams = function (params) {
    var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
      limit: params.limit,   //页面大小
      offset: params.offset,  //页码
      departmentname: $("#txt_search_departmentname").val(),
      statu: $("#txt_search_statu").val()
    };
    return temp;
  };
  return oTableInit;
};

// var ButtonInit = function () {
//   var oInit = new Object();
//   var postdata = {};
//
//   oInit.Init = function () {
//     //初始化页面上面的按钮事件
//   };
//
//   return oInit;
// };

pojo

package com.example.cetcdemo.pojo;

/**
 * Description:
 *
 * @Author: liuyinhui.cn
 * @Date: Created in 2019/8/6 17:25
 */
public class Menu {

  private Integer id;
  private String name;
  private String parentName;
  private Integer level;

  public Menu() {
  }

  public Menu(Integer id, String parentName, Integer level, String desc) {
    this.id = id;
    this.parentName = parentName;
    this.level = level;
    this.name = desc;
  }

  @Override
  public String toString() {
    return "Menu{" +
        "id=" + id +
        ", parentName='" + parentName + '\'' +
        ", level='" + level + '\'' +
        ", name='" + name + '\'' +
        '}';
  }

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  public String getParentName() {
    return parentName;
  }

  public void setParentName(String parentName) {
    this.parentName = parentName;
  }

  public Integer getLevel() {
    return level;
  }

  public void setLevel(Integer level) {
    this.level = level;
  }

  public String getName() {
    return name;
  }

  public void setName(String desc) {
    this.name = desc;
  }
}

Controller

package com.example.cetcdemo.controller;

import com.example.cetcdemo.pojo.Menu;
import java.util.ArrayList;
import java.util.HashMap;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * bootstrap测试
 * @param null
 * @author liuyinhui.cn
 * @create 2019/8/6 18:07
 * @return
 * @throws
 */
@Controller
@RequestMapping("/testBootStrap")
public class TestBootStrapController {
/***
 * 跳转页面
 * @author liuyinhui.cn
 * @create 2019/8/6 18:07
 * @return java.lang.String
 * @throws
 */
  @GetMapping()
  public String init() {
    return "/testBootStrap2";
  }

  /***
   * 获取数据  ---   列表无分页无查询条件
   * @author liuyinhui.cn
   * @create 2019/8/6 18:09
   * @return java.util.ArrayList
   * @throws
   */
  @RequestMapping(value = "/getData", method = RequestMethod.GET)
  @ResponseBody
  public ArrayList getData() {
    ArrayList<Menu> Menus = new ArrayList<>();
    Integer[] level = {5,1, 2, 3, 4};
    Menu emp;
    for (int i = 1; i < 51; i++) {
      emp = new Menu(i, "1", level[i % 5], "测试" + i);
      Menus.add(emp);
    }
    return Menus;
  }
  /**
   * 测试 带分页
   * @author liuyinhui.cn
   * @create 2019/8/7 11:09
   * @return java.util.ArrayList
   * @throws
   */
  @RequestMapping(value = "/getData2", method = RequestMethod.GET)
  @ResponseBody
  public HashMap getData2() {
    HashMap<String, Object> map = new HashMap<>();

    ArrayList<Menu> menus = new ArrayList<>();
    Integer[] level = {5,1, 2, 3, 4};
    Menu emp;
    for (int i = 1; i < 51; i++) {
      emp = new Menu(i, "1", level[i % 5], "测试" + i);
      menus.add(emp);
    }
    map.put("rows",menus);
    map.put("total",50);
    return map;
  }

}

页面效果

默认第一页
修改分页单位为25后第二页

辉~情

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-table的简单使用

BootStrap-table的简单使用相关内容简述前台HTMLjs文件Controller页面效果相关内容官网地址：https://bootstrap-table.com/docs/api/table-options/API：https://blog.csdn.net/S_clifftop/article/details/77937356参考博客：https://www.cnblogs....
复制链接

扫一扫