jqgrid 横向滚动条解决方法(其他问题总结)

最新推荐文章于 2023-10-03 13:11:34 发布

原创最新推荐文章于 2023-10-03 13:11:34 发布 · 2.1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid

jqgrid 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在前端开发中解决表格布局、滚动条控制、表头操作及表宽设置的方法，包括如何调整表格列宽、实现隐藏表头、设置表宽、强制控制滚动条显示和隐藏，以及如何通过jQuery插件`roadLampGrid`来动态调整表格宽度。

1.横向滚动条解决方法

var w2 = parseInt($('.ui-jqgrid-labels>th:eq(2)').css('width'))-3;
	$('.ui-jqgrid-lables>th:eq(2)').css('width',w2);
	$('#p1_grid_data tr').find("td:eq(2)").each(function(){
	$(this).css('width',w2);
})

2.设置表头宽度

gridComplete:function(){//表格加载执行
	$(this).closest('.ui-jqgrid-view').find('div.ui-jqgrid-hdiv').width($(this).width()+15);
}

3.隐藏表头

gridComplete:function(){//表格加载执行
	$(this).closest('.ui-jqgrid-view').find('div.ui-jqgrid-hdiv').hide();
}

4.设置表格宽度

gridComplete:function(){//表格加载执行
	$roadLampGrid.setGridWidth($(this).parent().width());
},

5.强制移除和添加滚动条 (x/y)

$("#incomegrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
$("#incomegrid").closest(".ui-jqgrid-bdiv").css({ "overflow-y" : "hidden" });
$("#incomegrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
$("#incomegrid").closest(".ui-jqgrid-bdiv").css({ "overflow-y" : "scroll" });

6.控制显示隐藏表格按钮

hidegrid:false,//控制显示隐藏表格按钮