一步步实现 easyui datagrid表格宽度自适应,效果非常好

前端之家收集整理的这篇文章主要介绍了一步步实现 easyui datagrid表格宽度自适应,效果非常好前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一步步实现 easyui datagrid表格宽度自适应,效果非常好:

一、设置公共方法,使得datagrid的属性  fitColumns:true

$(  //初始加载,表格宽度自适应 $(document).ready(  //浏览器窗口大小变化后,表格宽度自适应 $(window).resize(<span style="color: #008000;">//<span style="color: #008000;">表格宽度自适应,这里的#dg是datagrid表格生成的div标签
<span style="color: #0000ff;">function
<span style="color: #000000;"> fitCoulms(){
$('#dg'<span style="color: #000000;">).datagrid({
fitColumns:<span style="color: #0000ff;">true<span style="color: #000000;">
});<span style="color: #000000;">
}

 

二、在$('#dg').datagrid中设置columns的各列宽度比例

当 fitColumns:true时,columns里的width变为改列宽度占表格总宽度大小的比例,而不是实际宽度

下面例子中,各列的宽度大小比为:250:200:110:114

统计的表格数据渲染 $('#frequencyDg'0'get''正在加载中,请稍等... ', fitColumns:, emptyMsg: '无记录'(data) { classify = $("#classify"'#frequencyPp').pagination('refresh''name''广告名称' align:'center''startTime''投放日期' align:'center''playCount''播放次数' align:'center''text''userSawTimes''用户观看次数''text'

 

三、将body设置为min-width:1100px。使得datagrid表格宽度大于浏览器宽度时,下面可以出现横向滚动条,可以横向拉动看到整个datagrid数据。

000-Box-sizing: border-Box; font-

显示效果如下图:

 

原文链接:https://www.f2er.com/jquery/403431.html

猜你在找的jQuery相关文章