jqGrid - 拖动一行来对它进行排序，以便将单元格宽度进行排序

问题描述：

我的问题：当我在jqGrid中拖动一行并完成一个自定义重载功能时，网格的单元格先前全部变化宽度网格被定义，调整大小都是相同的宽度。这发生在Webkit浏览器中，但不在Firefox中。jqGrid - 拖动一行来对它进行排序，以便将单元格宽度进行排序

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

$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}, 
]

但经过网格重新加载宽度重置所有具有相同的宽度（I假设这是总宽度该网格在该行的单元总数中被均匀划分）。那么，我是否需要再次明确地设置这些宽度，或许在网格重新加载之后调用以下类似的内容？

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

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

不幸的是，我看起来像jqGrid的“答人”（Oleg）不在身边...笑。

答

你试过设置这个属性在你的jqGrid选项

width: 'auto',

如果这does not工作尝试行

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

我已经试过这两个，其实。仍然没有运气。现在我已经完全重新创建了网格，但是通过了所需的参数，以便将其置于所需的状态。在对接的痛苦，但它的作品。 – Lothar 2012-02-20 18:34:53

答

.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回调或刷新网格

答

我遇到了同样的问题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这个代码从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测试，IE 8 & 9.

希望此修订将很快成为的来源的jqGrid部分。

我刚刚从jqGrid团队获得了答案：“为了解决您的问题，您只需将deepempty设置为true即可。”它真的有用。问题比我想象的要容易。 – PokatilovArt 2013-04-21 22:42:25

答

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

它解决了Chrome中的问题。

这里是jqGrid的改变参数：

deepempty : true

在jqGrid wiki，这里是这个选项的定义。

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

jqGrid - 拖动一行来对它进行排序，以便将单元格宽度进行排序

相关推荐