Javascript jqGrid-拖动一行对其进行排序会扭曲单元格宽度

我的问题：当我在jqGrid中拖动一行，它完成了一个自定义的重载功能时，网格的单元格（以前定义网格时设置的所有不同宽度）都会调整大小，使其具有相同的宽度。这在Webkit浏览器中发生，但在Firefox中不发生

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

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

如您所见，我有一个名为drag complete的排序函数，

sort\u 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

            }
        })
    }
}

一旦我点击了重新加载触发器

$（'#'+当前网格）.trigger（“重新加载网格”）和重新加载完成网格中的单元格现在的宽度不正确（它们从不同的宽度变为相同的宽度）

最初创建栅格时，栅格的宽度以正常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）似乎不存在。。。哈哈。
您是否尝试在jQgrid选项中设置此属性

   width: 'auto',

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

 jQuery('.grid').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（）函数，我在Chrome上遇到了同样的问题。我在这里重新创建了它。只需拖动该行，然后对任何列进行排序

但在调试jqGrid源代码几个小时后，我终于修复了这个bug。问题出现在jqGrid的清空Rows方法中

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行开始

该问题与删除然后追加第一行有关。这一行定义了列的宽度——在我的JSFIDLE示例中，它的一个单元格是


这就是为什么这个问题似乎和一些Chrome或Webkit的动态表行为有关

修复

用下一行替换受感染的else作用域

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

不难看出，我并没有删除所有行，然后追加第一行，而是选择并删除除第一行以外的所有行

结果如下：

在铬、FF、IE 8和9中测试

希望此修复程序将很快成为jqGrid源代码的一部分。
PokatilovArt的评论需要更多关注：

它解决了Chrome中的问题

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

    deepempty : true

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

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

实际上，这两种我都试过了。还是不走运。现在，我已经求助于完全重新创建网格，但传递所需的参数，以便使其处于我需要的状态。我刚刚从jqGrid团队得到了答案：“为了解决您的问题，您只需要将deepempty设置为true。”这确实有效。这个问题比我想象的要容易。
    deepempty : true