easyui表格datagrid列宽自适应

最新推荐文章于 2023-03-24 15:34:40 发布

hqa8611138

最新推荐文章于 2023-03-24 15:34:40 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hqa8611138/article/details/50903568

使用fitcolumns="true"参数就可以了。如下所示：

								<table id="alldg" class="easyui-datagrid" fitcolumns="true"
									style="width: 100%; height: 100%"
									data-options="
										iconCls: 'icon-edit',
										sortName:'staStatus',
										sortOrder:'asc',
										remoteSort: false,
										singleSelect: true,
										url: '/seismis/monitor/getAllMonitorList',
										method: 'get',
										onRowContextMenu: onRowContextMenu">
									<thead>
										<tr>
											<th data-options="field:'smart1',width:fixTh()">
												(强)${adaptData.monName1 }
											</th>
											<th data-options="field:'smart2',width:fixTh()">
												(强)-${adaptData.monName2 }
											</th>
											<th data-options="field:'smart3',width:fixTh()">
												(强)-${adaptData.monName3 }
											</th>
											<th data-options="field:'smart4',width:fixTh()">
												(强)-${adaptData.monName4 }
											</th>
											<th data-options="field:'smart5',width:fixTh()">
												(强)-${adaptData.monName5 }
											</th>
											<th data-options="field:'smart6',width:fixTh()">
												(强)-${adaptData.monName6 }
											</th>
											
										</tr>
									</thead>
								</table>

测试：调用隐藏列表6和5后，列宽自适应调整：

function hideColumn(){
		$('#alldg').datagrid('hideColumn', 'smart6');
		$('#alldg').datagrid('hideColumn', 'smart5');

	}