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) {&nbsp; .hidden-xs {&nbsp; &nbsp; display: none !important;&nbsp; }}@media (min-width: 768px) and (max-width: 991px) {&nbsp; .hidden-sm {&nbsp; &nbsp; display: none !important;&nbsp; }}@media (min-width: 992px) and (max-width: 1199px) {&nbsp; .hidden-md {&nbsp; &nbsp; display: none !important;&nbsp; }}@media (min-width: 1200px) {&nbsp; .hidden-lg {&nbsp; &nbsp; display: none !important;&nbsp; }}如果您使用旧版本的 jqGrid 并且您确实无法升级到免费的 jqGrid 或 Guriddo 那么您可以尝试使用$(window).bind("resize", function () {&nbsp; &nbsp; // 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) {&nbsp; &nbsp; if (e.matches) {&nbsp; &nbsp; &nbsp; &nbsp; // we have view ports of 767 pixels wide or less&nbsp; &nbsp; &nbsp; &nbsp; $grid.jqGrid("hideCol", "ComboDuration");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $grid.jqGrid("showCol", "ComboDuration");&nbsp; &nbsp; }}var mql = window.matchMedia('(max-width: 767px)');hideOrShowColumns(mql);mql.addListener(function (e) {&nbsp; &nbsp; hideOrShowColumns(e);});$(window).bind("resize", function () {&nbsp; &nbsp; $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 resizingnewWidth = $grid.closest(".ui-jqgrid").parent().width();$grid.jqGrid("setGridWidth", newWidth, true);除此之外，如果您使用 Guriddo jqGrid，您可以使用函数isMobile在移动设备中加载网格时隐藏一些列。通过示例为列 Project_name2 执行此操作，您可以执行此操作colModel: [&nbsp; &nbsp; ...&nbsp; &nbsp; { name: 'Project_Name2', index: 'Project_Name2', width: 140, hidden: $.jgrid.isMobile() },