एक jQueryUI संवाद

Question

के अंदर एक jqGrid पर setGridWidth को सही ढंग से कॉल करना मेरे पास एक jQueryUI संवाद (#locDialog) है जिसमें एक jqGrid ($grid) है। जब संवाद खुलता है (प्रारंभ में, लेकिन जब भी यह खुलता है इसे कॉल किया जाता है), तो $locDialog के आकार में आकार बदलने के लिए मुझे $grid चाहिए। जब मैं शुरुआत में ऐसा करता हूं, तो मुझे ग्रिड के अंदर स्क्रॉलबार मिलते हैं (संवाद के अंदर नहीं)।

अगर मैं कोड डीबग, मैं देख $grid की चौड़ाई 677. है तो, मैं setGridWidth() फिर से फोन और चौड़ाई की जाँच और अब मैं 659 जो, 18px कम है जिसके लिए स्क्रॉल क्षेत्र का आकार है, jqGrid (Dun-dun-dun ..)

जब मैं संवाद को दोबारा बदलता हूं, तो मैं भी ग्रिड का आकार बदलता हूं, और सबकुछ खुश है - जहां भी आवश्यक हो, कोई स्क्रॉलबार नहीं।

मेरे संवाद init कोड:

$locDialog = $('#location-dialog').dialog({ 
    autoOpen: false, 
    modal: true, 
    position: ['center', 100], 
    width: 700, 
    height:500, 
    resizable: true, 
    buttons: { 
       "Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));}, 
       "OK": function() {$(this).dialog('close');}, 
       "Cancel": function() {$(this).dialog('close');} 
      }, 
    open: function(event, ui) { 
     $grid.setGridHeight($(this).height()-54); 
      // No idea why 54 is the magic number here 
     $grid.setGridWidth($(this).width(), true); 
    }, 
    close: function(event, ui) { 

    }, 
    resizeStop: function(event, ui) { 
     $grid.setGridWidth($locDialog.width(), true); 
     $grid.setGridHeight($locDialog.height()-54); 
    } 
}); 

मैं उत्सुक किसी को भी करने से पहले इस देखा है यदि हूँ। असल में, यह दुनिया का अंत नहीं है यदि मेरे पास शुरुआत में अनावश्यक स्क्रॉलबार हैं, लेकिन यह अजीब बात है कि जब मैं शुरुआत में सेटग्रिडविड्थ को कॉल करता हूं, तो यह 18px के स्क्रॉल क्षेत्र को ध्यान में रखता नहीं है।

जहां तक ​​जादुई संख्या 54 है, वह संख्या है जो मुझे डायल को अनावश्यक स्क्रॉलबार के बिना प्रस्तुत करने के लिए संवाद मूल्य की ऊंचाई से घटाना था।

---

मुझे लगता है कि यह एक समय मुद्दा हो सकता है, हालांकि यह बहुत समझ में नहीं आता है। ग्रिड पूरी तरह से लोड होने के बाद शायद मुझे एक घटना को कॉल करना चाहिए। यह सुनिश्चित कर सकता है कि यह इसकी चौड़ाई सही ढंग से गणना करता है।

Answer 1

कुछ मामले हैं, जहां jqGrid चौड़ाई को थोड़ा ग़लत गणना करता है। ज्यादातर मुझे ग्रिड चौड़ाई के साथ समस्याएं होती हैं, लेकिन कुछ मामलों में आईई 6 पर ऊंचाई के साथ भी। इसलिए मुझे समस्या को ठीक करने के लिए एक छोटा सा कार्य लिखना है।

var fixGridWidth = function (grid) { 
    var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; 
    var mainWidth = jQuery('#main').width(); 
    var gridScrollWidth = grid[0].scrollWidth; 
    var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode); 
    var scrollWidth = gridScrollWidth; 
    if (htable.length > 0) { 
     var hdivScrollWidth = htable[0].scrollWidth; 
     if ((gridScrollWidth < hdivScrollWidth)) 
      scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth) 
    } 
    if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) { 
     var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth, mainWidth) 
     // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth 
     if (newGridWidth != gviewScrollWidth) 
      grid.jqGrid("setGridWidth", newGridWidth); 
    } 
}; 

var fixGridHeight = function (grid) { 
    var gviewNode = grid[0].parentNode.parentNode.parentNode; 
    //var gview = grid.parent().parent().parent(); 
    //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv"); 
    var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode); 
    if (bdiv.length) { 
     var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight; 
     var height = grid.height(); 
     if (delta !== 0 && height && (height-delta>0)) { 
      grid.setGridHeight(height-delta); 
     } 
    } 
}; 

var fixGridSize = function (grid) { 
    this.fixGridWidth(grid); 
    this.fixGridHeight(grid); 
}; 

इस कोड "main" में अंदर जिनमें से ग्रिड बनाया जाएगा माता पिता div की आईडी है। कोड I परीक्षण (scrollWidth > mainWidth) में "main" की चौड़ाई jqGrid चौड़ाई बढ़ाने की अनुमति देती है।

सही इस समारोह कॉल करने के लिए जगह loadComplete के अंदर है:

loadComplete: function() { 
    var gr = jQuery('#list'); 
    fixGridSize(gr); 
} 

और "done" के अंदर है, अगर आप 'columnChooser' का उपयोग करता है, तो उपयोग उपयोग Query('#list').jqGrid('columnChooser');

(इस उदाहरण में मैं भी 'gridResize' का उपयोग करें।)