दिलचस्प पोस्ट
एनजी-क्लिक गतिशील रूप से उत्पन्न HTML से काम नहीं कर रहा है प्रत्येक के लिए जावास्क्रिप्ट में एक सरणी पर? जावास्क्रिप्ट में स्ट्रिंग से दिनांक ऑब्जेक्ट कैसे बनाएं क्या आपको सी # 4.0 में ओवरलोड या वैकल्पिक पैरामीटर का उपयोग करने के तरीकों को घोषित करना चाहिए? किसी व्यक्ति ने प्रकाशित शाखा को रीबेस या रीसेट करने के बाद मैं कैसे ठीक / पुन: सिंक्रनाइज़ कर सकता हूं? बफर्ड इमेज प्रत्येक रेंडरिंग से पहले साफ नहीं किया जा रहा है क्या ऑप्शन शब्दकोश कुंजी में कुंजीपटल प्रदर्शित करता है? स्क्रीन अभिविन्यास परिवर्तनों पर राज्य को खोने से कस्टम दृश्यों को कैसे रोकें Https के लिए अपाचे httpclient का उपयोग करना ऑब्जेक्ट्स और एरेज़ अतिरिक्त आईओएस में jQuery के क्लिक ईवेंट काम नहीं कर रहे हैं SQL सर्वर: भाजित ऑपरेशन फिक्स चेतावनी "विवरण के लिए सी-स्टाइल नापसंद है" स्विफ्ट 3 में एंड्रॉइड-समर्थन- v7-appcompat और android-support-v4 के बीच का अंतर मेरे ऐप में डायरेक्ट "iTunes में दर" लिंक है?

ब्राउज़र का आकार बदलते समय jqGrid का आकार बदलें?

क्या ब्राउज़र विंडो का पुनःआकार किया जा रहा है जब एक jqGrid का आकार बदलने का कोई तरीका है? मैंने यहाँ वर्णित विधि की कोशिश की है लेकिन यह तकनीक आईई 7 में काम नहीं करता है।

वेब के समाधान से एकत्रित समाधान "ब्राउज़र का आकार बदलते समय jqGrid का आकार बदलें?"

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

$(window).bind('resize', function() { $("#jqgrid").setGridWidth($(window).width()); }).trigger('resize'); 

एक अनुवर्ती के रूप में:

इस पोस्ट में दिखाए गए पिछले कोड को अंततः छोड़ दिया गया था क्योंकि यह अविश्वसनीय था। मैं अब ग्रिड का आकार बदलने के लिए निम्न API फ़ंक्शन का उपयोग कर रहा हूं, जैसा कि jqGrid प्रलेखन द्वारा अनुशंसित है:

 jQuery("#targetGrid").setGridWidth(width); 

वास्तविक रीसाइजिंग करने के लिए, निम्न तर्क को कार्यान्वित करने वाला फ़ंक्शन विंडो के आकार के इवेंट में बाध्य है:

  • ग्रिड की चौड़ाई की गणना उसके माता-पिता के क्लाइंटविड्थ और (यदि वह उपलब्ध नहीं है) इसके ऑफ़सेटविड्थ विशेषता के आधार पर करें।

  • सुनिश्चित करें कि चौड़ाई में एक्स पिक्सेल (कुछ एप्लिकेशन-विशिष्ट समस्याओं के आसपास काम करने के लिए) से अधिक बदल गया है, यह सुनिश्चित करने के लिए एक विवेकपूर्ण जांच करें

  • अंत में, ग्रिड की चौड़ाई बदलने के लिए setGridWidth () का उपयोग करें

रीसाइजिंग को संभालने के लिए यहां उदाहरण कोड है:

 jQuery(window).bind('resize', function() { // Get width of parent container var width = jQuery(targetContainer).attr('clientWidth'); if (width == null || width < 1){ // For IE, revert to offsetWidth if necessary width = jQuery(targetContainer).attr('offsetWidth'); } width = width - 2; // Fudge factor to prevent horizontal scrollbars if (width > 0 && // Only resize if new width exceeds a minimal threshold // Fixes IE issue with in-place resizing when mousing-over frame bars Math.abs(width - jQuery(targetGrid).width()) > 5) { jQuery(targetGrid).setGridWidth(width); } }).trigger('resize'); 

और उदाहरण मार्कअप:

 <div id="grid_container"> <table id="grid"></table> <div id="grid_pgr"></div> </div> 

ऑटो आकार परिवर्तन:

JQgrid 3.5+ के लिए

  if (grid = $('.ui-jqgrid-btable:visible')) { grid.each(function(index) { gridId = $(this).attr('id'); gridParentWidth = $('#gbox_' + gridId).parent().width(); $('#' + gridId).setGridWidth(gridParentWidth); }); } 

Jqgrid 3.4.x के लिए:

  if (typeof $('table.scroll').setGridWidth == 'function') { $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div) if (gridObj) { } else { $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) { grid = $(this).children('table.scroll'); gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight; grid.setGridWidth(gridParentWidth, true); }); } } 

