初学Bootstrap Table

       苦于自己是一个刚入职的小白,没有写过前台,只写后台,在前台上面吃了亏,现在抽时间整理,我在Bootstarp所遇到的问题,并将其一一记录下来。

       不得不说Bootstarp Table的功能很是强大,解决了我们在jsp中繁琐的分页问题,更好的展示数据,做到了简洁、美观。下面来说一下Bootstarp的一大核心,表格功能,话不多说,直接贴代码。

Bootstarp Table:

1.列表数据传递是将要查询的条件数据获取到,传给后台进行处理,最后返回。

//列表数据传递
function queryParams(params) {
    var param = {
	limit: params.limit, // 页面大小
        offset: params.offset, // 页码
        countyId : $("#countySearch").val(), //区域ID
        pollSourceId: $("#pollSourceSearch").val(), //企业ID
        areaStartTime: $("#areaStartTime").val(), //备份开始时间
        areaEndTime: $("#areaEndTime").val(), //备份结束时间
        fileStartTime: $("#fileStartTime").val(), //文件上传开始时间
        fileEndTime: $("#fileEndTime").val(), //文件结束时间
    }
    return param;
}

2.编写Bootstarp 表格常用的默认参数,将1的数据 queryParams通过url请求传给后台,进行查询,最后得到查询后的数据。

/**
 * 表格table
 */
function showTable(){
    $("#tb_equipReportList").bootstrapTable({
        url : '', //请求后台的url(*)
	method : 'post', //请求方式(*)
	toolbar : '#toolbar', //工具按钮用哪个容器
	striped : true, //是否显示行间隔色
	contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
	cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
	dataType : "json",
	pagination : true, //是否显示分页(*)
	sortable : true, //是否启用排序
	sortOrder : "asc", //排序方式
	queryParams : queryParams, //传递参数(*)
	sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*)
	pageNumber : 1, //初始化加载第一页,默认第一页
	pageSize : 10, //每页的记录行数(*)
	pageList : [10, 25, 50, 100], //可供选择的每页的行数(*)
        search : false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务器
	strictSearch : true,
	showColumns : false, //是否显示所有的列
	showRefresh : false, //是否显示刷新按钮
	minimumCountColumns : 2, //最少允许的列数
	clickToSelect : true, //是够启用点击选中行
	uniqueId : "onlineDeviceInfoId", //每一行的唯一标识,一般为主键列
	showToggle : false, //是否显示详细视图和列表视图的切换按钮
	cardView : false, //是否显示详细视图
	detailView : false, //是否显示父子表
	columns : [{
			checkbox : true
		},{
			title : '序号',
			formatter : function (value, row, index) {
				var pageNumber = $('#tb_equipReportList').bootstrapTable('getOptions').pageNumber;
				var pageSize = $('#tb_equipReportList').bootstrapTable('getOptions').pageSize;
				return (pageNumber - 1) * pageSize + index + 1;
			}
		},{
			field : 'onlineDeviceInfoId',
			title : 'Id',
			visible : false
		},{
			field : 'countyName',
			title : '区域名称'
		},{
			field : 'pollSourceName',
			title : '企业名称'
		},{
			field : 'outName',
			title : '监控点'
		},{
			field : 'deviceInfoTime',
			title : '信息备案时间'
		},{
			field : 'deviceInfoText',
			title : '备案信息'
		},{
			field : 'fileUploadTime',
			title : '上报时间'
		},{
	        field: 'filesName',
	        title: '附件',
	        formatter: function (value, row, index) {
	            var file=value.split(",");
	            if (value == "" || value == "null") {
	                return "无附件";
	            }
	        }
	    }, {
	        field: 'sysFiles',
	        title: '操作',
	        formatter: function (value, row, index) {
	            if (value.length ==0) {
	                return "无附件";
	            } else if(value.length ==1&&value[0].fileUrl==null){
	                return "无附件";
	            }else {
	            	var fileUrl = row.sysFiles[0].fileUrl;
	            	var fileName = row.sysFiles[0].fileName;
	            	var onlineDeviceInfoId = row.onlineDeviceInfoId;
	            	var c = '<a class="green-color" href="#" onclick="downloadFile(\'' +
	            	onlineDeviceInfoId + '\',\''+fileUrl+'\',\''+fileName+'\')">下载</a>'
	            	return c;
	            }
	        }
	    }]
	})
}

3.效果展示

 

阅读更多
换一批

没有更多推荐了,返回首页