在我们开发项目当中经常会使用到很多插件,它们能够加快我们项目开发进度,特别是前端页面的展示控件有很多种类的,目前给大家介绍项目中经常使用到一种插件------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"){