Question

嗨我有响应式UI我在哪里使用jqGrid。在这个，当我在全屏幕打开它时，网格工作正常。现在，当我尝试调整大小时，水平滚动条会出现。喜欢这个

现在，我在互联网上提到了这个问题的不同解决方案，我几乎尝试过任何我手上的东西。

我试过这个链接jqGrid horizontal scrollbar 但这里它隐藏了最后一列

我也检查了这个 - JQGrid How do I removed the annoying horizontal scrollbar when autowidth = true? (In IE)但这不是我的情况

我也检查了这个链接 - How to get rid of horizontal scroll bar when not needed 而新的一个我们正在摆脱chrome中的滚动条 jqGrid does not render correctly in Chrome/Chrome Frame

我也考虑过这个 - http://www.trirand.com/blog/?page_id=393/help/horizontal-scrollbar

我已应用以下属性 -

?- sublist([1,2,3],[1,2,4,5,3,6]).
true ;

我的css属性是

  shrinkToFit: true,
  autowidth:true

我也试过这个解决方案

 .ui-jqgrid {
  max-width: 100% !important; width: auto !important;}
  .ui-jqgrid .ui-jqgrid-pager {
  width: auto !important;
  }
  .ui-jqgrid-bdiv {
  overflow-y: scroll !important;
  }

  .ui-jqgrid-view,.ui-jqgrid-hdiv,.ui-jqgrid-bdiv {
  width: auto !important;
  }
  .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
  text-align:center;
  font-style:normal;
  }
  .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr > em {
  font-style: normal;
  }

我也注释了这个 -

  .ui-jqgrid .ui-jqgrid-btable
  {
  table-layout:auto;
  }

注意：我正在使用IE 11.我希望jqGrid每次都应该在用户调整屏幕大小时计算宽度，这样就不会有水平滚动条

已编辑：我使用的是jqGrid 4.1.2许可证。它只是一个免费版本。

另外，我在这里使用一个根据浏览器窗口调整大小的功能

/ *在浏览器窗口调整网格大小* /

  .ui-widget :active { outline: none; }

我称之为

 function resizeJqGridWidth(grid_id, div_id, width) {
  var cnt = 0;
  $(window).bind('resize', function () {

  }).trigger('resize');

  }

我的代码：

 resizeJqGridWidth(grid_id, "gview_" + grid_id, "90%");

添加了打开弹出窗口的代码 - 在这里我习惯调用一个函数getPopup，然后在加载模态窗口时做必要的事情。

 var grid_data = data,
  grid = $("#" + grid_id);
grid.jqGrid({
            datatype: "jsonstring",
            datastr: grid_data,
            colNames: scopes.grid_header_column_value,
            colModel: scopes.gridcolumns,
            height: height,
            //gridview: true,          
            loadonce: true,
            viewrecords: is_pager_enable,
            rowList: row_list,
            rowNum: row_number,
            multiSort: true,
            ignoreCase: true,
            grouping: is_group_enable,
            sortorder: sort_order,
            cmTemplate: { autoResizable: true },
            autoresizeOnLoad: true,
            autoResizing: { compact: true, resetWidthOrg: true },
            sortable: false,
            pager: "#" + pager_id,
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'name',
           // sortname: 'name',          
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function () { return 1; },
                total: function () { return 1; },
                records: function (obj) { return obj.length; },
                expanded_field: "true"
            },
            gridComplete: function () {

                $("#" + grid_id+"count").html($("#" + grid_id).getGridParam('records')+" row(s)");

            },

            loadComplete: function () {
                var ts = this;
                //document.querySelector('#filterbutton').addEventListener('onclick', clickqw);
                if (ts.p.reccount === 0) {
                    $(this).hide();
                    emptyMsgDiv.show();
                } else {
                    $(this).show();
                    emptyMsgDiv.hide();
                }

            }            
        });

从jqGrid中删除水平滚动条

0 个答案: