Bootstrap-table进阶篇（列宽拖动）

Bootstrap
placeholder image
admin 发布于：2020-04-19 01:18:44
阅读：loading

对于列宽拖动的插件了解不是很多，并且没有对不换行的表格进行详细探测，仅仅按照官网示例实现了该插件的使用，参考如下。

运行效果

列宽拖动.gif

参考代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>bootstrap-table列宽拖动</title>

<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />

<link rel="stylesheet" href="../dist/plugins/resizable/jquery.resizableColumns.css" />

<link rel="stylesheet" href="../../bootstrap.min.css" />

<link rel="stylesheet" href="../dist/bootstrap-table.css" />

<script type="text/javascript" src="../../jquery/jquery.min.js"></script>

<script type="text/javascript" src="../../popper.min.js"></script>

<script type="text/javascript" src="../../bootstrap.min.js"></script>

<script type="text/javascript" src="../dist/plugins/resizable/jquery.resizableColumns.min.js"></script>

<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>

<script type="text/javascript" src="../dist/plugins/resizable/bootstrap-table-resizable.min.js"></script>

</head>

<body>

<div id="toolbar">    <button class="btn btn-primary"><i class="fa fa-plus fa-1"></i>&nbsp;新增</button>    <button class="btn btn-info"><i class="fa fa-edit fa-1"></i>&nbsp;修改</button>    <button class="btn btn-danger"><i class="fa fa-times fa-1"></i>&nbsp;删除</button>

</div>

<table id="data-table" class="text-nowrap"></table>

<script type="text/javascript">

$(function () {    $("#data-table").bootstrapTable({        showColumns: true,        showRefresh: false,        showToggle: true,        showFullscreen: true,        clickToSelect: true,        toolbar: "#toolbar",        url: "../basic/list.json",        resizable: true,        columns: [            {radio: true},            {field: "force" , title: "势力" , align: "center", sortable: true},            {field: "magatama" , title: "勾玉" , width: 100 , align: "center", sortable: true},            {field: "name" , title: "姓名" , sortable: true},            {field: "sex" , title: "性别" , align: "center" , sortable: true},            {field: "designation" , title: "称号"},            {field: "description" , title: "称号描述" , width: 500}        ]    });

});

</script>

</body>

</html>


相关下载

源码下载.zip

上一篇：Bootstrap-table进阶篇（冻结列）
下一篇：Bootstrap-table进阶篇（树形表格）

 点赞

 发表评论
当前回复：作者

 评论列表

留言区