JQGrid уменьшает количество столбцов при изменении размера окна - PullRequest
Новая
       12

JQGrid уменьшает количество столбцов при изменении размера окна

0 голосов
/ 11 ноября 2019

У меня проблема с jqGrid. У меня есть таблица со многими столбцами. Когда я меняю окно или открываю веб-приложение на мобильном устройстве, в таблице сетки должно отображаться только 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

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

Пожалуйста, всегда включайте в свои вопросы информацию о версии jqGrid, которую вы используете (или которую вы можете использовать), и вилка jqGrid ( бесплатно)jqGrid , коммерческий Guriddo jqGrid JS или старый jqGrid в версии <= 4.7). </p>

Если вы используете бесплатную вилку jqGrid, то вы можете просто добавить свойства, такие как 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 (см. здесь ) или получить ширину некоторого внешнего делителя сетки (внешний делитель <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");
1 голос
/ 11 ноября 2019

Вы можете использовать методы: 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() },
...