bootstrap-table 使用指南

1.bootstrap-table 使用到的js和css

<link rel="stylesheet" href="${contextPath}/static/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="${contextPath}/static/dist/css/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="${contextPath}/static/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${contextPath}/static/dist/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

2. 页面代码

<table id="table" class="table table-hover table-bordered table-striped" data-toogle="table"></table>

<script type="text/javascript">
$(function() { 
    $('#table').bootstrapTable({ 
        columns: [{ 
            title: '序列号', 
            field: 'id', 
            align: 'center',  // 左右对齐 left right center 
            valign: 'middle', // 垂直对齐 top bootom middle baseline 
            width : 150, 
            sortable: true 
        }, { 
            title: '文件名称', 
            field: 'fileName', 
            align: 'center', 
            valign: 'middle', 
            width : 150, 
            sortable: true 
        }, { 
            title: '文件类型', 
            field: 'menuName', 
            align: 'center', 
            valign: 'middle', 
            width : 150, 
            sortable: true 
        }, { 
            title: '上传人', 
            field: 'uploadUser', 
            align: 'center', 
            valign: 'middle', 
            width : 150, 
            sortable: true 
        }, { 
            title: '上传时间', 
            field: 'uploadDate', 
            align: 'center', 
            valign: 'middle',
            width : 150, 
            sortable: true 
        }, { 
            title: '下载', 
            field: 'download', 
            align: 'center', 
            valign: 'middle', 
            width : 150, 
            formatter: download
        }, { 
            title: '删除', 
            field: 'delete', 
            align: 'center', 
            valign: 'middle', 
            width : 150, 
            formatter: delete 
        }], 
        method: 'post', 
        striped: true, 
        cache: false, 
        dataType: "json", 
        url: '${contextPath}/frame/repository/queryUpload', 
        sortName: 'uploadDate', 
        sortOrder: 'desc', 
        pagination: true, 
        search: true,                // 显示搜索框 
        clickToSelect: true,         // 是否启用单机选中行 
        //sidePagination: 'server',  // 服务器端分页 
        pageNumber: 1,               // 默认起始页 
        pageSize: 5, 
        pageList: [5, 10, 20, 30], 
        showColumns: true,           // 下拉框（选择显示的列） 
        height : 450, 
        queryParams: function (params) { 
            // 每次发送给服务器的参数，可以添加自己需要的参数 
            return { 
                pageSize: params.limit, 
                offset: params.offset, 
                sortOrder: params.order, 
                // begintime: $('#begintime').val(), 
                // endtime: $('#endtime').val() 
            } 
        }, 
    });

    function download(value,row,index){ 
        var e = "<button class='btn btn-sm btn-success' onclick=\"downloadFile
        ('"+row.id+"','"+row.fileName+"')\">                  
        <i class='ace-icon fa fa-cloud-download bigger-140'></i></button>"; 
        return e; 
    } 

    function delete(value,row,index){ 
        var d = "<button class='btn btn-sm btn-danger' onclick=\"deleteFile
        ('"+row.id+"')\">            
        <i class='ace-icon fa fa-trash-o bigger-140'></i></button>"; 
        return d; 
    }
</script>

3. 功能扩展

    bootstrap-table 还有 行(row)编辑，单元格(cell)编辑、导出，组合排序等多种功能扩展，请参考以下网址 Welcome Examples。​​​​​​​