Bootstrap Table简单操作

<div style="margin-top: 10px;">
	<table id="list">
	</table>
</div>
function init() {
	var h = $(window).height() - 100;//高度设置
	$("#list").bootstrapTable({
		// 对应table标签的id
		method: "post",
		contentType: "application/x-www-form-urlencoded",
		url: window.globalConfig.url + "member/findUserList", // 获取表格数据的url
		ajaxOptions: {
			headers: {
				"token": session.token
			}
		},
		height: h,
		queryParams: queryParams, // 参数
		queryParamsType: "undefined", // 参数格式,发送标准的RESTFul类型的参数请求
		cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
		pagination: true, // 在表格底部显示分页组件,默认false
		showRefresh: false,
		singleSelect: false,
		clickToSelect: true, // 是否启用点击选中行
		pageSize: 10, // 页面数据条数
		pageNumber: 1, // 首页页码
		sidePagination: 'server',
		responseHandler: function(res) {
			var res = {
				rows: res.data,
				total: res.count
			}
			return res;
		},
		columns: [
			{
				field: 'selectItem',
				checkbox: true, // 显示一个勾选框
				align: 'center' // 居中显示
			},
			{
				field: 'id', 
				title: '主键', 
				visible: false,
				align: 'center', // 左右居中
				valign: 'middle' // 上下居中
			},
			{
				field: 'name',
				title: '会员名',
				align: 'center',
				valign: 'middle'
			},{
				field: 'tel',
				title: '手机号',
				align: 'center',
				valign: 'middle'
			},
			{
				field: 'cardnum',
				title: '会员卡号',
				align: 'center',
				valign: 'middle',
				width: 100 //设置宽度
			},
			{
				field: '',
				title: '操作',
				align: 'center',
				valign: 'middle',
				formatter: function(value, row, index) {
					return "<button class='btn btn-success' οnclick='more(" + JSON.stringify(row).replace(/"/g, '&quot;') +
						");'>详情</button>"+
						"&nbsp;&nbsp;&nbsp;&nbsp;<button class='btn btn-info' οnclick='edit(" + JSON.stringify(row).replace(/"/g,
							'&quot;') + ");'>编辑</button>"
				}
			}
		],
		onLoadSuccess: function(data) { // 加载成功时执行
			$("#list").find("tr th").css({
				"background" : "#eceff4",
				"color" : "#333",
			});
		},
		onLoadError: function(data) { // 加载失败时执行
			console.log(data)
		}
	})
}
//条件
function queryParams(pageReqeust) {
	var content = $("#content").val();
	var store = $("#store").val();
	var state = $("#state").val();
	if (content) {
		pageReqeust.content = content;
	}
	if (store != -1) {
		pageReqeust.store = store;
	}
	if (state != -1) {
		pageReqeust.state = state;
	}
	return pageReqeust;
}

表格列宽平分,在table标签中设置属性

style="table-layout: fixed;word-break: break-all;"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值