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'});

Answer 1

请附上总是你的问题有关的信息的版本的jqGrid的，您可以使用（或者你可以使用），和叉的jqGrid的（免费的jqGrid，商业Guriddo jqGrid的JS或旧的jqGrid版本<= 4.7）。

如果您使用免费的 jqGrid fork，那么您可以在相应的列中添加类似classes: "hidden-xs", labelClasses: "hidden-xs"或 的属性classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm"。见演示从旧的回答更多的细节。如果你不使用 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（请参阅此处）或获取网格的某个外部 div 的宽度（外部 div of <table id="list2"></table>）。

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

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");

Answer 2

您可以使用以下方法：showCol 和 hideCol 根据条件隐藏/显示列。请注意，这些方法接受数组作为参数以一次显示和隐藏更多列。文档可以在这里找到。

举个例子，你可以这样做

var $grid = $("#ProjectSearchGrid"),

$grid.jqGrid("hideCol", ["Project_Name2", "Project_Name3"]); // hide these cols before resizing

newWidth = $grid.closest(".ui-jqgrid").parent().width();

$grid.jqGrid("setGridWidth", newWidth, true);

除此之外，如果您使用 Guriddo jqGrid，您可以使用函数isMobile在移动设备中加载网格时隐藏一些列。

通过示例为列 Project_name2 执行此操作，您可以执行此操作

colModel: [

    ...

    { name: 'Project_Name2', index: 'Project_Name2', width: 140, hidden: $.jgrid.isMobile() },