jqGrid插件的多个表格同步设置列宽

1 篇文章 0 订阅
0 篇文章 0 订阅

jqGrid中只提供了setGridWidth方法来设置表格的宽度,并没有对外提供setColWidth方法。但在jqGrid的源代码中确能够找到setColWidth,源码如下所示:


有兴趣的可以研究下这个方法的具体逻辑,不过对于实用来说,这个方法貌似很难直接拿来使用。而这里要说的是通过jqGrid提供的监听方法resizeStop来实现动态设置表格列宽的功能。resizeStop是列宽拖动事件,当用户拖动表格列标题之间的分割线调整列宽,松开鼠标后会触发此事件。

jqGrid事件说明详见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

该事件方法包含2个参数:newwidth和index。假设用户拖动的是表格第一列和第二列标题之间的分割线,则index表示的是第一列的索引,而newwidth表示的则是第二列的新宽度(注意不是第一列的新宽度哦^_^)。

我们可以在一个表格的拖动事件中设置另外相同结构表格的对应列的宽度,使它们保持一致,这在多个结构相同的表格共用同一个表格标题的场景中显得尤为重要!!!

那如何获取和设置各个表格的列宽呢???

通过各浏览器的开发者工具查看jqGrid表格页面源码,jqGrid生成的表格的第一行都是没有数据的,而是如下所示的内容:



通常该行的class都固定为“jqgfirstrow”。其td标签的内容都为空,可通过td的style属性来设置列的宽度以及显示/隐藏,jqGrid插件就是通过表格的第一行,来控制对应列的宽度的。


其中,设置宽度时,若设置后不希望出现横向滚动条,需对jqGrid的option的相关属性进行设置。将forceFit属性设置为true,同时shrinkToFit属性不能为false,否则jqGrid将忽略forceFit的设置。


jqGrid的option设置好后,不要忘记需将拖动分割线的前后各一列的宽度进行同时设置(参见上面的index和index+1),否者仍将出现横向滚动条。
如此,即可实现仅调整一个表格的列宽,就可使其他所有表格的列宽同时得到调整,且宽度一致。微笑

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤设置 jqGrid 表格样式: 1. 引入 jqGrid 插件和样式文件。 ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script> ``` 2. 在 HTML 页面中添加一个 div 元素作为表格容器。 ``` <div id="grid"></div> ``` 3. 使用 JavaScript 代码初始化 jqGrid 表格设置样式。 ``` $(function(){ $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 150 }, { name: "age", label: "Age", width: 50 }, { name: "address", label: "Address", width: 200 } ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "asc", caption: "Sample Grid" }); $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false }); }); ``` 4. 在 CSS 文件中添加样式。 ``` .ui-jqgrid { font-size: 14px; } .ui-jqgrid tr.jqgrow td { padding: 5px; } .ui-jqgrid .ui-jqgrid-hdiv { background-color: #f2f2f2; } .ui-jqgrid .ui-jqgrid-btable { border-collapse: separate; border-spacing: 0px; } .ui-jqgrid .ui-jqgrid-pager { background-color: #f2f2f2; border-top: none; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table { margin: 0; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button { border: none; margin: 0 5px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover { background-color: #e6e6e6; } ``` 注意:样式文件中的样式可以根据需要进行修改,以上只是一个示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值