यह मेरे लिए अच्छी तरह काम कर रहा है

 $(window).bind('resize', function() { jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true); }).trigger('resize'); 

मैं लेआउट के लिए 960.gs का उपयोग कर रहा हूं ताकि मेरा समाधान निम्नानुसार हो:

  $(window).bind( 'resize', function() { // Grid ids we are using $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth( $(".grid_5").width()); $("#clinteamgr, #procedgr").setGridWidth( $(".grid_10").width()); }).trigger('resize'); // Here we set a global options jQuery.extend(jQuery.jgrid.defaults, { // altRows:true, autowidth : true, beforeSelectRow : function(rowid, e) { // disable row highlighting onclick return false; }, datatype : "jsonstring", datastr : grdata, // JSON object generated by another function gridview : false, height : '100%', hoverrows : false, loadonce : true, sortable : false, jsonReader : { repeatitems : false } }); // Demographics Grid $("#demogr").jqGrid( { caption : "Demographics", colNames : [ 'Info', 'Data' ], colModel : [ { name : 'Info', width : "30%", sortable : false, jsonmap : 'ITEM' }, { name : 'Description', width : "70%", sortable : false, jsonmap : 'DESCRIPTION' } ], jsonReader : { root : "DEMOGRAPHICS", id : "DEMOID" } }); 

// नीचे परिभाषित अन्य ग्रिड …

अपने लिंक पर कोड से उधार लेना आप इस तरह से कुछ कोशिश कर सकते हैं:

 $(window).bind('resize', function() { // resize the datagrid to fit the page properly: $('div.subject').children('div').each(function() { $(this).width('auto'); $(this).find('table').width('100%'); }); }); 

इस तरह आप सीधे खिड़की पर बाध्य हो रहे हैं.ओनेसीज़ इवेंट, जो वास्तव में आपके प्रश्न से आप क्या चाहते हैं

यदि आपकी ग्रिड 100% चौड़ाई पर सेट है, हालांकि इसके कंटेनर का विस्तार होने पर इसे स्वचालित रूप से विस्तार किया जाना चाहिए, जब तक कि आपके द्वारा उपयोग किए जा रहे प्लगइन की कुछ जटिलताएं न हों, जिन्हें मैं नहीं जानता।

मुख्य उत्तर मेरे लिए काम किया, लेकिन आईई में बेहद अनुत्तरदायी ऐप बनाया, इसलिए मैंने सुझाव के अनुसार टाइमर का उपयोग किया। कोड ऐसा कुछ दिखता है ( $(#contentColumn) कॉलम $(#contentColumn) वह div है जिसे JQGrid बैठता है):

  function resizeGrids() { var reportObjectsGrid = $("#ReportObjectsGrid"); reportObjectsGrid.setGridWidth($("#contentColumn").width()); }; var resizeTimer; $(window).bind('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeGrids, 60); }); 

नमस्ते ढेर अतिप्रवाह उत्साही मुझे बहुत अधिक उत्तर मिला, और मैंने भी एक जोड़े को वोट किया, लेकिन उनमें से कोई भी कुछ अजीब कारणों से IE 8 पर मेरे लिए काम नहीं किया … हालांकि मैं इन लिंक्स में चला था … इस व्यक्ति ने एक लाइब्रेरी लिखी जो लगता है काम। इसे jquery UI के अनुकूलन में अपनी परियोजनाओं में शामिल करें, अपनी तालिका और div के नाम पर फेंक दें

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

अगर तुम:

  • shrinkToFit: false (निश्चित चौड़ाई स्तंभ)
  • है autowidth: true
  • द्रव की ऊंचाई के बारे में परवाह नहीं है
  • क्षैतिज स्क्रॉलबार है

आप निम्न शैलियों के साथ तरल पदार्थ की चौड़ाई के साथ ग्रिड कर सकते हैं:

 .ui-jqgrid { max-width: 100% !important; width: auto !important; } .ui-jqgrid-view, .ui-jqgrid-hdiv, .ui-jqgrid-bdiv { width: auto !important; } 

यहां एक डेमो है

 autowidth: true 

मेरे लिए पूरी तरह से काम किया यहां से सीखा

यह काम..

 var $targetGrid = $("#myGridId"); $(window).resize(function () { var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is generated by jqGrid. $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here? }); 
 <script> $(document).ready(function(){ $(window).on('resize', function() { jQuery("#grid").setGridWidth($('#fill').width(), false); jQuery("#grid").setGridHeight($('#fill').height(),true); }).trigger('resize'); }); </script> 

इसे इस्तेमाल करे:

 width: null shrinkToFit: true