Bootstrap-table基础篇(小技巧整理)

小技巧Bootstrap
placeholder image
admin 发布于:2020-04-09 21:47:19
阅读:loading

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”参数值,可一页展示所有。

......


 点赞


 发表评论

当前回复:作者

 评论列表


留言区