bootstrap-table使用解析

bootstrap-table使用初探

1. 引入css及js文件

其中包含bootstrap样式文件，bootstrap-table 样式文件，jquery文件，及bootstrap-table excel导出所用到的汉化文件。
2.在视图页面中添加table标签，并给定一个id,如：

然后新建js文件，在js文件中初始化bootstrap-table,table的配置项很丰富，这里列举几项常用的。在初始化时我们可以采用正在body标签添加onload()函数的方法。

然后新建js,并在自己的或html页中引入该js,在js中初始化table

function init(){
//1.初始化table
inittitle();
var otable = new modelinit();
otable.init();
var otable2 = new modelfininit();
otable2.init();
}

/**
* 模型清单
*/
var modelinit = function () {
var otableinit = new object();

//初始化table
otableinit.init = function () {
$('#data').bootstraptable({
url: '/ams/model/getmarketdetailmodelid='+$("#modelid").text(), //请求后台的url（*） 
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
showexport:true,//是否显示导出按钮
exportdatatype:"all", //basic,all,selected 导出的形式basic为本页，selected为选择项，all为全部，注意这里为all时只支持client端分页的全部导出
sortorder: "asc", //排序方式
queryparams: otableinit.queryparams,//传递参数（*）
sidepagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pagenumber:1, //初始化加载第一页，默认第一页
pagesize: 10, //每页的记录行数（*）
pagelist: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，即client分页时搜索任意一列
strictsearch: true,
showcolumns: true, //是否显示所有的列
checkboxheader: false,//表头的全选按钮
showrefresh: true, //是否显示刷新按钮
minimumcountcolumns: 2, //最少允许的列数
clicktoselect: false, //是否启用点击选中行
//height: 400, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueid: "id", //每一行的唯一标识，一般为主键列
showtoggle:false, //是否显示详细视图和列表视图的切换按钮
cardview: false, //是否显示详细视图
detailview: false, //是否显示父子表
columns: [{
checkbox: false
},{
field: 'username',
title: '姓名'
}
, {
field: 'phone',
title: '联系方式'
}
, 
{
field: 'dos',
title: '操作',
formatter:function(value,row,index){
var a = '电话营销';
a+="  ";
a+= '短信营销';
return a;
}
}]
});
};

//得到查询的参数
otableinit.queryparams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//这里输入页面分页参数，搜索的关键字key或者自定义的其他搜索参数，如果是get方式发送也可以直接写在上面的url中
};
return temp;
};
return otableinit;
};

在后台上通过返回json数据进行显示，如果是client显示分页，那么返回的json数据为一个jsonarray，如果是server分页返回的是一个jsonobject，格式为
{
“total”:3,
“rows”:[
{“username“”:”姓名1”,”phone”:”电话1”},
{“username“”:”姓名2”,”phone”:”电话2”},
{“username“”:”姓名3”,”phone”:”电话3”}
]
}
注意，这里的total表示共有几条数据，rows是内容，rows里的名称要和上面配置的data内容里的名称一样。
好了 ，这部分就是bootstrap-table前段页面上的写法，下一篇介绍后台的写法。