bootstrap 数据表格

最新推荐文章于 2024-09-04 18:51:10 发布

tj146780

最新推荐文章于 2024-09-04 18:51:10 发布

阅读量2.4k

点赞数 2

分类专栏： bootstrap

本文链接：https://blog.csdn.net/weixin_39462109/article/details/81284656

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1：在界面上添加一个table

<table id="risk_insurancetab" class="table table-hover"></table>

2：在js中对数据进行设置

$("#risk_insurancetab").bootstrapTable({//为前面表的ID
		method:"get",
		contentType: "application/x-www-form-urlencoded",
		url: romoteurl + '/****************?datatype=jsonp',
	     dataType: "jsonp",
		height: tableHeight(),
		toolbar: '#toolbar',
		striped: true, //显示更行变色
		//showToggle: true, //显示视图切换按钮
		dataField: "rows",
		pageNumber: 1, //初始化加载第一页，默认第一页
		pagination: false, //是否分页
		queryParamsType: 'limit',
		queryParams: queryParams,//传递的参数，这个是一个方法
		sidePagination: 'server',
		//showRefresh: true, //刷新按钮
		//showColumns: true, //是否显示所有的列
		clickToSelect: true, //是否启用点击选中行
		toolbarAlign: 'right',
		buttonsAlign: 'right', //按钮对齐方式 
		singleSelect: true,
		showFooter: true,//是否显示底部数据，这个地方可以用来显示汇总数据，默认是不显示的
		columns: [{
			title: '险种',
			field: 'riskcode',
			//width: 100,
			align: 'center',
			valign: 'middle',
			sortable: true,
		}, {
			title: '保单数',
			field: 'sumPolicyNo',
			align: 'center',
			valign: 'middle',
			sortable: true,
			footerFormatter: function (value) {
          //这个地方显示的就是汇总的数据，要设置showFooter为true
		        var count = 0;
		        for (var i in value) {
		            count += value[i].sumPolicyNo;
		        }
		        return '合计:'+  count;
		    }
		},{title: '保费',
			field: 'sumpremium',
			//width: 100,
			align: 'center',
			valign: 'middle',
			sortable: true,
			footerFormatter: function (value) {//这个地方显示的就是汇总的数据
		        var count = 0;
		        for (var i in value) {
		            count += value[i].sumpremium;
		        }
		        return '合计:'+  count;
		    }
		}, {
			title: '操作',
			field: 'riskcode',
			//width: 100,
			
			align: 'center',
			valign: 'middle',
			sortable: true,
			formatter:riskcodeFunctionAlty,//这个地方是一个方法，把数据写到了方法中
			footerFormatter: function (value) {
		        
		        return    '<a href="car_insurance.html?startdate='+$(".startTime").val()+'&enddate='+$(".endTime").val()+'&riskcode=">查看详情</a>';
		    }
		}
	    ],
		locale: 'zh-CN', //中文支持,

	});

//参数设置
function queryParams(params) {
	 
	return {
		limit: params.limit,
		page: params.pageNumber,
		applicode:'*****',
		startdate:$(".startTime").val(),
		enddate:$(".endTime").val()
	}
}

/**************************显示字段详情******************************/
function riskcodeFunctionAlty(value,row,index)
{
      return [
      '<a href="***.html?startdate='+$(".startTime").val()+'&enddate='+$(".endTime").val()+'&riskcode='+value+'">查看详情</a>'
      ].join('')
	
}

参数和字段的详情也可以直接写到bootstrapTable中。

3：刷新表中的数据

$("#btn_risk_insurance_search").click(function(){
	
	
	
	$('#risk_insurancetab').bootstrapTable('refresh', {
		query: {
			"applicode":'*****',
			startdate:$(".startTime").val(),
		    enddate:$(".endTime").val()
		},
		url: romoteurl + '/********************?datatype=jsonp',
	});
});

4:实现的样式为：