Bootstrap-table基础篇（小技巧整理）

小技巧Bootstrap

---

data-*属性

在bootstrap中到处都有data-开头的属性使用，bootstrap-table中也一样，使用html渲染的table导出都使用到这种结构的属性命名，通俗的说HTML5的规范中约定以data-开头的属性为自定义属性，该属性名称不含有大写字母，所有的均为小写，单词之间使用“-”中横线分割；jQuery中提供了按此规范解析属性值的实现，且支持属性的（伪）匈牙利转驼峰，在html渲染元素的时候尤为有用，参考如下示例：

<button id="hello" data-url="http://www.chendd.cn" data-user-name="chendd"></button>
<script type="text/javascript">
    alert($("#hello").data("url"));//不含中横线分割
    alert($("#hello").data("user-name") + " ＝ " + $("#hello").data("userName"));
</script>

复选框实现表格的行单选

bootstrap-table的columns属性中一般第一列为复选框设置checkbox属性为true并且options的属性中定义singleSelect属性为true即可。

它与checkbox多选行的效果差异在于checkbox类标题行不显示checkbox。

点击表格选中行

bootstrap-table的options中增加clickToSelect属性为true即可，如果期望某些列点击不选中行，则可以在columns属性的某些列中设置clickToSelect属性为false取消在点击列时的自动选中行。

【业余实现】分享一个自己动手实现的点击某些列触发单元格行选中的效果（当时对bootstrap-table的了解较少，主要是因为没有深入使用过，且工作中无较好的外网访问条件，再者前台的问题基本看看就能自己动手实现），实现原理就是使用单元格的formatter函数，在该函数中做该单元格的点击事件，当点击后触发该行的复选框的点击，无论是点击取消或者是选中，需要注意的是formatter函数执行的时机是在dom渲染之前，所以该方法在调用的时候需要使用setTimeout延时触发。

表格行背景色设置

bootstrap-table的options中增加rowStyle属性实现表格行的样式，它的实现是给行中的“所有单元格”增加background-color样式效果，radio或checkbox列不显示背景色，故可按需要实现行的背景色及其他效果。

【业余实现】实现方案参考点击表格选中行的业余实现，利用formatter函数获取当前单元格所在的tr行，再设置该行的背景效果即可，这种实现可以满足将radio或checkbox列设置背景灯样式。

服务端分页传递分页参数

服务端分页一般都有程序的后台逻辑实现，但往往限定了向后台传递的分页参数名，bootstrap-table的分页参数可使用queryParamsType参数定义，默认值为limit，即向后台传递offset与limit（MySQL分页limit参数结构），如此可知pageSize为limit，offset为第N页的起始位置，计算页号则为offset % limit；当queryParamsType参数不为limit时向后台传递pageNumber属性与pageSize属性，再计算offset当页的起始位置的计算公式为：(pageNumber - 1) * pageSize + 1；

如果你跟我一样，期望分页时向后台传递pageNo和pageSize，则需要声明queryParamsType不为limit，并且在queryParams参数中增加pageNo属性，属性值为pageNumber的值，且删除参数对象中的pageNumber及其它不需要的参数；

服务端分页JSON属性名称自定义

bootstrap-table的服务端分页JSON响应至少需要2个参数：总行数与当前页的数据集合，其中默认的参数属性为“total”和“rows”，如果期望自定义JSON响应参数则可以通过表格的options属性“totalField”与“dataField”指定。另外一种方案是通过responseHandler函数包裹返回结果对象的方式解决。

每页显示数据条数

设置pageList数组参数，增加“All”参数值，可一页展示所有。

......

注

上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考：

原始链接：https://www.chendd.cn/information/viewInformation/myLog/348.a

最后更新：2020-04-09 21:47:19

访问次数：286

评论次数：0

点赞个数：0

 点赞

---

 发表评论

---

 评论列表

---