जेक्यूग्रीड: कॉलम के आकार के बाद ग्रिड चौड़ाई का आकार बदलें

Question

कॉलम का आकार बदलने के बाद मैं ग्रिड की चौड़ाई का आकार बदलना चाहता हूं (इसलिए ग्रिड की चौड़ाई कॉलम की चौड़ाई के योग से मेल खाती है, जिसमें नई चौड़ाई भी शामिल है आकार बदल गया कॉलम)। यह क्षैतिज स्क्रॉलबार को भी दिखने से रोकना चाहिए।

आप the question में the demo प्रदान की को देखें, तो:

इस तरह जब विस्तार हो रहा/सिकुड़ कॉलम आकार बदलने के लिए की this question, जहां ग्रिड छुपा/स्तंभों दिखा के बाद का आकार बदलने के अलावा, मैं यह चाहते हैं के समान है @ ओलेग द्वारा, आप देख सकते हैं कि ग्रिड कॉलम के आकार पर आकार बदलता नहीं है।

resizeStop ईवेंट है जो मैं शायद उपयोग कर सकता हूं, और फिर कॉलम की चौड़ाई की गहराई तक ग्रिड सेट करने के लिए विधि setGridWidth विधि का उपयोग करें। मुझे यकीन नहीं है कि कॉलम की चौड़ाई को कैसे समेटना है ... शायद जेक्यूजीड में कुछ बनाया गया है जिसे मैं आसानी से करने के लिए उपयोग कर सकता हूं?

किसी भी सलाह के लिए आपको बहुत बहुत धन्यवाद!

Answer 1

मुझे व्यक्तिगत रूप से प्रश्न बहुत अच्छा लगता है। मैं ग्रिड चौड़ाई की गणना के एल्गोरिदम को सुधारने के लिए कई सुझाव देता हूं। दो बार मैंने आपके सुझावों में व्यवहार की तरह शामिल किया, लेकिन टोनी (jqGrid के डेवलपर) ने परिवर्तनों का हिस्सा हटा दिया।

jqGrid के वर्तमान संस्करण में अपनी आवश्यकताओं को लागू करने के लिए बहुत आसान है, लेकिन कोड कुछ आंतरिक ग्रिड संरचनाओं का उपयोग करता है। इसलिए आपको यह सत्यापित करना चाहिए कि एक ही चाल अगले संस्करणों में भी काम करेगी या नहीं।

resizeStop: function() { 
    $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first') 
       .jqGrid('setGridWidth', this.newWidth); 
} 

The demo शो रहते हैं कि यह कैसे काम करता है: resizeStop कॉलबैक के कोड का पालन हो सकता है।

jqGrid के लिए सामान्य समाधान की जटिलता अधिक है क्योंकि कभी-कभी ग्रिड की निर्दिष्ट चौड़ाई को पकड़ने की आवश्यकता होती है। मेरा दृष्टिकोण यहां निम्न है: यदि उपयोगकर्ता विकल्प ग्रिड प्रारंभिकरण (बनाने) के दौरान निर्दिष्ट करता है तो वह चौड़ाई को पकड़ना चाहता है। दूसरी तरफ यदि कोई width विकल्प ग्रिड की इच्छा (जैसे आप चाहें) बनाने के दौरान सभी कॉलम की चौड़ाई के आधार पर ग्रिड की कुल चौड़ाई की गणना के दौरान निर्दिष्ट किया गया है। यदि मामले में कुछ कॉलम चौड़ाई बदल दी जाएगी, तो ग्रिड चौड़ाई को समायोजित (पुन: गणना) भी किया जाना चाहिए। समस्या केवल तभी है जब मूल खाली width विकल्प ग्रिड बनाने के दौरान ओवरराइट किया जाएगा। मेरा सुझाव मूलwidth विकल्प widthOrg विकल्प ग्रिड बनाने के दौरान विकल्प को सहेजना होगा। तो मूलwidth विकल्प का मूल्य और स्तंभ आकार बदलने के बाद ग्रिड आकार बदलने का सर्वोत्तम व्यवहार चुनने में सक्षम होगा।

UPDATED: jqGrid कोड की टिप्पणियों में आप के साथ कुछ चर्चा और डिबगिंग के बाद मुझे आशा है कि मैं समाधान जो shrinkToFit पैरामीटर का मान से सही ढंग से स्वतंत्र काम करता पाया।समाधान निम्नलिखित

resizeStop: function() { 
    var $grid = $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first'), 
     shrinkToFit = $grid.jqGrid('getGridParam', 'shrinkToFit'); 

    $grid.jqGrid('setGridWidth', this.newWidth, shrinkToFit); 
} 

और jqGrid के आंतरिक showHideCol विधि की दो पंक्तियाँ की बदलती करने के लिए resizeStop के कोड में बदलाव करने से होते हैं। यह आप jqGrid के संस्करण संशोधित कर सकते हैं

$($t).jqGrid("setGridWidth", $t.p.tblwidth); 

को

cw = this.widthOrg && $t.p.shrinkToFit ? this.widthOrg: parseInt(this.width,10); 

और another line

$($t).jqGrid("setGridWidth",$t.p.shrinkToFit === true ? $t.p.tblwidth : $t.p.width); 

की बदलती करने के लिए the line

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10); 

के पहले बदल रहा है here। The first demoshrinkToFit: true और the second demo के साथ कोड का उपयोग करता है, उसी कोड का उपयोग करता है, लेकिन shrinkToFit: true के विकल्प के बिना।

हालांकि मैं अगले दिन मेकग्रिड के उपयोग के समय width विकल्प के उपयोग के मामले में फ़िक्स काम करने के तरीके को कैसे ठीक कर सकता हूं और मेरा सुझाव ट्रिरैंड फ़ोरम पर पोस्ट करूंगा।

आप कम से कम jqGrid के संस्करण का उपयोग करता है चाहते हैं तो आप यह अपने आप को कम से कम एक या का उपयोग मूल संस्करण को कम से कम और $.jgrid.extend के संबंध में केवल showHideCol विधि के ऊपर लिख jqGrid कर सकते हैं। the demo देखें।

UPDATED: jqGrid एक के बाद के संस्करणों में this के मूल्य के परिवर्तन के बाद निम्नलिखित के बारे में करने के लिए resizeStop कॉलबैक ऊपर दिए गए कोड बदलना चाहिए:

resizeStop: function() { 
    var $self = $(this), 
     shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit"); 

    $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit); 
} 

Answer 2

मैं एक समारोह बनाने

var grid_setAutoWidth = function() { 

    var columnas = $(this).jqGrid('getGridParam', 'colModel'); 

    var anchoTotal = 0; 
    for (var i = 0; columnas[i]; i++) { 
     anchoTotal += columnas[i].width; 
    } 

    anchoTotal += 50; 
    $(this).jqGrid('setGridWidth', anchoTotal); 

}; 

... और फिर, ग्रिड पैराम्स में

shrinkToFit: false, 
loadComplete: grid_setAutoWidth, 
resizeStop: grid_setAutoWidth, 

मुझे लगता है कि यह सबसे आसान तरीका है