Bootstrap框架表格相关操作

Bootstrap很有意思,它提供了样式和方法让我们去使用

今天我们来讲讲Bootstrap是如何联动后端完成表单的展示

1、准备表单和样式

首先去Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)这是Bootstrap的文档里面有定义它们的方法直接拿着就可以使用

!!!:注意事项 

    1、使用Bootstrap前必须要引入它的.css文件和.js文件 因为Bootstrap也是人写出来的样式让你去外部引用就可以用Class引用到你的表格上

    2、 使用前如果使用的网络路径请确保联网:网络路径可能根据你的网速来加载,有个几S的延迟

    3、 如果没有网络的情况下如何使用Bootstrap样式:可以去点击文档里面进行下载,之后就可以进行引用

    4、切记如果是下载的话必须要去释放它的css、js包结构,要不就会404

2、 代码演示

1、引入.css和.js文件

<link rel="stylesheet" href="<%=path%>/js/bootstrap/bootstrap3/css/bootstrap.css">

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.js"></script>

<!-- table -->

<link rel="stylesheet" href="<%=path%>/js/bootstrap/bootstrap-table/bootstrap-table.css">

<script type="text/javascript" src="<%=path%>/js/bootstrap/bootstrap-table/bootstrap-table.js"></script>

<script type="text/javascript" src="<%=path%>/js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

拿到tabel表格

<table class="table" id="myTable"></table>

<script>

    $("#table).bootstrapTable({

            url:"xxx",    // 后端访问路劲

            type:"post", // SSM防止乱码传输就可以使用post方式进行提交

           columns:[

                  {field:'fareId',title:'Id'}     这个是从后端返回的集合

            ]

})

</script>

2、上面的步骤可以正确的展示:后端代码

@RequestMapping("xxx") //后端访问路劲

@RequestBody   // 返回而不是跳转页面

HashMap<String,Object> selectUserId(){  //！！！重点来了 

为什么要使用HashMap 作为返回值

因为Bootstrap会有一个响应机制 它的数据展示的是rows 而条数展示的是total

返回到前端一定是要把数据包含在rows里面的!

HashMap data=new HashMap();

data.put("rows",调用持久层从数据库中查询表中的数据);

data.put("total",调用持久层从数据库中查询表中的数据的长度);

return data;

}