首页 > 其他分享> > 《前端》bootstrapTable表头调整列宽

《前端》bootstrapTable表头调整列宽

2020-12-05 16:33:16 作者：互联网

需要引入的文件：

bootstrapTable基本引入文件：

bootstrap-3.3.4.css、bootstrap-table.min.css、jquery-3.5.1.min.js、bootstrap-3.3.7.min.js、bootstrap-table.min.js

表头调整列宽需要再引入：

colResizable-1.6.js

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrapTable表头调整列宽</title>
    <link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="./lib/css/bootstrap-table.min.css">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./lib/js/bootstrap-3.3.7.min.js"></script>
    <script src="./lib/js/bootstrap-table.min.js"></script>
    <script src="./lib/js/colResizable-1.6.js"></script>
</head>

<body>
    <table id="table_sortShowNorm"></table>
    <script>
        $('#table_sortShowNorm').bootstrapTable({
            undefinedText: '', // 当数据为undefined时显示的字符，默认是'-'
            toolbar: 'false', // 工具按钮用哪个容器
            toolbarAlign: 'false', // 工具按钮的位置
            striped: false, // 是否显示行间隔色
            pagination: false, //是否分页
            uniqueId: "tid", // 每一行的唯一标识，一般为主键列
            field: 'checked',
            checkbox: true,
            showColumns: false, // 是否显示列的按钮
            // reorderableRows: true, //设置拖动排序
            // useRowAttrFunc: true, //设置拖动排序
            columns: [{
                field: 'checked',
                checkbox: true,
            }, {
                title: '序号',
                formatter: function(value, row, index) {
                    return index + 1;
                },
                align: 'center'
            }, {
                field: 'name',
                title: '名称',
                align: 'center',
                cellStyle: {
                    css: {
                        "text-align": "center !important"
                    }
                }
            }],
            data: [{
                "name": "wdwdwdd"
            }, {
                "name": "jdiwjdi"
            }],

            // responseHandler: function(res) {
            //     if (res.success) {
            //         $('#input_cacheId').val(res.data.tid);
            //         $('#input_modifyTime').val(res.data.modifyTime);
            //         var data = res.data.treeDto;
            //         return data;
            //     } else {
            //         CommonJS.modal.alertError(res.message);
            //     }
            //     return res;
            // }
        });
        $('#table_sortShowNorm').colResizable({
            liveDrag: true, //拖动列时更新表布局
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'overflow' //允许溢出父容器
        });
    </script>
</body>

</html>

标签：bootstrapTable,false,true,res,表头,js,table,列宽,data
来源： https://blog.csdn.net/bellediao/article/details/110696750