JQGrid 减少 window resize 事件中的列数

Question

我在使用 jqGrid 时遇到问题。我有一个包含很多列的 table。当我更改 window 或如果在移动设备中打开网络应用程序时，它应该在网格 table 中仅显示 4 或 5 列而不是许多列，否则它应该允许在网格内滚动。那么如何在 window 调整大小事件中减少 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

您可以使用方法：showCol 和 hideCol 到 hide/show 列的条件。请注意，这些方法接受数组作为参数以一次显示和隐藏更多列。文档可以是 found here.

通过示例你可以这样做

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() },

Answer 2

请始终在您的问题中包含有关您使用（或可以使用）的jqGrid 版本 和fork 的 jqGrid（free jqGrid, commercial Guriddo jqGrid JS 或版本 <=4.7 的旧 jqGrid）。

如果您使用免费的 jqGrid fork，那么您只需在相应的列中添加 classes: "hidden-xs", labelClasses: "hidden-xs" 或 classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm" 等属性。有关详细信息，请参阅 the demo from 。如果不用BootstrapCSS，可以手动添加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 到 hide/show 调整列的大小。如果您需要遵循这种方式，我建议您仅在确实需要更改时缓存 hidden/visible 列的列表以调用 hideCol 或 showCol。要检测当前分辨率，您可以使用 window.matchMedia（参见 here）或获取网格某些外部 div 的宽度（<table id="list2"></table> 的外部 div ).

更新： 我创建了演示 https://jsfiddle.net/OlegKi/n6g78two/, which uses jqGrid 4.6 and which demonstrates how to use window.matchMedia 到 hide/show 一些关于调整网格大小的列。如果视口的宽度等于或小于 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");

JQGrid 减少 window resize 事件中的列数

JQGrid reduce the no of columns on window resize event

javascript

jquery

jqgrid

responsive