jqGrid调整宽度

阴雨霉湿

已于 2023-06-26 10:52:55 修改

阅读量1.1k

点赞数

文章标签： javascript jquery jqGrid jqGrid宽度

于 2023-06-26 10:49:42 首次发布

本文链接：https://blog.csdn.net/qq_38652288/article/details/131391802

版权

文章介绍了在使用jqGrid时，如何处理隐藏或显示列后表格自适应宽度不正确的问题。通过设置shrinkToFit为true，配合获取和设置表格宽度，确保在隐藏或显示列后表格宽度能正确调整。同时，文章展示了初始化jqGrid、添加序号列、查询数据以及处理列显示隐藏的函数示例。

摘要由CSDN通过智能技术生成

提示： 适用于 shrinkToFit = true 的情况下。

// 获取Element
let dataGrid = $("#dataGrid");

// 获取表格当前宽度
let gridWidth = dataGrid.jqGrid('getGridParam', 'width');

// 设置表格宽度
dataGrid.jqGrid('setGridWidth', gridWidth, true);

以上代码一般为了解决使用 $("#dataGrid").setGridParam().hideCol("column1"); 隐藏某列，或$("#dataGrid").setGridParam().showCol("column1"); 显示某列后导致自适应宽度不正确的问题。

解决示例：

// 定义表格元素
let dataGrid;
// 定义表格宽度
let gridWidth = 0;

// 初始化数据表格
function initDataGrid() {
	//创建jqGrid组件
	$("#dataGrid").jqGrid({
		// url: '', //组件创建完成之后请求数据的url
		data: [],
		datatype: "json",
		autowidth: true, // 自动宽度
		shrinkToFit: true, // 缩小以适应
		height: "auto",
		scrollOffset: 0,
		rownumbers: true,
		rownumWidth: 50,
		colNames: ['列1',  '列2', '列3'], // 列名
		colModel: [
			{
				name: 'column1',
				index: 'column1',
				width: 50,
				sortable: false,
			},
			{
				name: 'column2',
				index: 'column2',
				width: 50,
				sortable: false,
			},
			{
				name: 'column3',
				index: 'column3',
				width: 50,
				sortable: false,
			}
		],
		rowNum: 20, // 每页数据条目数
		rowList: [20, 50, 100], // 可供用户选择每页数据条目数
		pager: '#pagerBar', // 分页器的div的id
		mtype: "GET", // 请求类型，可选GET/POST
		viewrecords: true
	});

	// 创建分页器
	$("#dataGrid").jqGrid('navGrid', '#pagerBar', {
		edit: false,
		add: false,
		del: false,
		search: false,
		refresh: false
	});
	
	// 添加序号列
	$("#jqgh_dataGrid_rn").append('序号');

	// 获取表格元素
	dataGrid = $("#dataGrid ");

	// 获取表格宽度
	gridWidth = dataGrid .jqGrid('getGridParam', 'width');
}

// 查询数据
function searchData() {
	if(bool)
		searchData1();
	else 
		searchData2();
}

// 查询数据1
function searchData1() {
	// 更改列名
	dataGrid .jqGrid("setLabel", 1, "数据1列1");
	dataGrid .jqGrid("setLabel", 2, "数据1列2");
	dataGrid .jqGrid("setLabel", 3, "数据1列3");
	
	// 隐藏列2
	dataGrid.setGridParam().hideCol("column2");

	// 调整宽度
	dataGrid.jqGrid('setGridWidth', gridWidth, true);

	// 查询数据
	dataGrid.jqGrid('setGridParam', {
		url: 'url1'
		page: 1,
	}).trigger("reloadGrid");
}

// 查询数据2
function searchData2() {
	// 更改列名
	dataGrid .jqGrid("setLabel", 1, "数据2列1");
	dataGrid .jqGrid("setLabel", 2, "数据2列2");
	dataGrid .jqGrid("setLabel", 3, "数据2列3");

	// 展示列2
	dataGrid.setGridParam().showCol("column2");

	// 调整宽度
	dataGrid.jqGrid('setGridWidth', gridWidth, true);

	// 查询数据
	dataGrid.jqGrid('setGridParam', {
		url: 'url2'
		page: 1,
	}).trigger("reloadGrid");
}

// 页面加载完毕后执行
$(() => {
	// 初始化数据表格
	initDataGrid();
});