Bootstrap Table学习

比眉伴天荒 2022-06-14 06:57 207阅读 0赞

Bootstrap Table是基于 Bootstrap 的 [jQuery][] 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。官方文档包括参数说明： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

[  
][Link 1]

## 使用： ##

①.引入需要的[js][]和CSS

②.定义一个空的table

<body>
        <div class="row base-margin" id="query">
            <ol class="breadcrumb">
                <li><strong><span style="color: #27a0d7">用户列表</span></strong></li>
            </ol>
            <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
                <div class="form-group">
                    <label for="orgCode">部门:</label> 
                    <select class="form-control" id="orgCode" name="orgCode">   
                        <option value="">默认选择</option>
                        <c:forEach var="data" items="${orgList}">
                            <option value="${data.orgCode }">${data.orgName }</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <label for="userName">名称:</label> 
                    <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入名称">
                </div>
                <div class="form-group">
                    <label >日期:</label>
                    <input placeholder="开始日期" class="form-control layer-date" id="startDate" name="startDate">
                    <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate">
                </div>
                <div class="form-group">
                    <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
                </div>
                <div class="form-group btn-right">
                    <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button>
                </div>
            </form>
        </div>
        <div class="container" style="width: 100%">
            <table id="demo-table">
            </table>
        </div>
    </body>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37

③.初始化table表格（建议把初始化的JS代码写到另外的自定义js页面中，代码还挺长的），具体的各个参数可以查看API。

④. Controller（后台用的是[spring][]框架）

@ResponseBody
        @RequestMapping(params = "method=listUsers")
        public Object listUsers(UserForm form) {
            int totalCount = userService.getTotalCount(form);
            if(totalCount > 0){
                BasePageResult<User> result = new BasePageResult<User>();
                form.setBeginNum(((form.getPageindex()-1)*form.getPageSize()));
                form.setEndNum((form.getPageindex()*form.getPageSize()));
                List<User> user = userService.getUserList2(form);
                result.setTotalCount(totalCount);
                result.setResult(user);
                return result;
            }
            return null;
        }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15

⑤. 附上最终的表格   
![这里写图片描述][20161018110317435]

原文地址   ：http://blog.csdn.net/u011870547/article/details/52847081

[jQuery]: http://lib.csdn.net/base/jquery
[Link 1]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
[js]: http://lib.csdn.net/base/javascript
[spring]: http://lib.csdn.net/base/javaee
[20161018110317435]: /images/20220614/963fd3abe9614861a9154c8f1c5a79d7.png