jqGrid-拖动一行进行排序会打乱单元格宽度

jqGrid - Dragging a row to sort it screws up cell widths

本文关键字:单元格 排序 拖动 一行 jqGrid-      更新时间:2023-09-26

我的问题:当我在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");并重新加载完成,网格中的单元格现在的宽度不正确(它们从不同的宽度变为相同的宽度)。

当网格最初创建时,它的宽度以正常的jqGrid方式定义:

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

但是在网格重新加载之后,宽度被重置为相同的宽度(我假设这是网格的总宽度被均匀地除以行中的单元总数)。那么,我是否需要再次明确地设置这些宽度,也许在网格重新加载后调用以下内容?

$('.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.

我在Chrome上遇到了同样的问题。我在这里重新创建了它http://jsfiddle.net/gZSra/.只需拖动行,然后对任意列进行排序。

但是经过几个小时艰苦的jqGrid源代码调试,我终于修复了这个错误。该问题出现在jqGrid的emptyRows方法中。

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中,此代码从jqGrid.src.js 的1070行开始

问题连接到删除,然后附加第一行。这一行定义了列的宽度——在我的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、IE 8&9.

希望这个修复程序很快成为jqGrid源代码的一部分。

.trigger('reloadGrid'); 

导致可排序行出现问题。

下面的解决方案可能会帮助你(卸载和重新加载网格)

创建一个配置网格的函数,如下面的

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();
        }

在ajax回调中使用loadGrid()函数或刷新网格

您是否尝试在jQgrid选项中设置此属性

   width: 'auto',

如果这不起作用,请尝试在更新行后重新加载网格

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

PokatilovArt的注释需要更多的关注:jqGrid-拖动一行进行排序会打乱单元格宽度。

它解决了Chrome中的问题。

以下是jqGrid中要更改的参数:

    deepempty : true

在jqGridwiki中,以下是该选项的定义。

如果事件或插件附加到表单元格,则此选项应设置为true。该选项对行及其所有子元素使用jQuery empty。这当然有速度开销,但可以防止内存泄漏。如果激活了可排序的行和/或列,则此选项应设置为true。