bootstrap实用样式函数

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在填充数据进去的