<!DOCTYPE html>
<
html
>
<
meta
charset
=
"utf-8"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>
<
title
>行事件绑定</
title
>
<
link
href
=
"css/bootstrap.min.css"
rel
=
"stylesheet"
>
<
link
rel
=
"stylesheet"
href
=
"css/bootstrap-table.css"
>
<
link
href
=
"css/bootstrap-table-fixed-columns.css"
rel
=
"stylesheet"
>
<!--引入jquery -->
<
script
src
=
"js/jquery-1.11.3.min.js"
></
script
>
<!--引入bootstrap -->
<
script
src
=
"js/bootstrap.js"
></
script
>
<!--引入表格可拖动列插件 -->
<
script
src
=
"js/colResizable-1.6.js"
></
script
>
<
script
src
=
"js/bootstrap-table.js"
></
script
>
<
script
src
=
"js/bootstrap-table-zh-CN.js"
></
script
>
<
script
src
=
"js/bootstrap-table-fixed-columns.js"
></
script
>
</
head
>
<
body
>
<
table
data-show-fullscreen
=
"true"
data-show-pagination-switch
=
"true"
data-show-toggle
=
"true"
data-show-refresh
=
"true"
data-search
=
"true"
data-striped
=
"true"
id
=
"goods"
data-sort-stable
=
"true"
data-classes
=
"table table-hover"
>
<
thead
>
<
tr
>
<
th
data-title
=
"列标题"
data-checkbox
=
"true"
data-align
=
"center"
></
th
>
<
th
data-field
=
"Code"
data-sortable
=
"true"
data-align
=
"center"
>序号</
th
>
<
th
data-field
=
"TuanGouName"
data-align
=
"center"
>商品名称</
th
>
<
th
data-field
=
"StartDate"
data-sortable
=
"true"
data-align
=
"center"
>开始时间</
th
>
<
th
data-field
=
"EndTime"
data-align
=
"center"
>结束时间</
th
>
</
tr
>
</
thead
>
</
table
>
<
script
>
/*数据json*/
var
json
=
[{
"Code"
:
"1"
,
"TuanGouName"
:
"豆干"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
},
{
"Code"
:
""
,
"TuanGouName"
:
"薯片"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
},
{
"Code"
:
"3"
,
"TuanGouName"
:
"香肠"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
},
{
"Code"
:
"4"
,
"TuanGouName"
:
"大蒜"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
},
{
"Code"
:
"5"
,
"TuanGouName"
:
"鸡腿"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
},
{
"Code"
:
"6"
,
"TuanGouName"
:
"饼干"
,
"StartDate"
:
"2016/10/9 10:15:00"
,
"EndTime"
:
"2016/12/25 11:30:00"
}];
/*初始化table数据*/
$(
function
(){
$(
"#goods"
)
.
bootstrapTable({
data
:
json ,
/* onClickRow:function(){
//单击触发的事件
alert("触发了消息")
}, */
onDblClickRow
:
function
(){
//双击触发的事件
console
.
dir
($(this))
alert(
"双击触发的事件"
)
}
});
});
<
/
script
>
</
body
>
</
html
>
Bootstrap-table使用情况
1. 表格参数(都是给table标签设置的样式)
主要是由一些自定义类名封装方法和样式
1>对于table标签来说data-toggle=”table” (默认),这样数据不用json动态获取的时候
不用写js直接给table加上改标签就可以启用表格了否则 不要加该类名;
2>table的data-classes=”table table-hover”(默认有边框 鼠标经过每一行有颜色变化)
table table-no-bordered(消除所有列边框)
3>table的data-height=”500”可以设置table的高度
4>table的data-striped=”false”(默认false设置为true时可实现隔行变色效果)
5>table的几个排序的类名 基本没啥用处
6>table的data-icons-prefix=”glyphicon” 设置字体可以使用bootstrap的字体图标(必须要引入字体图标的fonts
不然实现不了)
7>table的data-show-header (默认值true显示列头,设置为false后不显示列宽也不能拖动列宽了)
8>对应着的data-show-footer(默认值false不显示列脚部,改为true以后 很难看底部)
9>data-show-columns (默认false不显示内容下拉框,设置为true后需要字体图标配套文件)
10>data-show-refresh(默认false不显示刷新按钮 设置为true可自动加载刷新按钮同样需要字体图标文件的加载)
11>data-show-toggle(切换视图按钮,设置为true可以将表格切换为列表样式 同样是需要字体图标支持)
12>data-show-search(显示搜索框 默认是全局自动搜索 也可以设置回车搜索)
13>data-search-text(初始化搜索文字input框默认的搜索内容提示词)
14>data-search-time-out 设置搜索超时时间
15>data-trim-on-search(默认true自动去掉搜索字符前后的空格)
16>data-show-pagination-switch(默认false不显示切换分页按钮 也需要字体图标文件)
17>data-show-fullscreen(默认false 是否显示全屏按钮)
18>data-single-select(默认false设置true时复选框只能选择一个 跟单选按钮效果一样了)
2. 列参数
一般设置在表头上 th标签
1>data-checkBox(复选功能,一般在表头第一列单独放一个td添加该类名并设置为true ) data-radio单选按钮
基本用不着 不说了
2>data-field=”字段名” (对应着返回的数据的字段名来做渲染)
3>data-rowspan/rowspan行合并data-colspan/colspan列合并
4>data-align (三个选项”left””center””right”列内容对齐方向)
5>data-width (列宽设置固定值)
6>data-sortable (布尔值 可设置某一列的排序效果)
