Question

我的问题：当我在jqGrid中拖动一行并完成自定义重新加载功能时，网格的单元格（以前在定义网格时设置的所有宽度不同）都会调整为都宽度相同。这种情况发生在Webkit浏览器中，但不会发生在Firefox中。

代码： 我已拖动在网格上启用排序：

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

正如您所看到的，我有一个名为drag complete的排序函数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},
    ]
});

我尝试了上面的修复，重新加载后重新定义了colModel并明确设置了宽度，但它没有任何效果。 Weirder，如果我进入浏览器控制台并使用javascript设置宽度它也没有任何效果。这让我很难过。

不幸的是，我看起来像jqGrid“回答男人”（Oleg）不在...大声笑。

Answer 1

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

但经过几个小时的调试jqGrid源码后，我终于修复了这个bug。该问题出现在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＆amp; 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();
        }

在ajax回调中使用loadGrid（）函数或刷新网格

Answer 3

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

   width: 'auto',

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

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

Answer 4

PokatilovArt的评论需要更多关注：jqGrid - Dragging a row to sort it screws up cell widths。

它解决了Chrome中的问题。

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

    deepempty : true

在jqGrid wiki中，以下是此选项的定义。

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

jqGrid - 拖动一行进行排序会拧紧单元格宽度

4 个答案: