`

数据表格JqGrid自适应列宽度

 
阅读更多

       jqgrid 是一个比较好的前端数据表格，可是因为没有很详细的API，导致有时候不知所以然。

 

        目的：自动显示完jqgrid中每一列的内容，而不是隐藏起来。没找到jqgrid提供的自适应列宽度的方法，只好参考了下jqgrid最终生成的DOM结构，直接用jquery操作DOM结构实现自适应列宽度功能。

 

　　实现方法：用一个新的表格，样式继承自jqgrid的样式，用来计算数据源中每一列的实际宽度，然后设置标头和内容表格中用来控制宽度的单元格。

 

 　　备注：jqgrid版本为jqGrid  4.4.1，如果使用其他版本的jqgrid，可能DOM结构不一样，需要参考最终的DOM结构来修改部分代码。

 

　　ｂｕｇ：当使用jqgrid的页头拖拽实现列宽修改时，出现的拖拽线和单元格不一致。

jqgrid自适应列宽度修改前后效果对比

前：

后：

 

源代码如下

<html>
<head>
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"> </script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"> </script>
</head>
<body><!-----用来计算单元格内容实际长度的--------->
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" style="position:absolute;top:-9999px"><div class="ui-jqgrid-view">
<div class="ui-jqgrid-bdiv"><div style="position: relative;"><table cellspacing="0" cellpadding="0" border="0"><tr class="ui-widget-content jqgrow ui-row-ltr" style="table-layout:table"><td id="tdCompute" style="background:#eee;width:auto"></td></tr></table></div></div></div></div>
<!-----用来计算单元格内容实际长度的--------->
<table id="grid"></table>
<div id="pager"></div>
<input type="button" value="刷新" onclick='jQuery("#grid").trigger("reloadGrid");' />

<script type="text/javascript">
     $(function () {
         jQuery("#grid").jqGrid({
             datastr: '{"pageNo":1,"pageSize":4,"list":[{"id":"1","name":"selina","age":"女","q":"418114362"},{"id":"2","name":"jqGrid没有好的中文帮助需要。。。","age":"女","q":"418114362"},{"id":"3","name":"test托尔斯泰","age":"女","q":"418114362"}],"totalCount":8,"totalPage":2,"success":true}',
             datatype: "jsonstring",
             viewrecords: true,
             jsonReader: {
                 repeatitems: false,
                 total: "lastPageNo",
                 page: "pageNo",
                 records: "totalCount",
                 root: "list"
             },
             gridComplete:function(){doResize()},
             prmNames: {
                 page: "pageNo",    // 表示请求页码的参数名称  
                 rows: "pageSize",    // 表示请求行数的参数名称  
                 sort: "sort", // 表示用于排序的列名的参数名称  
                 order: "dir" // 表示采用的排序方式的参数名称  
             },
             height:200,
             colModel: [
                   { name: 'id', index: 'id'},
                   { name: 'name', index: 'name'},
                   { name: 'age', index: 'age' },
				   { name: 'q', index: 'q' }
               ],
             rowNum: 10,
             rowList: [10, 20, 30],
             caption: "jqgrid自适应宽度"
         });
     }); 
     function doResize(){
       var td=$('#tdCompute')//获取计算实际列长度的容器
           ,tds//临时保存列
           ,arr=[];//用于保存最大的列宽
        //遍历每行获得每行中的最大列宽
       $('#gview_grid .ui-jqgrid-htable tr,#grid tr:gt(0)').each(function(){
          $(this).find('td,th').each(function(idx){
            arr[idx]=Math.max(arr[idx]?arr[idx]:0,td.html($(this).text())[0].offsetWidth);
          })         
       });
       $('#gview_grid th').each(function(idx){this.style.width=arr[idx]+'px'});//设置页头单元格宽度       
       $('#grid tr:eq(0) td').each(function(idx){this.style.width=arr[idx]+'px'});//设置内容表格中控制单元格宽度的单元格，在第一行
       
       var total=$('#grid').closest('.ui-jqgrid-bdiv')[0].scrollWidth;//获取表格宽度
       $('#grid,#gview_grid .ui-jqgrid-htable').css({width:total});//设置表头表格和内容表格宽度
       $('#gbox_grid,#gview_grid,#gview_grid>div:gt(0)').css({width:total+15});//设置表头表格和内容表格父容器的宽度
     }
 </script>
</body>
</html>

 
 

 提供该文章的附件！

  • 大小: 2.8 KB
  • 大小: 3 KB
分享到：
| java短信接口 ，发送短信(方式二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqGrid的自适应表格

    shrinkToFit: true, // 自适应宽度，使表格宽度与父容器相匹配 height: 'auto', // 自动调整高度，根据数据数量和窗口大小 loadComplete: function () { var $self = $(this); if ($self.jqGrid('getGridParam'...

    jqGrid随窗口大小变化自适应大小的示例代码

    下面我们将详细探讨两种实现jqGrid自适应大小的方法。 **方法一：基于窗口宽度自适应** 这种方法主要用于使jqGrid的宽度随窗口宽度的变化而改变，确保表格始终充满整个视口。以下是一个示例代码： ```javascript ...

    实现jqGrid三级表头功能，支持冻结，拖动

    要启用此功能，我们需要在初始化jqGrid时设置`shrinkToFit`为`false`，以防止表格自适应宽度导致冻结列消失。 至于拖动列，jqGrid通过`sortable`选项支持列的拖放排序。默认情况下，列是不可排序的，我们需要将`...

    JqGrid中文API文档

    JqGrid还提供了其他高级功能，如行选择、列自适应、导出数据、树形结构展示等。通过配置`multiselect`、`autoresizeAllColumns`、`gridview`等参数，可以启用这些特性。 通过深入学习JqGrid中文API文档，开发者可以...

    jqGrid.zip

    1. **数据展示**：JqGrid可以轻松地展示成百上千行的数据，并支持多种布局模式，如固定列宽、自适应宽度等。用户可以根据需求自由调整列的显示。 2. **数据操作**：提供了排序、搜索、分页等基础功能。用户可以通过...

    jqGrid超详细属性说明(追加整理)整合API,示例

    `autowidth` 选项允许表格自动调整宽度，当设为 `true` 时，表格会根据内容自适应宽度。`pager` 参数用来定义分页控件的位置，如 `'#pjqgajax'` 表示分页条在 id 为 `pjqgajax` 的元素内。`sortname` 指定默认排序的...

    jqGrid超详细属性说明(追加整理)[收集].pdf

    - `shrinkToFit`: 控制列宽是否根据表格总宽度自适应，`true`表示自适应，`false`则保持列宽不变，可能导致水平滚动条出现。 - `autowidth`: 是否自动设置表格宽度，`true`表示自动调整，`false`则不调整。 - `...

    Jqgrid表格随窗口大小改变而改变的简单实例

    在这个简单实例中，我们将探讨如何使JqGrid表格随着浏览器窗口大小的调整而自动调整其宽度，确保表格始终保持良好的布局。 首先，我们需要理解JqGrid的基本结构。JqGrid通常包含一个表格（`&lt;table&gt;`）和一个分页器...

    整理了12款Javascript 表格控件(DataGrid)

    它提供了自适应栏宽、保存表格状态、隐藏列、动态创建表格和Ajax数据自动加载等特性。 6. OmniGrid：此控件基于Mootools 1.2开发，支持分页、排序、Ajax数据加载和对表格数据的增删改功能。 7. moodgetsGrid：这个...

    Treegrid的动态加载实例代码

    5. `fit`和`fitColumns`：这两个属性确保表格的宽度自适应，`border : false`则隐藏边框。 6. `frozenColumns`和`columns`：定义了表格的列配置，包括列标题（title）、字段名（field）、宽度（width）等。其中，`...

    推荐25个超炫的jQuery网格插件

    11. **jqGrid** - 用于展示网格数据的jQuery插件，实现前后端的异步通信，便于数据管理。 12. **Masonry** - 知名的jQuery布局插件，去除不同高度元素间的空白，实现整洁的瀑布流效果。 13. **jQuery Shapeshift**...

Magicbox
Global site tag (gtag.js) - Google Analytics