2

我正在使用 jqGRid 4.4.1。

这是示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubGrid Real Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style>
    .groupColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
            font-weight: bold; !important;
    }
    .lockedColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
    }

    .ui-jqgrid .ui-jqgrid-bdiv {
        position: relative; 
        margin: 0em; 
        padding:0; 
        /*overflow: auto;*/ 
        overflow-x:hidden; 
        overflow-y:auto; 
        text-align:left;
    }

    .ui-jqgrid .ui-subgrid td.subgrid-data {
        border-top: 0 none !important;
        border-right: 0 none !important;
        border-bottom: 0 none !important;
    }
    .ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
                background-color: #FFFFFF !important; 
                background-image: none !important;
                border: 0px 0px 1px 1px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

<script type="text/javascript">
//<![CDATA[
    /*global $ */
    /*jslint browser: true, eqeq: true, plusplus: true */
    $(function () {

        "use strict";
        var colModelData =[{"classes":"groupColumn","name":"itemName","editable":false},
                {"width":"100","name":"24394","editable":false},
                {"width":"100","name":"24390","editable":false},
                {"width":"100","name":"24387","editable":false},
                {"width":"100","name":"24386","editable":false},
                {"width":"100","name":"24385","editable":false},
                {"width":"100","name":"24383","editable":false},
                {"width":"100","name":"24369","editable":false},
                {"width":"100","name":"24306","editable":false}],
            subColModelData =[
            {"classes":"groupColumn","name":"itemName","editable":false},
                {"width":"99","name":"24394","editable":false},
                {"width":"100","name":"24390","editable":false},
                {"width":"100","name":"24387","editable":false},
                {"width":"100","name":"24386","editable":false},
                {"width":"100","name":"24385","editable":false},
                {"width":"100","name":"24383","editable":false},
                {"width":"100","name":"24369","editable":false},
                {"width":"98","name":"24306","editable":false}],
            colNamesArray = ["Name","12/21/2012","12/10/2012","12/03/2012","11/27/2012","11/15/2012","11/12/2012","11/09/2012","10/15/2012"],
        myData = [{"id":"group1","itemName":"Miscellaneous",
            "subGridData":[
            {"id":0,"itemName":"NNNNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":1,"itemName":"EEEEEEE","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":2,"itemName":"7777777","24369":"","24387":"","24394":"","24306":"6.3","24390":"","24385":"","24386":"","24383":""},
            {"id":3,"itemName":"KKKKKK","24369":"","24387":"","24394":"","24306":"68","24390":"","24385":"","24386":"","24383":""},
            {"id":4,"itemName":"JJJJJ","24369":"","24387":"","24394":"","24306":"160","24390":"","24385":"","24386":"","24383":""},
            {"id":5,"itemName":"TTTTT","24369":"","24387":"","24394":"","24306":"77","24390":"","24385":"","24386":"","24383":""},{"id":6,"itemName":"LLLLLL","24369":"","24387":"","24394":"","24306":"88","24390":"","24385":"","24386":"","24383":""},{"id":7,"itemName":"RRRRR","24369":"","24387":"","24394":"","24306":"2:!","24390":"","24385":"","24386":"","24383":""},{"id":8,"itemName":"AAAAAA","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":9,"itemName":"CCCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":10,"itemName":"HHHHH","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":11,"itemName":"OOOO","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":12,"itemName":"PPPP","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":13,"itemName":"DDDDD","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":14,"itemName":"GGGG","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":15,"itemName":"UBBBBB","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":16,"itemName":"UUUUU","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":17,"itemName":"NNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":18,"itemName":"CCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":19,"itemName":"SSSSS","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":20,"itemName":"FFFF","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":21,"itemName":" ","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":22,"itemName":"zzzzzz","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
            {"id":23,"itemName":"NLNLNLNL","24369":"XXXX","24387":"","24394":"","24306":"I want to see this data","24390":"","24385":"","24386":"","24383":""}]}];
        $("#list").jqGrid({
            datatype: "local",
            data: myData,
            colNames: colNamesArray,
            colModel: colModelData,
            gridview: true,
            autoWidth:true,
            //height: "100%",
            height:"350px",
            width: "100%",
            caption: "Create subgrid from local data",
            subGrid: true,
            subGridOptions: {
                    reloadOnExpand: false
            },
            subGridRowExpanded: function (subgridDivId, parentRowId) {
                    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
                    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                    var data = $(this).jqGrid("getLocalRow", parentRowId);
                    $subgrid.jqGrid({
                            datatype: "local",
                            data: $(this).jqGrid("getLocalRow", parentRowId).subGridData,
                            colModel:subColModelData,
                            autoWidth:true,
                            width: "100%",
                            height: "100%",
                            autoencode: true,
                            gridview: true,
                            rowNum: 200

                    });
            $subgrid.closest("div.ui-jqgrid-view")
                    .children("div.ui-jqgrid-hdiv").hide();
            },
            resizeStop: function (newWidth, index) {
                // grid.dragEnd()
                var widthChange = this.newWidth - this.width,
                    $theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"),
                    $subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable");
                $subgrids.each(function () {
                    var grid = this.grid;
                    // we have subgrids which have no internal subgrids
                    // it reduce the number of columns to 1
                    // we have rownumbers: true in the main grid, but not in subgrids
                    // it reduce the number of columns to additional 1
                    // so we should use (index - 2) as the column index in the subgrids
                    grid.resizing = { idx: (index - 1) };
                    grid.headers[index - 1].newWidth = (index - 1 === 0) || (index === grid.headers.length) ? newWidth - 2 : newWidth;
                    grid.newWidth = grid.width + widthChange;
                    grid.dragEnd.call(grid);
                    $(this).jqGrid("setGridWidth", grid.newWidth, false);
                });
                $theGrid.jqGrid("setGridWidth", this.newWidth, false);
            }   

        });

        //$("#list").jqGrid("toggleSubGridRow", 'm1');
        //$("#list").jqGrid("toggleSubGridRow", 'm3');
    });

//]]>
</script>

 

我在网格下方有几个按钮，如 Next、Previous、Print、Export 等。我已经给 jqGrid 一个固定高度。所以，我可以得到垂直滚动条。

我正在使用这里提到的解决方案。: jqGrid 水平滚动条

在此处输入图像描述

但是，我无法调整最后一列的大小。

4

1 回答 1

3

我个人觉得你的问题很有趣，我之前看过之后就投了赞成票。问题是问题的解决并不简单。一将不得不修改源代码。我目前没有时间进行这种实施。托尼可能会实施这一点。您可以将相应的功能请求发布到trirand。

我唯一可以向您推荐的是答案中描述的技巧。和你需要的不一样，但是在某些场景下可以提升用户体验。我个人在为客户制作的最高效的网格中使用它。

不过，我可以建议您一种解决方法。取决于您使用的其他设置，您描述的问题可能不像看起来那么难。如果您使用gridResize，用户将能够调整网格的大小。增加网格的大小后，用户将能够增加最后一列的宽度。如果您使用shrinkToFit: false或使用

$("#gridId").jqGrid("gridResize", { shrinkToFit: false });

那么用户将能够通过两个步骤调整网格的最后一列：1）调整网格的大小 2）调整网格的最后一列的大小。

更新：从 4.9 版开始的免费 jqGrid中根本不存在调整最后一列大小的问题（请参阅自述文件）。因此，升级到当前版本的免费 jqGrid（4.10.0 或更高版本）可以解决调整网格最后一列大小的问题。

于 2013-02-05T12:05:23.340 回答