jqGrid - एक पंक्ति खींच सॉर्ट करने के लिए यह शिकंजा अप सेल चौड़ाई

Question

मेरे समस्या: जब मैं 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}, 
] 

लेकिन बाद ग्रिड फिर से लोड चौड़ाई रीसेट कर रहे हैं सभी एक ही चौड़ाई (मुझे लगता है इस की कुल चौड़ाई है ग्रिड को पंक्ति में कोशिकाओं की कुल संख्या में समान रूप से विभाजित किया जा रहा है)। तो, क्या मुझे इन चौड़ाई को स्पष्ट रूप से सेट करने की आवश्यकता है, शायद ग्रिड रीलोड के बाद निम्नलिखित कुछ कहा जाता है?

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

---

मैं ऊपर ठीक करने की कोशिश की, फिर से लोड करने के बाद colModels को पुनर्परिभाषित और चौड़ाई को स्पष्ट रूप से स्थापित करने, लेकिन यह कोई प्रभाव नहीं पड़ा। वीडर, अगर मैं ब्राउज़र कंसोल में जाता हूं और चौड़ाई को जावास्क्रिप्ट के साथ सेट करता हूं तो इसका कोई प्रभाव नहीं पड़ता है। यह मुझे स्टंप हो गया है।

---

मेरे लिए दुर्भाग्य से ऐसा लगता है कि jqGrid "उत्तर मैन" (Oleg) के आसपास नहीं है ... lol।

Answer 1

आप अपने jQgrid विकल्पों में इस संपत्ति सेटअप करने की कोशिश की

width: 'auto', 

यह does not काम पंक्ति

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

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

उपयोग loadGrid फिर से लोड करने समारोह बनाएं() AJAX कॉल में फ़ंक्शन या ग्रिड रीफ्रेश करने के लिए

Answer 3

मुझे क्रोम के लिए एक ही समस्या का सामना करना पड़ा। मैंने इसे http://jsfiddle.net/gZSra/ पर फिर से बनाया। बस पंक्ति खींचें और फिर किसी कॉलम को सॉर्ट करें।

लेकिन jqGrid स्रोतों को डीबग करने के कुछ कठिन घंटों के बाद मैंने आखिरकार इस बग को ठीक किया। समस्या खाली पंक्तियों jqGrid की विधि में दिखाई देती है।

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 लाइन समस्या जुड़े और फिर को हटानेfirstrow जोड़कर से शुरू होता है। यह पंक्ति स्तंभों की चौड़ाई को परिभाषित करता है - मेरी jsFiddle उदाहरण में यह की कोशिकाओं में से एक

<td role="gridcell" style="height:0px;width:60px;"></td>

है यही कारण है कि समस्या कुछ Chrome की या वेबकिट के गतिशील तालिका व्यवहार के साथ जोड़ा जा रहा है है।

ठीक

बदलें अगली पंक्ति के साथ किसी और गुंजाइश संक्रमित

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

यह सब लाइनों को हटाने और फिर पहली वापस जोड़कर, मैं सिर्फ का चयन करने की है कि बजाय देखने के लिए मुश्किल नहीं है और पहली पंक्ति को छोड़कर सभी को हटा दें।

परिणाम jsFiddle: http://jsfiddle.net/HJ3Q3/

क्रोम, एफएफ में परीक्षण किया गया, आईई 8 & 9.

आशा यह सुधार जल्द ही jqGrid स्रोतों का हिस्सा बन जाएगा।

Answer 4

पोकाटिलोवर्ट की टिप्पणी पर अधिक ध्यान देने की आवश्यकता है: jqGrid - Dragging a row to sort it screws up cell widths।

यह क्रोम में समस्या हल करता है।

deepempty : true 

jqGrid wiki में, यहाँ इस विकल्प की परिभाषा है:

यहाँ पैरामीटर jqGrid में बदलने के लिए है।

यह विकल्प सही पर सेट किया जाना चाहिए अगर एक घटना या एक प्लगइन तालिका सेल से जुड़ा हुआ है। विकल्प पंक्ति और उसके सभी बच्चों के तत्वों के लिए jQuery खाली खाली उपयोग करता है। यह निश्चित रूप से गति ओवरहेड है, लेकिन स्मृति रिसाव को रोकता है। एक विकल्प योग्य पंक्तियों और/या कॉलम सक्रिय होने पर यह विकल्प सत्य पर सेट किया जाना चाहिए।