bootstrap-table:列的显示与隐藏以及动态加载列(自定义加载表头)


	var head_data = []
// 初始化表格
	getColumns()

	function getColumns() {
		// 加载动态表格
		$.ajax({
			url: "json/head.json",
			type: 'get',
			dataType: "json",
			async: false,
			success: function(data) {
				head_data = data
				var options = {
                    //默认表头
					columns: [{
							field: 'checked',
							checkbox: true,
							formatter: stateFormatter

						}, {
							field: 'SerialNumber',
							title: '序号',
							formatter: function(value, row, index) {
								return index + 1;
							},
							align: "center"
						}, {
							field: 'name',
							title: '名称',
							align: "center"
						}, {
							field: 'state',
							title: '状态',
							align: "center"
						}, {
							field: 'ip',
							title: 'IP',
							align: "center"
						}, {
							field: 'mac',
							title: 'Mac',
							align: "center"
						}, {
							field: 'opera',
							title: '制造商',
							align: "center"
						}, {
							field: 'type',
							title: '设备类型',
							align: "center"
						}, {
							field: 'system',
							title: '操作系统',
							align: "center"
						}, {
							field: 'root',
							title: '端口',
							hidden: true,
							align: "center"
						}, {
							field: 'date',
							title: '更新时间',
							align: "center"
						},
						{
							field: 'operate',
							title: '操作',
							align: 'center',
							formatter: actionFormatter,
						},
					]
				};
            //遍历新表头
				for (var i = 0; i < data.length; i++) {
					$.each(data[i].asset_field, function(i, o) {
						options.columns.push({
							"field": i,
							"title": o,
							"hidden": true,
							"align": 'center'
						});

					});
				}
                //渲染数据
				$('#Table').bootstrapTable({
					url: 'json/detail.json',
					method: 'GET', //请求方式(*)
					sortable: true, //是否启用排序
					sortOrder: "asc", //排序方式
					sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
					showColumns: true, //是否显示所有的列(选择显示的列)
					minimumCountColumns: 2, //最少允许的列数
					pageNumber: 1, //初始化加载第一页
					pagination: true, //是否分页
					sidePagination: 'client', //server:服务器端分页|client:前端分页
					pageSize: 10, //单页记录数
					pageList: [10], //可选择单页记录数
					paginationPreText: '上页',
					paginationNextText: '下页',
					//height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
					uniqueId: "ID", //每一行的唯一标识,一般为主键列
					columns: options.columns
				});
			}
		});

	}

//表格复选框
	function stateFormatter(value, row, index) {
		console.log(row.type)
		if (row.state == true)
			return {
				disabled: true, //设置是否可用
				checked: true //设置选中
			};
		return value;
	}

//表格的操作内容:编辑/删除
	function actionFormatter(value, row, index) {
		console.log("value, row, index",value, row, index)
		var id = index;
		var result = "";
		result +=
			"<a href='javascript:;' class='u-btn circle f-mg5' onclick=\"edit_num(\'' + row +'\')\" title='编辑'><span class='fa fa-edit'></span></a>";
		result += "<a href='javascript:;' class='u-btn circle f-mg5' onclick=\"DeleteByIds('" + id +
			"')\" title='删除'><span class='fa fa-trash'></span></a>";
		return result;

	}

//编辑事件
	function edit_num(row){
		console.log(row)
	}
//head.json数据
{
	"code":200,
	"message":"操作成功",
	"data":{
		"id":1,
		"assetType":"手机",
		"assetDes":null,
		"fields":[
			{
				"tId":1,
				"fieldName":"1-123456",
				"fieldDec":"序号"
			},
			{
				"tId":1,
				"fieldName":"1-1345645",
				"fieldDec":"联系人"
			}
		]
	}
}



//detail.json
[
	{
		"name":"10.8.8.88",
		"state":"离线",
		"ip":"10.8.8.88",
		"mac":"6c",
		"opera":"Vmare",
		"type":"手机",
		"system":"Linux",
		"root":"22",
		"date":"2021-06-09",
		"qqname":"xx",
		"order":1,
		"username":"xuxu"
	},
]

    原文作者:追风筝的少女
    原文地址: https://blog.csdn.net/xu_xu_0924/article/details/120429899
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