bootstrap的样式是整块的,有时候想要实现一点个性化的样式又很消耗时间。本文记录一些曾经用过的bootstrap样式,忘记了还能找回来。。。
功能目录清单:
1.设置表头对齐方式
2.设置表数据行对齐方式
3.设置表某一列的对齐方式
4.多层modal,关闭子窗口而不同时关闭父窗口
5.modal上双击一行进行提交(等于选中一行后在哪点击提交按钮)
6.禁用表格一部分勾选框
1.设置表头对齐方式
定义全局表格样式如下
<style>
.table thead>tr>th {
text-align: center;
vertical-align: middle;
}
</style>
2.设置表数据行对齐方式
定义全局表格样式如下
<style>
.table tbody>tr>td {
text-align: center;
vertical-align: middle;
}
</style>
3.设置表某一列的对齐方式(表头+数据行)
在th标签里面添加data-align="center"
控制水平对齐方式, 添加data-halign="center"
控制垂直对齐方式
<thead>
<tr>
<th data-field="tx_dt" data-align="center" data-formatter="dateFormatter">日期</th>
<th data-field="in_amt" data-align="right">收入金额</th>
<th data-field="out_amt" data-align="right">支出金额</th>
<th data-field="account" data-align="center">操作账号</th>
</tr>
</thead>
4.多层modal,关闭子窗口而不同时关闭父窗口
一个页面点击按钮出现弹窗,在点击弹窗页面上的小按钮,弹出小弹窗。点击小弹窗关闭按钮时两个弹窗都关闭了,需要实现只关闭当前的小弹窗而不关闭后面的大弹窗。两个弹窗的关闭按钮代码都相同如下:
<button data-dismiss="modal" class="btn btn-primary" type="button">关闭</button>
标签属性data-dismiss="modal"
是bootstrap关闭modal的方法。简单点的实现方法就是去掉小弹窗上关闭按钮的这个data-dismiss属性,改成οnclick=“closeModal()” , closeModal里面就是把当前modal隐藏即可,$("#modalId").modal('hide');
第二个方法参考了网上的想法,在bootstrap.min.js(或者bootstrap.js)里面找到
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this))`
替换成
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this)),this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:last', $.proxy(this.hide, this))
全局有效,测试过了也是可行了的,对单个弹窗的关闭也无影响。
5.modal双击一行选中提交
var $modal_table = $("#modal_table").bootstrapTable('destroy') //先销毁原table
.bootstrapTable(
{
url : "localhost:8080/getusers" // 从后台获取数据数组
});
$modal_table.unbind('dbl-click-row.bs.table'); // 接触绑定
$modal_table.on('dbl-click-row.bs.table',
function(e, row, $element) {
$('#searchModal').modal('hide'); // 双击选择一行后当前modal隐藏
$("#user_id").attr("value", row.user_id); // 选中行的数据赋值到页面上展示
$("#user_name").attr("value", row.user_name);
});
禁用表格一部分勾选框
表格每一行前面都有一个单选框,但需求是根据这一行的状态字段来判断,失效的记录不让勾选。
html如下:
<tr>
<th data-field="state" data-radio="true" data-formatter="disFunFormatter"></th> <!-- 表格第一列,勾选框 -->
<th data-field="sts" data-formatter="STSFormatter">状态</th> <!-- 状态: 0-失效 1-生效 -->
</tr>
js如下:
function disFunFormatter (value,row,i) {
if (row.sts == '0') {
return {disabled:"disabled"};# 添加属性。 也可以添加样式或者别的操作
}
}
主要用到了data-formatter属性,其值是一个函数名。这个字段都会先执行这个函数disFunFormatter在填充数据进去的