“ 若依教程独家分享！点赞+关注，一起从「蒟蒻」变成「大佬」~”
1 表格操作技巧，你 get 了多少？
本期内容
1 表格，表单，下拉框内显示数据库对应数据？
2 bootstrap-select 下拉多选取值及重置
3 去掉 Bootstrap Table 右上角的图标工具栏
4 对 Bootstrap Table 表格加入序号
4-1 序号翻页自动增加
4-2 序号翻页重新开始计算自动增加
5 表格倒序排列
6 表格列宽设置
7 display:block 设置自动换行
8 Bootstrap Table 表格过大(宽)左右滑动
9 Bootstrap Table 表格底部合计列拖动显示问题
2 表格、表单、下拉框，显示数据库对应数据，应该怎么控制么？
值为 userId，显示 userName 商品添加的 html 中，用了 Thymeleaf，th:text 显示的是名称，th:value 是值，th:each 是遍历的集合！
<div class="form-group"> <label class="col-sm-3 control-label">商品分类：</label> <div class="col-sm-8"> <select name="typeId" class="form-control m-b"> <option th:each="result : ${goodsTypeList}" th:text="${result.typeName}" th:value="${result.id}"> </option> </select> </div></div>
复制代码
3 BootStrap-select 下拉多选值及重置，应该怎么控制么？
html:这里的下拉列表数据从若依字典里取值。
<li> <input type="hidden" class="form-control" name="channelsList" id="channelsList" > 渠道： <select name="channels" id="channels" th:with="dictList=${@dict.getType('talent_channel')}" class="selectpicker" title="全部" multiple data-live-search="true" data-selected-text-format="count > 2"> <option th:each="dict : ${dictList}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select></li><li style="float: right;padding-right: 60px;"> <a class="btn btn-primary btn-rounded btn-sm" onclick="doSubmit(),$.table.search()"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset(),doReset()"><i class="fa fa-refresh"></i> 重置</a></li>
复制代码
js 声明两个方法：提交时获取多选数据，重置时重置多选下拉框
function doSubmit(){ //这里可以直接val获取选中项，也可以遍历选中项获取 //1. alert($("#channels").val()); //后端如果用字符串接收，则获取逗号拼接字符串：10001,10002,10003 //后端如果用数组接收，则获取到的是数组：[10001,10002,10003] $("#channelsList").val($("#channels").val()); // 2. //以前不会用val方式时用的笨方法，遍历并收集选中项 var str=[]; $("#channels option:selected").each(function () { str.push($(this).val());// 收集选中项 }) $("#channelsList").val(str);//后端通过获取表单数据channelsList获取多选内容(字符串或数组接收)} function doReset() { $("#channels").selectpicker('refresh');//重置下拉框}
复制代码
4 去掉 BootStrap Table 右上角图标工具栏，应该怎么控制么？
在 var options = 参数中分别添加以下参数
showSearch: false, showHeader: false, //去掉表头 search: false, showToggle: false, showRefresh: false, showColumns: false,
复制代码
5 对 BootStrap Table 表格加入序号，应该怎么控制么？
序号翻页自动增加下：
{ field: 'Number', title: '序号', formatter: function (value, row, index) { var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条 var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页 return pageSize * (pageNumber - 1) + index + 1; }},
复制代码
序号翻页重新开始计算自动增加：
{ field: 'Number', title: '序号', formatter: function (value, row, index) { return index + 1; }},
复制代码
6 表格数据排序，应该怎么控制么？
在需要排序的字段下添加 sortable:true
{ field: 'zdfxProcess', title: '完成率%', sortable:true },
复制代码
在表格初始化时，options 参数中加入
sortName: "createTime",sortOrder: "desc",
复制代码
7 表格列宽设置，应该怎么控制么？
注：表格中直接使用 width:XX 是不生效的,正确使用方法是在声明的表格中加入 fixed 属性
<style type="text/css"> .table {table-layout:fixed;}</style>
复制代码
8 display:block 自动换行，应该怎么控制么？
css 中 display:block; 自带前后换行：
9 表格过大(宽)，左右滑动，应该怎么控制么？
在<table>标签外面，在套一个 div,给这个 div 添加如下样式：
div{ white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; }
复制代码
或者
<div style=" white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; "</div>
复制代码
10 表格底部合计列拖动显示问题，应该怎么控制么？
在 options 中添加 onLoadSuccess 参数。
onLoadSuccess: onLoadSuccess,
复制代码
在表格 $.table.init(options);后添加如下 js 函数
// 监听表体fixed-table-body滚动事件，//赋值给表尾fixed-table-footerfunction onLoadSuccess() { $(".fixed-table-body").on("scroll",function(){ var sl=this.scrollLeft; $(this).next()[0].scrollLeft = sl; })}
复制代码
如果想围观票圈，可以扫这个二维码加我微信～
评论