在我们开发项目当中经常会使用到很多插件，它们能够加快我们项目开发进度，特别是前端页面的展示控件有很多种类的，目前给大家介绍项目中经常使用到一种插件------bootstrap的表格构建及相关使用要点，希望对大家有所帮助
不用多说直接上代码~
JavaScript代码
//初始化grid
function InitTable() {
var oTableInit = new Object();
//初始化Table
$("#table").bootstrapTable('destroy');
$('#table').bootstrapTable({
url: 'StudentFileController/StudentFileController_listPage.do', //请求后台的URL（*）
method: 'post', //请求方式（*）
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
//cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
//sortable: true, //是否启用排序
//sortOrder: "asc", //排序方式
queryParams: Search,
paginationShowPageGo: true,
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [5, 10, 25, 50, 100], //可供选择的每页的行数（*）
//search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
//strictSearch: true,
showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
//minimumCountColumns: 1, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: $(window).height()*0.825, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
singleSelect : false, //是否单选
columns: [{
field: '',
title: '',
checkbox: true,
formatter:function(value,row,index){
return '<div style="width:30px;"></div>'
}
}, {
field: 'name',
title: '学生姓名',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:80px;">'+value+'</div>'
}
},{
field: 'sex',
title: '性别',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:50px;">'+value+'</div>'
}
}, {
field: 'age',
title: '年龄',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:50px;">'+value+'</div>'
}
}, {
field: 'parents',
title: '家长',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:180px;">'+value+'</div>'
}
}, {
field: 'information_comefrom',
title: '信息来源',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}else if(value=="自定义"){
value = row.channel_other;
if(typeof(value) =="undefined"){
value = "--";
}
}
return '<div style="width:100px;">'+value+'</div>'
}
}, {
field: 'promotionName',
title: '推广活动',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:100px;">'+value+'</div>'
}
},{
field: 'school',
title: '公立学校',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:80px;">'+value+'</div>'
}
}, {
field: 'grade',
title: '年级',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:80px;">'+value+'</div>'
}
},{
field: 'CREATE_USER',
title: '创建人',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:80px;">'+value+'</div>'
}
},{
field: 'create_date',
title: '创建时间',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:150px;">'+value+'</div>'
}
},{
field: 'update_date',
title: '修改时间',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:150px;">'+value+'</div>'
}
},{
field: 'remark',
title: '备注',
formatter:function(value,row,index){
if(value == "" || value == null || value == "undefined"){
value = "--"
}
return '<div style="width:400px;">'+value+'</div>'
}
}],
onDblClickRow:function(row,e){
$("#table").bootstrapTable("check",e[0].rowIndex-1);
ShowEditOrViewDialog('view');
}
});
//参数传递
function Search(params) {
//console.log(Number(params.offset)/Number(params.limit))
toffset = params.offset;
tlimit = params.limit;
var temp = {
page:params.offset,
rows: params.limit,
name:$("#name_search").val(),
class_id:$("#class_name_search").val(),
birthday_start:$("#birthday_start").val(),
birthday_end:$("#birthday_end").val(),
home_village_query: $('#home_village_query').val(),
termId: $('#term_name_search').val(),
promotionID: $('#promotion_ID_search').val(),
};
return temp;
}
<c:if test="${not empty foffset}">
var foffset=${foffset};
var flimit=${flimit};
var pageNums=(foffset/flimit)+1;
if(flimit !=null && flimit !="undefined" && pageNums !=null && pageNums !="undefined"){
$("#table").bootstrapTable('refreshOptions', {
pageNumber:pageNums,
pageSize:flimit
});
}
</c:if>
};
//绑定查询事件
function Query(){
InitTable();
}
//绑定清除事件
function QueryClear(){
$("#name_search").val("");
$("#class_id_search").val("");
$("div #class_id>.sod_label").html("请选择");
$("div #class_id ul li").removeClass("selected");
$("div #class_id ul li:first").addClass("active selected");
$("#birthday_start").val("");
$("#birthday_end").val("");
$('#home_village_query').val();
$("#term_name_search").val("");
$("div #term_id>.sod_label").html("请选择");
$("div #term_id ul li").removeClass("selected");
$("div #term_id ul li:first").addClass("active selected");
$("#promotion_ID_search").val("");
$("div #promotion_ID_search>.sod_label").html("请选择");
$("div #promotion_ID_search ul li").removeClass("selected");
$("div #promotion_ID_search ul li:first").addClass("active selected");
$('#class_name_search').val('');
//重载table数据
InitTable();
}HTML代码
<!-------------------------------搜索框----------------------------------->
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline" id="queryForm">
<div class="form-group">
<!-- 学生姓名 -->
<label for="name_search" class="control-label">学生姓名：</label>
<input type="text" class="form-control input-sm" ID="name_search" name="name" />
</div>
<div class="form-group">
<!-- 在读班级-->
<label for="class_name_search" class="control-label">在读班级：</label>
<select id="class_name_search" name="class_id" class="form-control input-sm">
<option value="">请选择</option>
<c:forEach items="${classList}" var="schoolClass">
<option value="${schoolClass.id}">${schoolClass.name}</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<!-- 根据学期搜索-->
<label for="class_name_search" class="control-label">学期：</label>
<select id="term_name_search" name="term_id" class="form-control input-sm">
<option value="">请选择</option>
<c:forEach items="${termList}" var="term">
<option value="${term.id}">${term.yearQuarter}</option>
</c:forEach>
</select>
</div>
<!-- 根据推广活动搜索-->
<div class="form-group">
<label for="promotion_ID_search" class="control-label">推广活动：</label>
<select class="form-control" style="padding: 0" id="promotion_ID_search" name="promotion_ID_search" >
<option value="">请选择</option>
<c:forEach items="${promotionList}" var="promotion">
<option value="${promotion.promotion_ID}">${promotion.promotionName}</option>
</c:forEach>
</select>
</div>
<a href="javascript:void(0);" class="btn btn-primary" onclick="Query();" >查询</a>
<a href="javascript:void(0);" class="btn btn-primary" onclick="QueryClear();">清除</a>
</form>
</div>
</div>
<div>
<div id="toolbar">
<c:forEach items="${BUTTONS}" var="btn">
<c:if test="${btn.id != null}">
<a href="javascript:void(0);" class="btn ${btn.menuIcon} marR10" onclick='${btn.menuUrl}'>${btn.menuName}</a>
</c:if>
</c:forEach>
</div>
<!-------------------------------详细信息展示表格----------------------------------->
<table id="table" style="font-size: 14px"></table>
</div>相关其他操作方法后续补充更新中......
效果图
