1. 加载script文件

<?php Widget::load('layout_tpl',array('view'=>'bootstrap_table_script'));?>

2. 初始化数据列表

$('#data-table').myDataTable({
        option: {}
        ,onRowClick: function(e,id,row){     //这个跟自带的单击行事件智能多了哦~
            var custom_id = $.trim($(e).parent('tr').find('.row_id').text());
            // console.log('parm-id:'+id);
            // console.log('custom_id:'+custom_id);
            console.log(row);
        }
        ,gIsNew: function(val, row, index){   //使用field名称对单元格进行格式化
            // console.log('val:'+val);
            return render_flag(val);
            // return render_flag(val);
        }
    });

• option： 里边去设置bootstrapTable的设置项就可以了
• onRowClick： 是单击行的事件处理，跟自带的click事件不同的是有以下情况不会触发单击事件
  • 1. action类：thead>th里设置了action class 就不会触发
  • 1. update-url属性：thead>th里有 update-url属性的时候
  • 1. 选取文本的时候
  • 1. 选取文本后在单击取消选取的时候

*gIsNew：这个是bootstrapTable的formatter的使用方法，在thead>th上设置的data-field绑定的

单元格更改数据

用例1：

用例2：

//使用field名称对单元格进行格式化
,gIsNew: function(val, row, index){     
  return render_flag(val);
}

这个代码就是用例2的代码。 qnick_bootstrap-table-helper.js 在这个js文档里自定义的

提交事件：

单机的元素里边包含change_state 这个类就触发提交事件了

提交的数据：

获取元素里的 val和 ori_val的属性值 val是要更改的数据，ori_val是原来的数据可以用来写日志等。 ID是从row_id上获取的

var data = {
   id : id
   ,val : val
   ,oriVal : oriVal
 }

提交URL的设置：

thead>th里设置 update-url属性

表的列配置

bootstrapTable自带的功能就不多说明了，就说明一下自定义的用法

• row_id：这个是要必须添加的，在class里边添加就行

<th class="row_id" data-sortable="true" data-field="gID">ID</th>

• 禁止触发行单击事件的两种情况

<!--情况1：添加action class-->
<th class="action" data-field="gShelves">上架</th>

<!--情况2：单元格更改数据的列-->
<th class="hidden-xs" data-field="gIsNew" update-url="<?=adm_url('product/updateNew')?>">新品</th>

搜索栏配置

先看代码

<!-- 自定义设置：默认 bootstrapTable的toolbar 【工具栏】的值为'#custom_toolbar_box' -->
<div class="text-c toolbar_box" id="custom_toolbar_box"> 
 <!-- toolbar 标签里所有id属性前缀【filter_】的自动获取提交POST -->
 <div class="input-group">
   <span class="input-group-addon">姓名</span>
   <input type="text" id="filter_mRealName" class="form-control">
 </div>
 <div class="input-group" style="width:200px">
   <span class="input-group-addon">电话</span>
   <input type="text" id="filter_mPhone" class="form-control">
 </div>
     <select class="form-control"  id="filter_boID">
       <option value="">请选择分公司</option>
       <?php foreach ($bo as $key=>$val):?>
       <option value="<?=$val['boID']?>"><?=$val['boName']?></option>
       <?php endforeach;?>
   </select>
     <select class="form-control"  id="filter_dID">
         <option value="">请选择部门</option>
         <?php foreach ($dpt as $key=>$val):?>
         <option value="<?=$val['dID']?>"><?=$val['dName']?></option>
         <?php endforeach;?>
     </select>
     <select class="form-control"  id="filter_jID">
         <option value="">请选择职位</option>
         <?php foreach ($job as $key=>$val):?>
         <option value="<?=$val['jID']?>"><?=$val['jName']?></option>
         <?php endforeach;?>
     </select>
 <div class="btn_group">
     <!-- 查询按钮ID就固定下来为'btn_search'吧 -->
     <button id="btn_search" class="btn btn-success" ><i class="icon-search"></i> 查询</button>
     <!-- 重置按钮ID就也固定下来为'btn_reset'吧 -->
     <button id="btn_reset" class="btn btn-info" ><i class="icon-repeat"></i> 重置</button>
 </div>
</div>

• toolbar的设置：默认就是#custom_toolbar_box这个了，可以在option里边设置的
• 搜索元素绑定：每个ID的前缀是 filter_的话自动提交数据的
• 触发查询事件：
  • 1. #btn_search 这个是固定的查询按钮ID了
  • 1. #btn_reset 这个是固定的重置按钮ID了
  • 1. 回车键 这个不多说