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）不在身邊...笑。

來源

2012-02-09 Lothar

你試過設置這個屬性在你的jqGrid選項

width: 'auto',

如果這does not工作嘗試行

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

來源

2012-02-14 14:54:59 nawar

我已經試過這兩個，其實。仍然沒有運氣。現在我已經完全重新創建了網格，但是通過了所需的參數，以便將其置於所需的狀態。在對接的痛苦，但它的作品。 – 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回調或刷新網格

來源

2012-06-23 08:51:08 Vipul

我遇到了同樣的問題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部分。

來源

2013-03-30 19:37:57 PokatilovArt

我剛剛從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。

來源

2013-10-18 14:25:35 kmas

jqGrid - 拖動一行來對它進行排序，以便將單元格寬度進行排序

回答

相關問題