时间戳

首页 > 解决方案 > JQGrid 减少窗口调整大小事件的列数

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

问题描述

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

我尝试过如下操作，调整大小事件运行良好，但由于网格中有更多列且没有滚动条，因此外观效果不佳。

我的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

标签： javascriptjqueryjqgridresponsive

解决方案

您可以使用以下方法：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() },

推荐阅读