BootstrapTable的简单使用教程

最新推荐文章于 2024-04-12 20:46:50 发布

aocheqing0591

最新推荐文章于 2024-04-12 20:46:50 发布

阅读量266

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhukaixin/p/11315385.html

版权

1.引入必须的几个包

<link th:href="bootstrap/css/bootstrap.css}"/>
<link th:href="bootstrap-table/bootstrap-table.css}" />
<script th:src="jquery/jquery.min.js}"></script>
<script th:src="bootstrap/js/bootstrap.js}"></script>
<script th:src="bootstrap-table/bootstrap-table.js}"></script>
<script th:src="bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>

2.定义一个table

<table id="main"></table>

3.写js代码

<script type="text/javascript">
  init();
  function init(){

    $('#example').bootstrapTable({
      url: '/init/table',
      method: 'get',
      striped: true,
      toolbar: "#toolbar",
      sidePagination: "true",
      striped: true, // 是否显示行间隔色
      //search : "true",
      uniqueId: "ID",
      pageSize: "5",
      pagination: true, // 是否分页
      sortable: true, // 是否启用排序
      search:true,
      showColumns: true,
      showRefresh: true,
      columns: [
        {
          //field: 'Number',//可不加
          title: '序号',//标题  可不加
          align: "center",
          width: 40,
          formatter: function (value, row, index) {
            return index+1;
          }
        },
        {
          field: 'id',
          title: 'id'
        },
        {
          field: 'firstName',
          title: 'firstName'
        },
        {
          field: 'lastName',
          title: 'lastName'
        },
        {
          field: 'price',
          title: '操作',
          width: 120,
          align: 'center',
          valign: 'middle',
          formatter: actionFormatter,
        },
      ]
    });
    
  }
</script>

4.后台数据List 结构的数据

 @GetMapping("/table")
  @ResponseBody
  public List<Person> table() {
    Person person = new Person(1, "person", "demo1");
    Person person1 = new Person(2, "person1", "demo1");
    Person person2 = new Person(3, "person2", "demo1");
    Person person3 = new Person(4, "person3", "demo1");
    Person person4 = new Person(5, "person4", "demo1");
    Person person5 = new Person(6, "test1", "demo1");
    Person person6 = new Person(7, "test1", "demo1");
    Person person7 = new Person(8, "test1", "demo1");
    Person person8 = new Person(9, "test1", "demo1");
    Person person9 = new Person(10, "test1", "demo1");
    Person person10 = new Person(11, "test1", "demo1");
    Person person11 = new Person(12, "test1", "demo1");
    Person person12 = new Person(13, "test1", "demo1");
    Person person13 = new Person(14, "test1", "demo1");

    List list = new ArrayList();
    list.add(person);
    list.add(person1);
    list.add(person2);
    list.add(person3);
    list.add(person4);
    list.add(person5);
    list.add(person6);
    list.add(person7);
    list.add(person8);
    list.add(person9);
    list.add(person10);
    list.add(person11);
    list.add(person12);
    list.add(person13);

    return list;
  }

5.视图

完整代码：

html、js、controller

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link th:href="/bootstrap/css/bootstrap.css" rel="stylesheet"/>
  <link th:href="/bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
  <link th:href="/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet"/>
  <link th:href="/bootstrap/css/layoutit.css" rel="stylesheet"/>
  <link th:href="/bootstrap-table/bootstrap-table.css" rel="stylesheet"/>

</head>
<body>
<div style="text-align: center"><h2>table</h2></div>

<table id="example" border="1">
</table>

