Как заморозить первый ряд в jqGrid

Question

Можем ли мы заморозить первый ряд jqgrid? Это возможно?

Мой jqgrid содержит настраиваемые поля со списком и поля ввода в верхней строке для добавления строк, а начиная со второй строки он отображает строки данных, которые мы поместили в первую строку, и добавил их. Когда я достигаю максимальной высоты сетки, вертикальная полоса прокрутки позволяет прокручивать и просматривать нижние строки для пользователя. Но когда мне нужно добавить новую строку, когда я просматриваю свою последнюю строку с помощью полосы прокрутки, мне нужно прокрутить весь верх, чтобы добавить ее. Итак, я ищу решение для замораживания верхней строки, где пользователю не нужно прокручивать верхнюю часть всякий раз, когда необходимо добавить новую строку. Я вижу несколько решений, чтобы заморозить столбцы, используя встроенные свойства jqgrid, но я не могу найти способ заморозить строки.

Пожалуйста, дайте мне знать, если есть способ заморозить его.

Спасибо!

Answer 1

Непосредственно это не поддерживается. Если это решит проблему, вы можете использовать строку нижнего колонтитула, которая заморожена, но в нижнем колонтитуле. Чтобы разместить данные здесь, вам нужно включить нижний колонтитул и использовать метод footerData . См. документы здесь

Приведенная ниже рекомендация - просто идея. Если вы не используете поиск, вы можете вызвать метод filterToolbar, но в этом случае вам нужно будет задать search: false во всех полях colModel. При этом вы получите замороженную строку данных заголовка.

Другое возможное решение - использовать метод setGroupHeader см. Здесь : Недостатком решения является то, что строка располагается над строками заголовка.

UPDATE:

Ниже приведен код, предполагающий, что filterToolbar не будет использоваться для поиска. Моя идея состоит из следующих шагов:

1. Изначально установить поля с поиском: false
2. вызов метода fileterToobar. Это добавит замороженный заголовок
3. Получите идентификаторы, чтобы получить первый.
4. Получить данные из первой строки и удалить их из таблицы.
5. Поместите дату в заголовок (смотрите, как id строится)
6. Установите для поиска значение true, чтобы использовать другие поисковые модули.

Использование jsonstring и данных массива одинаково, поэтому я поместил здесь данные массива.

    var mydata = [
           { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
           { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
           { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
           { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
           { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
    ];


    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            datatype: "local",
            data: mydata,
            height: 250,
            width: 780,
            sortname : "amount",
            sortorder: "desc",
            colModel: [
                { label: 'Inv No', name: 'id', width: 75, key:true, search : false },
                { label: 'Date', name: 'invdate', width: 90, search : false },
                { label: 'Client', name: 'name', width: 100, search : false },
                { label: 'Amount', name: 'amount', width: 80, search : false },
                { label: 'Tax', name: 'tax', width: 80, search : false },
                { label: 'Total', name: 'total', width: 80, search : false },
                { label: 'Notes', name: 'note', width: 150, search : false }
            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            caption: "Load jqGrid through Javascript Array",
        });
        // call filterToolbar with serch false. This build the header
        $("#jqGrid").jqGrid("filterToolbar",{});
        // get the first id and the data
        var ids = $("#jqGrid").jqGrid("getDataIDs");
        var first_id = ids[0];
        var first_row_data = $("#jqGrid").jqGrid("getRowData", first_id);
        // delete it
        $("#jqGrid").jqGrid("delRowData", first_id);
        // get colModel to get names
        var colModel = $("#jqGrid").jqGrid("getGridParam", "colModel");
        //console.log(colModel);
        for(var i=0, len= colModel.length; i<len; i++ ) {
            // set the header
            $("#gsh_jqGrid_"+colModel[i].name).html( first_row_data[colModel[i].name] );
            // set search to true in order to use the other search modules
            $("#jqGrid").jqGrid("setColProp", colModel[i], {search : true});
        }
    });
});

Вот ссылка на демоверсию