Bootstrap Table

前端

1.BootStrap Table

1.1.1 HTML

<div>
		<div class="panel-body table-responsive">
			<table id="productTable" class="table">
			</table>
		</div>
</div>

1.1.2 js初始化（开发常用方法）

$('#productTable').bootstrapTable('refreshOptions',{pageNumber:1,pageSize:10});
var tableObject= $.find("#productTable");
$(tableObject).bootstrapTable({
	locale: 'zn-CN',
	pageSize: 10,
	pageNumber: 1,
	pageList: [10, 25, 50,100],
	clickToSelect: true,
	striped: true,
	ajax: function(ajaxParams) {
		json.NEXT_KEY = (ajaxParams.data.offset /ajaxParams.data.limit  + 1) + "";
		json.PAGE_SIZE = ajaxParams.data.limit + "";
		//json.SORT_NAME = ajaxParams.data.sort;
		//json.SORT_ORDER = ajaxParams.data.order;
		YT.ajaxData({
			url:dataUrl,
			params: json,
			success: function (msg) {
				var resultData = {total: msg.TOTAL_NUM||0,rows:  msg.LIST|| []};
				ajaxParams.success(resultData);
			}
		});
	},
	pagination: true,
	sidePagination: 'server',
	//sortName: '表格头排序字段',
	//sortOrder: 'desc',
	formatNoMatches: function() {
		return "暂无数据";
	},
	columns: [
	{
		checkbox: true,
		singleSelect : true,
		align: 'center'
	}，
	{
		field: '',
		title: '操作',
		formatter: removeHtml,
		align: 'center'
	}]
});	
// 自定义table列
function removeHtml(value,row,index){
		var data = $("#productTable").bootstrapTable('getData');
		var params= data[index];
		return [
			'<a class="btn btn-xs btn-primary" >自定义一些方法</a>'
		].join('')
	}
// 常用方法
1.获取当前table初始化数据
	var data = $("#productTable").bootstrapTable('getData');
	data-index：该属性是bootstrap table 下角标
2.获取多选选中行的数据
	var data = $("#productTable").bootstrapTable('getSelections');
3.清楚多选框全选
	$("#prodTable input[type='checkbox']:checked").prop("checked",false);
4.获取每页显示的数量
	var pageSize = $('#prodTable').bootstrapTable('getOptions').pageSize;
5.获取当前是第几页
	var pageNumber = $('#prodTable').bootstrapTable('getOptions').pageNumber;
6.隐藏列、显示列（可用于初始化table之后的列的动添显示与隐藏，执行该时间之后数据会回滚到初始化table时的数据）
	$("#prodTable").bootstrapTable("hideColumn","GROUP_LEADER_PRICE")		
	$("#prodTable").bootstrapTable("showColumn","GROUP_LEADER_PRICE")

1.1.3 总计

function statisticsTableInit() {
    	var columns = [
    		{
    			field: 'column1',
    			title: '表头1',
    			align: 'center'
    		},
    		{
    			field: 'column2',
    			title: '表头2',
    			align: 'center'
    		},
    		{
    			field: 'column3',
    			title: '表头3',
    			align: 'center'
    		}
    	];
        pageList.find("#prodTable").bootstrapTable({
            locale: 'zn-CN',
            columns: columns
        });
    }
	function statisticsAjax(json)  {
		YT.ajaxData({
			url:YT.dataUrl,
			params: json,
			success: function (msg) {
				if(msg && msg.LIST){
					pageList.find("#prodTable").bootstrapTable('load',(msg.LIST));
				}
			}
		});
	}