<!-- 全局js -->
<script th:src="/jquery/jquery.min.js"></script>
<script th:src="/bootstrap/js/bootstrap.js"></script>
<script th:src="/bootstrap-table/bootstrap-table.js"></script>
<script th:src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
  init();
  function init(){

    $('#example').bootstrapTable({
      url: '/init/table',
      method: 'get',
      striped: true,
      toolbar: "#toolbar",
      sidePagination: "true",
      striped: true, // 是否显示行间隔色
      //search : "true",
      uniqueId: "ID",
      pageSize: "5",
      pagination: true, // 是否分页
      sortable: true, // 是否启用排序
      search:true,
      showColumns: true,
      showRefresh: true,
      columns: [
        {
          //field: 'Number',//可不加
          title: '序号',//标题  可不加
          align: "center",
          width: 40,
          formatter: function (value, row, index) {
            return index+1;
          }
        },
        {
          field: 'id',
          title: 'id'
        },
        {
          field: 'firstName',
          title: 'firstName'
        },
        {
          field: 'lastName',
          title: 'lastName'
        },
        {
          field: 'price',
          title: '操作',
          width: 120,
          align: 'center',
          valign: 'middle',
          formatter: actionFormatter,
        },
      ]
    });

  }
</script>
</body>
</html>

@Controller
@RequestMapping("/init")
public class IndexController {

  @GetMapping("/index")
  public String index(ModelMap mmap) {

    List list = new ArrayList<>();
    Map map1 = new HashMap<>();
    map1.put("types", "帽子");
    map1.put("totals", 14);
    list.add(map1);

    Map map2 = new HashMap<>();
    map2.put("types", "短裤");
    map2.put("totals", 20);
    list.add(map2);

    Map map3 = new HashMap<>();
    map3.put("types", "短袖");
    map3.put("totals", 28);
    list.add(map3);

    mmap.put("list", list);
    System.out.println(list);
    return "/index";
  }

  @RequestMapping(value = "/getVal", method = RequestMethod.GET)
  @ResponseBody
  public IndexData getVal(@RequestParam String parameter) {
    IndexData indexData = new IndexData();
    indexData.setMes(String.format("传入数据:%s,测试时间:%s", parameter, new Date()));
    return indexData;
  }

  @RequestMapping(value = "/input", method = RequestMethod.POST)
  @ResponseBody
  public Person input(@RequestParam("firstname") String firstname, @RequestParam("lastname") String lastname) {
    System.out.println(" 姓: " + lastname + " 名字: " + firstname);
    Person person = new Person();
    person.setFirstName(firstname);
    person.setLastName(lastname);

    return person;
  }

  @RequestMapping(value = "/getAll", method = RequestMethod.GET)
  @ResponseBody
  public List getAll() {
    List<Person> list = new ArrayList<Person>();
    Person person1 = new Person("飞", "李");
    Person person2 = new Person("娜娜", "刘");
    Person person3 = new Person("大强", "苏");
    Person person4 = new Person("鸭梨", "大");
    list.add(person1);
    list.add(person2);
    list.add(person3);
    list.add(person4);
    return list;
  }

  @GetMapping("/first")
  public String first(ModelMap mmap) {
    return "/first";
  }

  @GetMapping("/table")
  @ResponseBody
  public List<Person> table() {
    Person person = new Person(1, "person", "demo1");
    Person person1 = new Person(2, "person1", "demo1");
    Person person2 = new Person(3, "person2", "demo1");
    Person person3 = new Person(4, "person3", "demo1");
    Person person4 = new Person(5, "person4", "demo1");
    Person person5 = new Person(6, "test1", "demo1");
    Person person6 = new Person(7, "test1", "demo1");
    Person person7 = new Person(8, "test1", "demo1");
    Person person8 = new Person(9, "test1", "demo1");
    Person person9 = new Person(10, "test1", "demo1");
    Person person10 = new Person(11, "test1", "demo1");
    Person person11 = new Person(12, "test1", "demo1");
    Person person12 = new Person(13, "test1", "demo1");
    Person person13 = new Person(14, "test1", "demo1");

    List list = new ArrayList();
    list.add(person);
    list.add(person1);
    list.add(person2);
    list.add(person3);
    list.add(person4);
    list.add(person5);
    list.add(person6);
    list.add(person7);
    list.add(person8);
    list.add(person9);
    list.add(person10);
    list.add(person11);
    list.add(person12);
    list.add(person13);

    return list;
  }

  @GetMapping("/tables")
  public String tables(ModelMap mmap) {
    return "/table";
  }

}

转载于:https://www.cnblogs.com/zhukaixin/p/11315385.html