ब्राउज़र का आकार बदलने पर jqGrid का आकार बदलें?

Question

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

Answer 1

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

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

Comments

इस स्थिति में भी बहुत उपयोगी है: SetGridWidth के लिए दूसरा पैरामीटर 'हटना' है। stackoverflow.com/questions/7745009/…

— जिम

स्टीफन, क्या आपने जेमव का समाधान देखा? यह सबसे अच्छा लगता है, लेकिन मैं देखना चाहता था कि आपने इसे इस दृष्टिकोण के साथ कैसे उलट दिया

— IcedDante

Answer 2

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

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

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

वास्तविक आकार परिवर्तन करने के लिए, निम्न तर्क को लागू करने वाला एक कार्य विंडो के आकार परिवर्तन की घटना के लिए बाध्य है:

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

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

• अंत में, ग्रिड की चौड़ाई बदलने के लिए 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>

Comments

यदि आपको IE का समर्थन करने की आवश्यकता है तो आप टाइमर के माध्यम से आकार बदलने की आवृत्ति को कम कर सकते हैं।

— 21

विस्तृत करने के लिए परवाह? मुझे IE पर समस्याएँ थीं जब ग्रिड बदलने की चौड़ाई के बिना आकार बदलने वाली घटना को बुलाया गया था, जिसके कारण ग्रिड पर ही अजीब व्यवहार हुआ। यही कारण है कि कोड 2 चरण में एक सीमा को ध्यान में रखता है

— जस्टिन एथियर

क्या होगा अगर मैं jqgrid के ऐड / एडिट फॉर्म के लिए css को बदलना चाहता हूँ?

— भाविक अम्बानी

Answer 3

ऑटो आकार:

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

Comments

ठीक है, मैं पुष्टि कर सकता हूं कि ऊपर 3.5+ संस्करण IE9 पर jqGrid 4.4.1 के साथ बहुत अच्छा काम करता है, लेकिन फ़ायरफ़ॉक्स 16 एक 17 के साथ, तालिका हर बार जब मैं ब्राउज़र की चौड़ाई को समायोजित करता है, तो थोड़ा व्यापक होता रहता है।

— मैटलसेले

शायद आपको सीएसएस में परिभाषित सीमाओं के साथ समस्याएं हैं - मैंने किया।

— jmav

आप शायद अपने setGridWidth () कॉल में jqGrid के हाल के संस्करणों में दूसरे पैराम के रूप में सही पास करना चाहते हैं। यदि आप तालिका में परिवर्तन नहीं करते हैं, तो तालिका में कॉलमों का आकार परिवर्तन नहीं किया जाता है। यानी$(this).setGridWidth(gridParentWidth, true);

— जोश शूमाकर

Answer 4

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

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

Comments

समाधान के लिए धन्यवाद, लेकिन यह ठीक से काम नहीं कर रहा था, जैसे कि यह पूरी div को बदलता है, लेकिन शीर्ष लेख के लिए लागू नहीं होता है। :(

— विकास गुप्ता

आपके उदाहरण में -30 क्यों है?

— वासिल पोपोव

मुझे यकीन नहीं है। यह 5 साल पहले था :(

— डैरेन काटो

Answer 5

मैं 960 का उपयोग कर रहा हूँ। लेआउट के लिए इसलिए मेरा समाधान इस प्रकार है:

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

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

Answer 6

अगर तुम:

• है 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;
}

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

Answer 7

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

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

इस तरह से आप सीधे window.onresize ईवेंट के लिए बाध्य कर रहे हैं, जो वास्तव में ऐसा लगता है कि आप अपने प्रश्न से क्या चाहते हैं।

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

Comments

पारितोषिक के लिए धन्यवाद! मुझे पता है कि मैं ग्रिड कोड से आकार परिवर्तन कोड को कॉल कर रहा था - जो भी कारण के लिए यह IE में काम नहीं करता है। वैसे भी, मैंने रिसाइज़ कोड को एक अलग फ़ंक्शन में निकाला और इसे रिसाइज़ फ़ंक्शन में और ग्रिड बनने के बाद दोनों को कॉल किया। एक बार फिर धन्यवाद!

— जस्टिन एथियर

आईई 8 में एक विंडो का आकार बदलने पर यह काम नहीं करता है। यह तब होता है जब आप पृष्ठ को ताज़ा करते हैं।

— SoftwareSavant

Answer 8

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

  function resizeGrids() {
    var reportObjectsGrid = $("#ReportObjectsGrid");
    reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var resizeTimer;

$(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
});

Comments

ऐसा लगता है कि टाइमर का काम ठीक से करना मुश्किल होगा। क्या आप कृपया मेरे अद्यतन उत्तर पर एक नज़र डाल सकते हैं और देख सकते हैं कि क्या आपको अभी भी टाइमर की आवश्यकता है?

— जस्टिन एथियर

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

— 15

संपादित करें: Stephens sln मेरे दूसरे पेज पर ठीक काम करता है ... इस पृष्ठ ने केवल तभी संघर्ष करना शुरू कर दिया था जब मैंने इसमें अन्य jQueryUI नियंत्रणों का एक गुच्छा जोड़ा था।

— वॉग्स

यह बहुत गूंगा सवाल है। लेकिन मैं Jquery पर एक पूर्ण NOOB हूं, इसलिए कृपया बहुत क्षमा करें, लेकिन हम इन सभी कार्यों को कहां रख रहे हैं? जेकरी (दस्तावेज़) के अंदर। पहले से ही (फ़ंक्शन () {} या हम इसे बाहर चिपका रहे हैं? बस सोच, यह भी, जहां $ (खिड़की) और चौड़ाई से आ रहा है?

— SoftwareSavant

@DainainEvent, मैंने $ (विंडो) .bind $ (डॉक्यूमेंट) में डाल दिया है। पहले से ही, और reszieTimer var और resizeGrids फंक्शन को $ (डॉक्यूमेंट) के बाहर पहले से ही रखा हुआ है। $ (विंडो) एक विंडो तत्व है जो कि jquery और। उपलब्धता में बनाया गया है (jquery) एक ऐसा कार्य है जो किसी तत्व की चौड़ाई की गणना करता है

— woggles का

Answer 9

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

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

Comments

मैं IE8 में कुछ अजीब व्यवहार भी कर रहा हूं और बिना किसी संगतता दृश्य के: / मेरा ग्रिड आकार के आधे आकार का होना चाहिए ... लिंक के लिए धन्यवाद

— woggles

Answer 10

autowidth: true

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

Comments

autowidthग्रिड के पहले लोड होने पर ठीक काम करता है, लेकिन ब्राउज़र के आकार बदलने पर ग्रिड का आकार नहीं बदलेगा। आपने उस समस्या से कैसे निपटा, या यह आपके लिए एक आवश्यकता नहीं है?

— जस्टिन एथियर

@ जस्टिन एथियर: आप सही कह रहे हैं। मैं चाहता था कि जब पहली बार ग्रिड को लोड किया जाए, तब न कि जब ब्राउज़र का आकार बदला जाए। क्षमा करें, मैंने प्रश्न को गलत बताया। मुझे वोट समझ में आता है।

— understack

Answer 11

यह काम..

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

Answer 12

<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>