प्रतिशत में एक स्लिम ग्रिड की चौड़ाई निर्दिष्ट कैसे करें?

Question

क्या कोई जानता है कि ग्रिड की चौड़ाई को प्रतिशत में कैसे सेट किया जाए?

उदाहरण के लिए

लेकिन पेज में ग्रिड की चौड़ाई 2000 से अधिक पिक्सल है। यह पृष्ठ चौड़ाई में समायोजित नहीं किया जाता है।

किसी भी मदद की सराहना की जाएगी।

धन्यवाद पद्मनाभन

Answer 1

FYI करें, इस SlickGrid के हाल के संस्करणों में बॉक्स से बाहर काम करने के लिए प्रकट होता है। :)

Answer 2

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

मैं स्पष्ट रूप से कॉलम चौड़ाई को सेट करने का तरीका नहीं समझ पाया लेकिन मुझे इसे पूरी तरह से काम करने के लिए मिला। (या जो भी आप चाहते हैं चौड़ाई) अपने सभी स्तंभों के लिए 300

{id:"name", name:"Student Name", field:"firstName", width: 300} 

इस सेट, जिन्हें आप चाहते हैं: चौड़ाई जोड़ने

अपने कॉलम घोषणा में पहले:

यहाँ इसे कैसे करना है व्यापक रूप से एक बड़ी संख्या डालें, उदाहरण के लिए इस मैं भाग मैं चाहता तालिका के शेष स्थान ले करने के लिए अपने तालिका स्तंभ मिलता है, और बनाए रखने में सक्षम था करके सच

{enableCellNavigation: true, enableColumnReorder: false, forceFitColumns: true}; 

: 500

अपने विकल्पों में तो

declation forceFitColumns जोड़ने एक दूसरे के सापेक्ष।

Answer 3

हां, यह संभव है, लेकिन मुझे एक आसान समाधान नहीं मिल रहा है। तो आपको इसे थोड़ा सा अनुकूलित करना होगा।

मैं वर्तमान में इसके लिए समाधान पर काम कर रहा हूं। यहां एक कामकाजी उदाहरण है, लेकिन इसमें कुछ कीड़े हैं। जिनमें से कुछ jsfiddle सेटअप से हैं। http://jsfiddle.net/MQBLn/8/

मूल रूप से मैंने एक ऐसा फ़ंक्शन बनाया जो कॉलम हेडिंग साइज़ के आधार पर कक्षों को स्वरूपित करता है। तो फिर तुम जब भी एक कार्य है कि समारोह कॉल करने के लिए की है। (क्रमबद्ध, आकार, आदि) इसके अलावा, मैं तो तुम यह कस्टम जे एस के बाद जे एस अनुभाग के शीर्ष पर लोड मिलेगा slick.grid.js लिए कुछ मामूली परिवर्तन करने की आवश्यकता थी। फिर सीएसएस के लिए कुछ अधिलेखित नियम।

यहाँ मेरी सेल फ़ॉर्मेटर समारोह

function formatCells(grid) 
{ 
    var columns = grid.getColumns(); 
    var grid_width = grid.getGridPosition().width; 
    var header = $(".slick-header-columns"); 

    for(var i in columns) 
    { 
     $(".slick-cell.r"+i).css("width", (Math.floor(((header.children().eq(parseFloat(i)).width()+9)/(grid_width-_scrollBarWidth))*10000)/100)+"%"); 
    } 
} 

मुझे आशा है कि यह उपयोगी है और हो सकता है एक सेटिंग के रूप SlickGrid में बनाया गया एक दिन है।

Answer 4

मैं एक ग्रिड आकार करने के लिए एक समारोह है।

function resizeGrid(newsize, grid) { 
      $('#dataGrid').css('width', newsize); 
      grid.resizeCanvas(); 
    } 

अपने ग्रिड के विकल्प के लिए forceFitColumns: true जोड़ने के लिए मत भूलना के रूप में ठग

Answer 5

SlickGrid-फ़ॉर्मेटर आपूर्ति आप ऊपर का कहना है 5 मानकों के साथ:

formatter: function (row, cell, value, columnDef, dataContext) 

आप स्तंभ 'चौड़ाई समायोजित कर सकते हैं डेटाकॉन्टेक्स्ट पैरामीटर का उपयोग करके, विशिष्ट फॉर्मेटर के अंदर, आदि: dataContext.width = 600 विशिष्ट कॉलम 600px बनाता है।

उदाहरण

{ 
     /* Categories */ 
     id: "categories", 
     formatter: function (row, cell, value, columnDef, dataContext) { 
      var html = ''; 

      if (value.indexOf('variation-child') != -1) { 
       return value; 
      } else if (value) { 
       for (var i = 0; i < value.length; i++) { 
        if (value[ i ]) { 
         html += '<div class="box category-box" title="' + value[ i ] + '">' + value[ i ] + '</div>'; 
        } 
       } 
      } 

      columnDef.width = 600 * value.length; 

      return html; 
     }, 
     name: "Categories", field: "categories", sortable: true, editor: Slick.Editors.TaxonomyPopupEditor 
    } 

जब भी आप ग्रिड के लिए डेटा जोड़ने संपन्न कर लें, grid.resizeCanvas(); उपयोग करने के लिए (चौड़ाई पुनर्गणना) याद रखें।