使用BootStrap Table编写响应式表格

最近做到查询数据列表,使用集合遍历感觉有点low了,网上看了看就有这种table类的东西,用的bootStrap框架就找了个bootStrap Table,官网文档下一波。

官网地址:http://bootstrap-table.wenzhixin.net.cn/

效果先看看怎么样:

使用BootStrap Table编写响应式表格_第1张图片
使用BootStrap Table编写响应式表格_第2张图片
使用BootStrap Table编写响应式表格_第3张图片

当数据出来的时候我还以为要自己加分页查询等等的东西,结果自带功能,屌屌的,很强势。

先引包吧 JS、CSS。

<script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js">script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js">script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap-table.js">script>
<link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap-table.css">

body

<body>
<table id="screenTable" 
            data-toggle="table"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="true"
            data-show-columns="true"
            data-halign="center">
        <thead>
</thead>
</table>
</body>

jQuery

<script type="text/javascript">
    $('#screenTable').bootstrapTable({
            method:'post',
            url: "${pageContext.request.contextPath}/menudata",
            dataType:'json',
            cache: false, //不使用缓存
            striped: true, //显示行间隔色
            pagination: true, //显示分页
            pageSize: 5, //每页的行数
            pageList: [5, 10, 20], //自定义每页的行数
            search: true, //显示表格搜索
            showRefresh: true, //刷新按钮
            columns: [{
                field: "id",
                title: "ID",
                align: "center",
                valign: "middle"
            }, {
                field: "pId",
                title: "上级菜单ID",
                align: "center",
                valign: "middle"
            }, {
                field: "name",
                title: "菜单名称",
                align: "center",
                valign: "middle"
            },{
                field: "menu_action",
                title: "菜单动作",
                align: "center",
                valign: "middle"
            },{
                field: "menu_icon",
                title: "菜单图标",
                align: "center",
                valign: "middle"
            }],
            formatNoMatches: function () {
            return '无符合条件的记录';
            }
    });

这时候数据就能显示了,但是显示的都是英文,想改成中文的,网上说有中文包,就去文档找,最后导入就搞掂了。

中文JS

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

下边的数据条数统计就变成中文了。

你可能感兴趣的:(bootstrap-table)