javascript - JQGrid 减少窗口调整大小事件中的列数

Question

我在使用 jqGrid 时遇到问题。我有一个有很多列的表。当我更改窗口或如果在移动设备中打开 Web 应用程序时，它应该在网格表中仅显示 4 或 5 列，而不是许多列，否则它应该允许在网格内滚动。那么如何在窗口调整大小事件上减少 JQGrid 中的列数呢？

我尝试过如下操作，调整大小事件工作正常，但由于网格中的列较多且没有滚动条，外观和感觉不佳。

我的 HTML，

<table id="list2"></table>

我的 jqGrid 代码，

 $("#list2").jqGrid({
    url: '/Project/GridData',
    datatype: "json",
    mtype: 'POST',
    colNames: ['edit', 'view','id','Project_Name','Project_Name2','Project_Nam3','Project_Number','Project_Manager', 'Business_Unit', 'Project_Admin_Name', 'Remarks', 'Is_Active', 'Created_Date','Modified_Date'],
    colModel: [
        { name: 'edit', index: 'edit', width: 55 },
        { name: 'view', index: 'view', width: 55 },
        { name: 'id', index: 'id', width: 55, hidden: true },
        { name: 'Project_Name', index: 'Project_Name', width: 140 },
        { name: 'Project_Name2', index: 'Project_Name2', width: 140 },
        { name: 'Project_Name3', index: 'Project_Name3', width: 140 },
        { name: 'Project_Number', index: 'Project_Number', width: 140 },
        { name: 'Project_Manager', index: 'Project_Manager', width: 140 },
        { name: 'Business_Unit', index: 'Business_Unit', width: 140 },
        { name: 'Project_Admin_Name', index: 'Project_Admin_Name', width: 140, align: "right" },
        { name: 'Remarks', index: 'Remarks', width: 180, align: "right" },
        { name: 'Is_Active', index: 'Is_Active', width: 100, align: "right" },
        { name: 'Created_Date', index: 'Created_Date', width: 150, sortable: false },
        { name: 'Modified_Date', index: 'Modified_Date', width: 150, sortable: false }
    ],
    rowNum: 10,
    rowList: [10, 20, 30,50,100,500,1000],
    //pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    loadonce: true,
    ignoreCase: true,
    viewrecords: true,
    pagepos: 'left',
    forceFit: true,
    shrinkToFit: false, // to enable the scroll bar in the responsive mode
    height: 500,
    width:1600,
    altRows:true,
    altclass:'myAltRowClass'

});

我的脚本，

var $grid = $("#ProjectSearchGrid"),
    newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true); // change the grid size based on parent div size
    $grid.jqGrid('setColProp','ProjectName',{width:100}); //change the column size for consistent look in the mobile device

Answer 1

请始终在您的问题中包含有关您使用(或可以使用)的 jqGrid 版本以及 jqGrid 分支 的信息( free jqGrid ，商业 Guriddo jqGrid JS 或版本 <=4.7 中的旧 jqGrid。

如果您使用免费的 jqGrid 分支，那么您只需在相应的列中添加 classes: "hidden-xs", labelClasses: "hidden-xs" 或 classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm" 等属性即可。有关详细信息，请参阅 the demo 中的 the old answer。如果你不使用Bootstrap CSS，你可以手动添加hidden-**类的定义:

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

如果您使用旧版本的 jqGrid 并且确实无法升级到免费的 jqGrid 或 Guriddo 那么您可以尝试使用

$(window).bind("resize", function () {
    // your resize handler
}).triggerHandler("resize");

并调用 hideCol 或 showCol 在调整大小时隐藏/显示列。如果您需要遵循这种方式，我建议您缓存隐藏/可见列的列表，仅在确实需要更改时才调用 hideCol 或 showCol 。要检测当前分辨率，您可以使用 window.matchMedia (请参阅 here )或获取网格的某些外部 div 的宽度(<table id="list2"></table> 的外部 div )。

更新:我创建了演示 https://jsfiddle.net/OlegKi/n6g78two/ ，它使用 jqGrid 4.6 并演示了如何使用 window.matchMedia 在调整网格大小时隐藏/显示一些列。如果视口(viewport)宽度为 767 像素或更小，演示将隐藏最后一列 "ComboDuration"。它使用以下代码:

function hideOrShowColumns (e) {
    if (e.matches) {
        // we have view ports of 767 pixels wide or less
        $grid.jqGrid("hideCol", "ComboDuration");
    } else {
        $grid.jqGrid("showCol", "ComboDuration");
    }
}
var mql = window.matchMedia('(max-width: 767px)');
hideOrShowColumns(mql);
mql.addListener(function (e) {
    hideOrShowColumns(e);
});

$(window).bind("resize", function () {
    $grid.jqGrid("setGridWidth", $grid.closest(".my-container").width());
}).triggerHandler("resize");