jqGrid - перетаскивание строки, чтобы отсортировать ее по ширине ячейки

Question

Моя проблема: Когда я перетаскиваю строку в jqGrid, и она завершает пользовательскую функцию перезагрузки, ячейки сетки, ранее все переменной ширины, заданной при определении сетки, изменяются во всехбыть такой же ширины.Это происходит в браузерах Webkit, но не в Firefox.

Код: У меня включено перетаскивание для сортировки по сетке:

$mygrid.jqGrid(
    'sortableRows', {
        update: function(e, ui) {
            sort_grid(e, ui);
        }
    }
);

Как видите, у меня естьфункция сортировки, вызываемая при перетаскивании, sort_grid.Вот оно:

function sort_grid(e, ui) {
    var current_grid = $(ui.item[0]).closest('table').attr('id');
    var $current_row, moved_id, next_id, next_priority;
    var $moved_row = $('#' + current_grid + ' tr');
    var cnt = 0;

    this_id = ui.item[0].id;
    $moved_row.each(function () {
        if ($(this).attr('id') == this_id) {
            $current_row = $moved_row.eq(cnt);
            moved_id = $current_row.attr("id");
            next_id = $current_row.next().attr("id");
            next_priority = $current_row.next().children("td:first").attr("title");
        }
        cnt++;
    });

    if ( typeof moved_id !== 'undefined' ) {
        if ( next_priority == 'undefined' ) {
            next_priority = '999';
        }

        $.ajax({
            url:my_url,
            type:"POST",
            data:"moved_id=" + moved_id + "&next_id=" + next_id + "&next_priority=" + next_priority,
            success: function(data) {

                $('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server
                $('#' + current_grid).trigger("reloadGrid");
                $('.grid').setGridParam({loadonce:true}); // reset to use local values

            }
        })
    }
}

После того, как я нажал на этот триггер перезагрузки $('#' + current_grid).trigger("reloadGrid"); и завершил перезагрузку, сетка теперь имеет неправильную ширину ячеек в сетке (они переходят от разной ширины ко всем одинаковымwidth).

Когда сетка была первоначально создана, она имела ширину, определенную обычным способом jqGrid:

colModel:[
    {name:'one', index:'one', sortable:true, width:45},
    {name:'two', index:'two', sortable:true, width:180},
]

, но после перезагрузки сетки все ширины сбрасываются, все они имеют одинаковую ширину (IПредположим, что это общая ширина сетки, которая равномерно делится на общее количество ячеек в строке).Итак, мне нужно снова явно установить эти значения ширины, возможно, с помощью чего-то вроде следующего, вызываемого после перезагрузки сетки?

$('.grid').setGridParam({
    colModel:[
        {name:'one', index:'one', sortable:true, width:45},
        {name:'two', index:'two', sortable:true, width:180},
    ]
});

---

Я попытался исправить это, переопределив colModels после перезагрузки и явно установивширины, но это не имело никакого эффекта.Более странно, если я захожу в консоль браузера и устанавливаю ширину с помощью javascript, это также не имеет никакого эффекта.Это поставило меня в тупик.

---

К сожалению, для меня это выглядит так, как будто jqGrid "Answer Man" ( Oleg ) отсутствует ... lol.

Answer 1

Я столкнулся с той же проблемой для Chrome .Я воссоздал его здесь http://jsfiddle.net/gZSra/. Просто перетащите строку, а затем отсортируйте любой столбец.

Но после нескольких тяжелых часов отладки исходников jqGrid я, наконец, исправил эту ошибку.Проблема появляется в emptyRows методе jqGrid.

emptyRows = function (scroll, locdata) {
    var firstrow;
    if (this.p.deepempty) {
        $(this.rows).slice(1).remove();
    } else {
        firstrow = this.rows.length > 0 ? this.rows[0] : null;
        $(this.firstChild).empty().append(firstrow);  // bug "activation" line 
    }
    if (scroll && this.p.scroll) {
        $(this.grid.bDiv.firstChild).css({height: "auto"});
        $(this.grid.bDiv.firstChild.firstChild).css({height: 0, display: "none"});
        if (this.grid.bDiv.scrollTop !== 0) {
            this.grid.bDiv.scrollTop = 0;
        }
    }
    if(locdata === true && this.p.treeGrid) {
        this.p.data = []; this.p._index = {};
    }
},

* В недавнем jqGrid-4.4.4 этот код начинается с 1070 строки jqGrid.src.js

Проблема связана с удалением и затем добавлением firstrow .Эта строка определяет ширину столбцов - одна из ее ячеек в моем примере jsFiddle:

<td role="gridcell" style="height:0px;width:60px;"></td>

Именно поэтому проблема, похоже, связана с поведением некоторых динамических таблиц Chrome или Webkit.

FIX

Заменить зараженный остальной объем следующей строкой

$(this.firstChild).find('tr:not(:first)').remove();

Нетрудно увидетьчто вместо того, чтобы удалить все строки и затем добавить сначала обратно, я просто выбрал и удалил все, кроме первой строки.

Результат jsFiddle: http://jsfiddle.net/HJ3Q3/

Протестировано в Chrome, FF, IE8 и 9.

Надеюсь, это исправление скоро станет частью исходных текстов jqGrid.

Answer 2

.trigger('reloadGrid'); 

вызывает проблемы с sortablerows.

Ниже может помочь обходной путь (выгрузить и перезагрузить сетку)

Создайте функцию для настройки сетки, как показано ниже

jQuery().ready(ConfigureGrid);  

function ConfigureGrid(){
    jQuery("#grdCategory").jqGrid({
        url: '/controller/action',
        datatype: "xml",
        colNames: ['Order', 'Name', 'Page Title', 'Is Active', 'Action'
        ],
        colModel: [
         { name: 'col1', index: 'col1', width: 50, sortable: true, sorttype: 'int' }
        , { name: 'col2', index: 'col2', width: 150, sortable: true }
],
        rowNum: 10,
        rowList: [10, 20, 30],
    }); 

    $("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: true });
    $("#list1").jqGrid('sortableRows', { update: function (event, ui) { updateOrder() } });
}

Создать функцию для перезагрузки сетки

 function loadGrid() {
            $('#grdCategory').jqGrid('GridUnload');
            ConfigureGrid();
        }

использовать функцию loadGrid () при обратном вызове ajax или для обновления сетки

Answer 3

Вы пытались настроить это свойство в параметрах jQgrid

   width: 'auto',

Если это не помогло, попробуйте перезагрузить сетку после обновления строки

 jQuery('.grid').trigger('reloadGrid');

Answer 4

Комментарий PokatilovArt требует большего внимания: jqGrid - перетаскивание строки для сортировки приводит к увеличению ширины ячейки .

Это решает проблему в Chrome.

Здесьэто параметр, который нужно изменить в jqGrid:

    deepempty : true

В jqGrid wiki , вот определение этого параметра.

Для этого параметра должно быть установлено значениеЗначение true, если событие или плагин присоединены к ячейке таблицы.Опция использует jQuery empty для строки и всех ее дочерних элементов.Это, конечно, приводит к снижению скорости, но предотвращает утечки памяти.Этот параметр должен иметь значение true, если активированы сортируемые строки и / или столбцы.