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
事件不同的是有以下情况不会触发单击事件-
action
类:thead>th
里设置了action
class 就不会触发
-
update-url
属性:thead>th
里有update-url
属性的时候
-
- 选取文本的时候
-
- 选取文本后在单击取消选取的时候
-
*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_
的话自动提交数据的 - 触发查询事件:
-
#btn_search
这个是固定的查询按钮ID了
-
#btn_reset
这个是固定的重置按钮ID了
-
回车键
这个不多说
-